jQWidgets Forums
Forum Replies Created
Viewing 1 post (of 1 total)
-
Author
-
August 1, 2014 at 10:05 am in reply to: live update data from file live update data from file #57892
Thanks for reply.
I don’t have idea what i’m doing wrong – i know only that source is updating every 5 seconds for sure.
I did some research and i use JavaScript:timedRefresh(5000) like below – and it’s working (i have autoupdated chart every 5 seconds)
(i added timedRefresh(timeoutPeriod) script and modified <body class=’default’ onload=”JavaScript:timedRefresh(5000);”> )
rest is similar to javascript_chart_spline_series.htm exampleI think i have to use refresh to load updated data from external csv file.
<!DOCTYPE html> <html lang="en"> <head> <title id='Description'>Response time - ProxyPlus</title> <link rel="stylesheet" href="jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="scripts/jquery-1.10.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"> <!-- function timedRefresh(timeoutPeriod) { setTimeout("location.reload(true);",timeoutPeriod); } // --> </script> <script type="text/javascript"> $(document).ready(function () { // prepare the data var source = { datatype: "csv", datafields: [ { name: 'Year' }, { name: 'ineth' }, { name: 'outeth' } ], url: 'file5.csv' }; var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); } }); // prepare jqxChart settings var settings = { title: "Response time for my sensors", description: "traffic in/out on interface eth0", enableAnimations: true, showLegend: true, padding: { left: 5, top: 5, right: 25, bottom: 5 }, titlePadding: { left: 90, top: 0, right: 0, bottom: 10 }, source: dataAdapter, categoryAxis: { text: 'Category Axis', textRotationAngle: 0, dataField: 'Year', showTickMarks: true, tickMarksInterval: 10, tickMarksColor: '#888888', unitInterval: 80, showGridLines: true, gridLinesInterval: 10, gridLinesColor: '#888888', axisSize: 'auto', minValue: 150 // maxValue: 400 }, colorScheme: 'scheme04', seriesGroups: [ { type: 'splinearea', valueAxis: { unitInterval: 100, displayValueAxis: true, displayGridLines: true }, series: [ { dataField: 'ineth', displayText: 'in', opacity: 0.7 }, { dataField: 'outeth', displayText: 'out', opacity: 0.8 } ] } ] }; // setup the chart $('#chartContainer').jqxChart(settings); $('#chartContainer').jqxChart('update'); }); </script> </head> <body class='default' onload="JavaScript:timedRefresh(5000);"> <div id='chartContainer' style="width:1200px; height:400px"> </div> </body> </html>
-
AuthorPosts
Viewing 1 post (of 1 total)