Strange Area Chart behavior

[justbaneMember]

So

[justbaneMember]

WOW I just wasted 20 min typing only to have the stupid editor clear my work and submit So… SO…

The area charts have a bug.

I have a stacked area chart. across the bottom i have 0, 3,6,9,12,15… etc.

Along the left is 0 – 100 in 20’s

I am using one of the series to fill in across the graph so the value is always 100 and the only change is across the bottom. 3, 6, 9 etc.

Everything works great EXCEPT 12 – when I hit 12 the data is value 100 and duration 12… but the graph shows the top of the area at 12 and bottom slanting to 15…

this occurs in all area types so far to my testing.

this seems like it would be fine as all other numbers work as expected.

Thanks for a quick reply – this will decide weather this lib is used or another.

[Peter StoevKeymaster]

Hi justbane,

For posting code in the Forum, please take a look at: http://www.jqwidgets.com/community/topic/code-formatting/
I would also appreciate a more detailed information about the reported behavior because from the information I have, I cannot understand what’s going wrong. If you have a sample or code snippet which would help us, please feel free to post it here or to send it to support@jqwidgets.com.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[justbaneMember]

OK here is some code to test.

Looking at the data source the first entry should always be Duration: 0, Functional: 100… then you can change the second entry duration from 3 to 6 to 9 then to 12… 3, 6 9, 15.. all look fine perfectly square but 12 has a slant from 12 to 15…

Let me know if I should attach screen shots as well.

$(function() {
				var source = [
					{ Duration:0,Functional:100 },
					{ Duration:3,Functional:100}
				];
				
			    // prepare jqxChart settings
			    var settings = {
			        title: "Strength/Degradation/Total Consumption",
			        description: "Describe the graph here",
			        enableAnimations: true,
			        showLegend: true,
			        padding: { left: 5, top: 5, right: 15, bottom: 5 },
			        titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
			        source: source,
			        categoryAxis:
			            {
			                text: 'Category Axis',
			                textRotationAngle: 0,
			                dataField: 'Duration',
			                showTickMarks: true,
			                tickMarksInterval: 3,
			                tickMarksColor: '#888888',
			                unitInterval: 3,
			                showGridLines: true,
			                gridLinesInterval: 3,
			                gridLinesColor: '#888888',
			                axisSize: 'auto',
			                minValue: 0,
			                maxValue: 24,
			                valuesOnTicks: true
			            },
			        colorScheme: 'scheme01',
			        seriesGroups:
				    [
						{
				    	    type: 'stackedarea', // change the series type here
				    	    valueAxis:
				    	    {
				    	        minValue: 0,
				    	        maxValue: 100,
				    	        unitInterval: 20,
				    	        displayValueAxis: false
				            },
				            series: [
								{ dataField: 'Functional', displayText: 'End of Functional Stength', opacity: 0.7}
				    	    ]
				    	}
				    ]
			    };
			    // setup the chart
			    $('#chartTest').jqxChart(settings);
			});

[Peter StoevKeymaster]

Hi justbane,

I was able to reproduce the reported issue and created a work item about it. As a work-around, set the maxValue to 24.01.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[justbaneMember]

Thanks so much Peter – will give it a go.

[Peter StoevKeymaster]

Hi justbane,

Another solution for the same is to use the jqxChart’s alignEndPointsWithIntervals property.

seriesGroups :
                [{
                    type: 'stackedarea', // change the series type here
                    alignEndPointsWithIntervals: false,
                        valueAxis : {
                            minValue : 0,
                            maxValue : 100,
                            unitInterval : 20,
                            displayValueAxis : true
                        },
                        series : [{
                                dataField : 'Functional',
                                displayText : 'End of Functional Stength',
                                opacity : 0.7
                            }
                        ]
                    }
                ]

Seems that I need to update my jqxChart knowledge
Sorry for the inconvenience.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts