jQWidgets Forums
Forum Replies Created
Viewing 2 posts - 1 through 2 (of 2 total)
-
Author
-
September 22, 2017 at 7:39 am in reply to: Customizable charts error with range selector. Customizable charts error with range selector. #96243
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.
September 22, 2017 at 7:35 am in reply to: Customizable charts error with range selector. Customizable charts error with range selector. #96242Hi, 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> -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)