jQuery UI Widgets › Forums › Chart › Customizable charts error with range selector.
Tagged: chart, charts, jquery chart, jquery charts
This topic contains 3 replies, has 2 voices, and was last updated by EGRocha 7 years, 2 months ago.
-
Author
-
Hello,
I have a chart that should be customizable. The user should be able to switch between chart types like Line, Column and Pie. For that I implemented a dropdown element. When the element is selected, a callback is run to get the new settings and update the chart. The column and line charts have a range selector. Switching between those two works fine. The problem is switching between one of them and pie. Then the following error is raised “jqxchart.rangeselector.js:6 Uncaught TypeError: Cannot read property ‘y’ of undefined” and I can’t switch back to column/line. The problem is exactly the range selector, since it works fine when it is removed.
The weird is that all settings and data sources are updated when the chart is changed.
Does anyone have an idea of how to implement it?
Hi EGRocha,
Could you share a small jsfiddle.net sample which demonstrates this Chart issue? We will take a look at it and if there is an issue on our side with the Chart, we will do our best to resolve it.
Regards,
PeterHi, I’ve taken an example posted on this forum and adapted to show what the problem is
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html lang="en"> <head> <title id='Description'>jqxChart Stacked Column Series Example</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxchart.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript"> $(document).ready(function () { var chartList = [ "First chart", "Second chart", "Third chart" ]; $("#jqxdropdownlist").jqxDropDownList({ source: chartList, selectedIndex: -1, width: '200px', height: '25px', dropDownHeight: '75px' }); // source and settings for the first chart var sampleData1 = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25 }, { Day: 'Thursday', Running: 35, Swimming: 25, Cycling: 45 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30 }, { Day: 'Sunday', Running: 60, Swimming: 45, Cycling: 0 } ]; var settings1 = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise by activity", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData1, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Day', showTickMarks: true, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, showGridLines: false, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme06', seriesGroups: [ { type: 'stackedcolumn', columnsGapPercent: 100, seriesGapPercent: 5, valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, displayValueAxis: true, description: 'Time in minutes', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Running', displayText: 'Running' }, { dataField: 'Swimming', displayText: 'Swimming' }, { dataField: 'Cycling', displayText: 'Cycling' } ] } ] }; // source and settings for the second chart var sampleData2 = [ {Share:60, Type: "Running"},{Share: 45, Type:"Swimming"},{Share:0, Type:"Cycling"} ]; var settings2 = { title: 'PIE SPORTS', description: 'FOO', enableAnimations: true, showLegend: true, showBorderLine: true, legendPosition: { left: 520, top: 140, width: 100, height: 100 }, padding: { left: 5, top: 5, right: 5, bottom: 5 }, titlePadding: { left: 0, top: 0, right: 0, bottom: 10 }, source: sampleData2, colorScheme: 'scheme02', seriesGroups: [{ type: 'pie', showLabels: true, series: [ { dataField: 'Share', displayText: 'Type', labelRadius: '50%', initialAngle: 15, radius: '80%', centerOffset: 0, formatSettings: { sufix: '', decimalPlaces: 1 } } ] }] }; // source and settings for the third chart var sampleData3 = [ { Day: 'Monday', Running: 30, Swimming: 0, Cycling: 25, Goal: 40 }, { Day: 'Tuesday', Running: 25, Swimming: 25, Cycling: 0, Goal: 50 }, { Day: 'Wednesday', Running: 30, Swimming: 0, Cycling: 25, Goal: 60 }, { Day: 'Thursday', Running: 20, Swimming: 20, Cycling: 25, Goal: 40 }, { Day: 'Friday', Running: 0, Swimming: 20, Cycling: 25, Goal: 50 }, { Day: 'Saturday', Running: 30, Swimming: 0, Cycling: 30, Goal: 60 }, { Day: 'Sunday', Running: 20, Swimming: 40, Cycling: 0, Goal: 90 } ]; var settings3 = { title: "Fitness & exercise weekly scorecard", description: "Time spent in vigorous exercise by activity", enableAnimations: true, showLegend: true, padding: { left: 10, top: 5, right: 10, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: sampleData3, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Day', showTickMarks: true, valuesOnTicks: false, tickMarksInterval: 1, tickMarksColor: '#888888', unitInterval: 1, gridLinesInterval: 1, gridLinesColor: '#888888', axisSize: 'auto', rangeSelector: { padding: {top: 0, bottom: 0 }, backgroundColor: 'white', gridLines: { visible: false }, serieType: 'area' } }, colorScheme: 'scheme05', seriesGroups: [ { type: 'line', showLabels: true, symbolType: 'circle', valueAxis: { unitInterval: 10, minValue: 0, maxValue: 100, description: 'Goal in minutes', axisSize: 'auto', tickMarksColor: '#888888' }, series: [ { dataField: 'Goal', displayText: 'Personal Goal' } ] } ] }; // changes the chart's settings $('#jqxdropdownlist').on('select', function (event) { var args = event.args; if (args) { var index = args.index; var item = args.item; // get item's label and value. var label = item.label; if (label == "First chart") { $('#jqxChart').jqxChart(settings1); } else if (label == "Second chart") { $('#jqxChart').jqxChart(settings2); } else if (label == "Third chart") { $('#jqxChart').jqxChart(settings3); }; }; }); }); </script> </head> <body class='default'> <div id="jqxdropdownlist"> </div> <br /> <div id='jqxChart' style="width: 680px; height: 400px;" /> </body> </html>Basically, switching between the first and the second and the first and the third works fine. The problem is switching between the second and the third.
Yesterday I’ve done a work around that consists of removing the property “rangeSelector” before switching to the second chart, but still doesn’t look like a nice solution.
-
AuthorPosts
You must be logged in to reply to this topic.