jQWidgets Forums
This topic contains 5 replies, has 2 voices, and was last updated by Peter Stoev 8 years, 1 month ago.
-
Please, look at https://www.jseditor.io/?key=testlinemultiserierangeselector (or at the code at the end of the post)
On the chart, click on “S1” in the legend to disable the serie => the chart is correctly updated but rangeSelector is not working anymore on chrome browser (it works correctly in internet explorer 11 for example) !
Re-enable the “S1” serie and diable the “S2” serie => both chart and rangeSelector are working !Now, more stranger circumstances :
* comment inclusion of jqx-all.js
* uncomment the lines above to include scripts separately
=> now, disabling “S1” is working correctly (both chart and rangeSelector updated accordingly)I’ve reproduced that in 4.5.2 but I think there is no difference between both versions
Here is a screenshot :
Here is the code :
<!DOCTYPE html /> <html lang="en"> <head> <title id='Description'>JavaScript Chart Candlestick series</title> <meta name="description" content="This is an example of Javascript Chart Candlestick series." /> <link rel="stylesheet" href="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/scripts/jquery-1.11.1.min.js"></script> <!-- <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqxchart.rangeselector.js"></script> --> <script type="text/javascript" src="https://jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script> <script type="text/javascript"> $(document).ready(function () { // prepare chart data as an array // prepare jqxChart settings var settings = { "enableAnimations":true, "title":"", "description":"", "showLegend":true, "legendLayout":{"left":5,"top":5,"width":300,"height":814,"flow":"vertical"}, "padding":{"left":300,"top":20,"right":10,"bottom":10}, "source":[ {"S1":0,"S3":0,"S2":0,"date":"2016-04-10T22:00:00.000Z","aggregatedValue":0}, {"S1":15,"S3":2,"S2":0,"date":"2016-04-11T02:00:00.000Z","aggregatedValue":17}, {"S1":47,"S3":1,"S2":1,"date":"2016-04-11T06:00:00.000Z","aggregatedValue":49}, {"S1":50,"S3":2,"S2":1,"date":"2016-04-11T10:00:00.000Z","aggregatedValue":53}, {"S1":36,"S3":1,"S2":0,"date":"2016-04-11T14:00:00.000Z","aggregatedValue":37}, {"S1":4,"S3":0,"S2":0,"date":"2016-04-11T18:00:00.000Z","aggregatedValue":4}], "xAxis":{ "dataField":"date", "type":"date", "baseUnit":"minute", "gridLines":{"visible":true}, "rangeSelector":{ "size":100, "backgroundColor":"white", "dataField":"aggregatedValue", "baseUnit":"minute", "gridLines":{"visible":false}, "serieType":"area" } }, "colorScheme":"scheme01", "valueAxis":{"visible":true}, "seriesGroups":[ { "type":"line", "series":[ {"dataField":"S1",displayText:"S1"}, {"dataField":"S3",displayText:"S2"}, {"dataField":"S2",displayText:"S3"} ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); }); </script> </head> <body class='default'> <div> <div id='chartContainer' style="width:800px; height:500px;"> </div> <br /> <!-- you can optionally render the selecor in this container --> <div id='selectorContainer' style="width:800px; height:100px;"> </div> </div> <div class="example-description"> <br /> <h2>Description</h2> <br /> This is an example of Javascript Chart Candlestick series. The candlestick chart is used in finance and is a way to represent open, high, low and close volumes per period. You can see how to define the range selector. The type of the seriesGroups is candlestick. </div> </body> </html>
You must be logged in to reply to this topic.