jQuery UI Widgets › Forums › Chart › jqxChart Reloading Data
This topic contains 1 reply, has 2 voices, and was last updated by Todor 5 years, 5 months ago.
Viewing 2 posts - 1 through 2 (of 2 total)
-
AuthorjqxChart Reloading Data Posts
-
Hi,
I am not sure what I am doing wrong. I have created a jqxChart with range selection. (BTW – Awesome library). On my page is a dropdown that changes the index to pull new data in from a php script. The graph works great, but when I change the value in the drop down, I get an endless loop of reloading the data.
I am referencing https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxchart/jquery-chart-data-source.htm
Can anyone tell me why this code does not work?
Code responsible to reload the data
$('#droprid').change(function(e) { // Dropdown Created by php scrip not shown e.preventDefault(); var id = this.value; if (id != rid) { // value really changes... rid = id; source.data.rid = rid; dataAdapter = new $.jqx.dataAdapter(source); $("#jqxChart").jqxChart({source: dataAdapter}); } });Modified Source Code without the PHP
<!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link rel="stylesheet" type="text/css" media="screen" href="../css/water.css"> <link rel="shortcut icon" href="../favicon.ico?" type="image/x-icon"/> <link rel="icon" href="../favicon.ico?" type="image/x-icon"/> <link rel="icon" type="image/png" sizes="32x32" href="../images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="96x96" href="../images/favicon-96x96.png"> <link rel="icon" type="image/png" sizes="16x16" href="../images/favicon-16x16.png"> <link rel="stylesheet" href="../includes/jqwidgets/styles/jqx.base.css" type="text/css" /> <link rel="stylesheet" href="../includes/jqwidgets/styles/jqx.classic.css" type="text/css" /> <script type="text/javascript" src="../includes/jquery-1.11.1.min.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxdraw.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxslider.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxlistbox.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxbuttons.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxslider.js"></script> <script type="text/javascript" src="../includes/jqwidgets/jqxchart.rangeselector.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datatype: "json", datafields: [ { name: 'time', type: 'date'}, { name: 'alpha1'}, { name: 'alpha2'}, { name: 'alpha3'}, { name: 'avg'} ], cache: false, url: '_graph3.php', data : { rid: rid, cam: cam } }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: true, downloadComplete: function () { }, loadComplete: function () { }, loadError: function () { } }); // prepare jqxChart settings var settings = { title: "Graph", description: "Graph", enableAnimations: true, enableCrosshairs: true, showLegend: true, padding: { left: 5, top: 5, right: 30, bottom: 5 }, titlePadding: { left: 30, top: 5, right: 0, bottom: 10 }, source: dataAdapter, xAxis: { dataField: 'time', type: 'date', baseUnit: 'second', unitInterval: 'auto', formatFunction: function (value) { return $.jqx.dataFormat.formatdate(value, "HH:mm:ss", 'en-us'); }, gridLines: { step: 2 }, valuesOnTicks: true, labels: { angle: -45, offset: { x: -17, y: 0} }, rangeSelector: { // Uncomment the line below to render the selector in a separate container renderTo: $('#selectorContainer'), size: 80, padding: { left: 5, right: 5,top: 0, bottom: 0 }, backgroundColor: 'white', dataField: 'avg', baseUnit: 'minute', gridLines: { visible: false }, serieType: 'area' } }, valueAxis: { unitInterval: 10, minValue: -100, maxValue: 0, labels: {horizontalAlignment: 'right'}, title: { text: 'RSSI<br>' } }, colorScheme: 'scheme01', seriesGroups: [ { type: 'line', series: [ { dataField: 'alpha1', displayText: 'Alpha1' }, { dataField: 'alpha2', displayText: 'Alpha2' }, { dataField: 'alpha3', displayText: 'Alpha3' } ] } ] }; // Number format for Showing Time Slider Number.prototype.pad = function(size) { var s = String(this); while (s.length < (size || 2)) {s = "0" + s;} return s; } $('#jqxChart').jqxChart(settings). on('rangeSelectionChanging', function (event) { var args = event.args; // Display time range when changed var d1 = args.minValue.getHours() +":" + (args.minValue.getMinutes()).pad() +":"+ (args.minValue.getSeconds()).pad(); var d2 = args.maxValue.getHours() +":" + (args.maxValue.getMinutes()).pad() +":"+ (args.maxValue.getSeconds()).pad(); args.instance.description = "Time Range: " + d1 + " to " + d2; }); $('#droprid').change(function(e) { // Dropdown Created by php scrip not shown e.preventDefault(); var id = this.value; if (id != rid) { rid = id; source.data.rid = id; dataAdapter = new $.jqx.dataAdapter(source); $("#jqxChart").jqxChart({source: dataAdapter}); } }); }); </script> </head> <body> <div id="container"> <div id="content"> <h3> View </h3> <table width="500px"> <tr> <td>Selection:</td> <td><select id="dropid"><option value="1">Value 1</option><option value="2">Value 2</option></select></td> </tr> </table> <div id='jqxChart' style="border: 0; width: 800px; height: 500px;"></div> <div id='selectorContainer' style="width:800px; height:100px;"></div> </div> </div> </div> </body> </html>Hello dpitchfo,
I would suggest to refresh the jqxChart after data change –
$('#jqxChart').jqxChart('refresh');. Also a demo for refreshing the chart.Let us know if you need further assistance.
Best Regards,
TodorjQWidgets Team
https://www.jqwidgets.com -
AuthorPosts
Viewing 2 posts - 1 through 2 (of 2 total)
You must be logged in to reply to this topic.