jQWidgets Forums
Forum Replies Created
Viewing 6 posts - 1 through 6 (of 6 total)
-
Author
-
ok, how can I control how many pieces of data the chart gets from the JSON data source?
Is it possible to allow the user to select how many samples are displayed on the chart hence displaying more or less data?
i.e. 1 month, 1 day, 1 year etc
It’s either NaN or a large number that is incorrect.
Problem solved.
I had neglected dataAdapter.dataBind();
What do I need to write above $(‘#jqxchart’).jqxChart(‘update’); in order to collect the new JSON data from data.php?
Hi my code as follows still does not update the chart every 3 seconds even when new data is placed into the database. I have to manually refresh the page to see the updated chart.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>DigiPlant Environment Monitor</title> <link rel="stylesheet" href="/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="/jqxcore.js"></script> <script type="text/javascript" src="/jqxdata.js"></script> <script type="text/javascript" src="/jqxchart.js"></script> <script type="text/javascript"> $(document).ready(function () { var source = { datatype: "json", datafields: [ { name: 'created', type: 'date'}, { name: 'temp'}, { name: 'hum'}, { name: 'light'} ], url: 'data.php' }; var dataAdapter = new $.jqx.dataAdapter(source, { autoBind: true, async: false, downloadComplete: function () { }, loadComplete: function () { }, loadError: function () { } }); // prepare jqxChart settings var settings = { title: "DigiPlant Environment Monitor", description: false, showLegend: true, padding: { left: 15, top: 10, right: 15, bottom: 5 }, titlePadding: { left: 25, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'created', formatFunction: function (value) { return $.jqx.dataFormat.formatdate(value, 'dd/MM HH:mm'); }, toolTipFormatFunction: function (value) { return $.jqx.dataFormat.formatdate(value, 'dd/MM HH:mm'); }, showTickMarks: true, tickMarksInterval: 20, tickMarksColor: '#888888', unitInterval: 20, showGridLines: true, gridLinesInterval: 10, gridLinesColor: '#888888', axisSize: 'auto' }, colorScheme: 'scheme05', seriesGroups: [ { type: 'line', valueAxis: { displayValueAxis: true, displayGridLines: false, description: '\u00B0C / \u0025', axisSize: 'auto', tickMarksColor: '#888888', unitInterval: 10, minValue: 0, maxValue: 50, }, series: [ { dataField: 'temp', displayText: 'Temperature', toolTipFormatSettings: { sufix: '\u00B0C', decimalPlaces: 1, decimalSeparator: '.', negativeWithBrackets: true } }, { dataField: 'hum', displayText: 'Humidity', toolTipFormatSettings: { sufix: '\u0025', decimalPlaces: 1, decimalSeparator: '.', negativeWithBrackets: true } } ] }, { type: 'spline', valueAxis: { unitInterval: 200, minValue: 0, maxValue: 1000, description: 'Arbitary units' }, series: [ { dataField: 'light', displayText: 'Light level', toolTipFormatSettings: { sufix: ' AU' } }, ] } ] }; // setup the chart $('#jqxChart').jqxChart(settings); // auto update timer var ttimer = setInterval(function () { $('#jqxchart').jqxChart('update'); }, 3000); }); </script> </head> <body class='default'> <div align="center"> <div id='jqxChart' style="width:780px; height:300px"> </div> </div> </body> </html>
Thanks.
-
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)