live update data from file - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: chart, csv, file, jqxChart, live, setInterval, update

This topic contains 3 replies, has 2 voices, and was last updated by Dimitar 10 years, 4 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

live update data from file Posts

July 29, 2014 at 12:19 pm live update data from file #57781

Participant

Hello

I know jqxChart supports live updates: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_live_updates.htm
This is great example but i need to read data from csv everytime when chart is updating. (not from data source stored in browser memory)
My source is generated by perl script – generate every 5 seconds. (show results from last 2 minutes format (date,<sensor1>,<sensor2>):

14:17:23.951,285,337
14:17:23.954,268,337
14:17:25.022,268,333
14:17:25.522,268,300
14:17:26.378,268,317

Have you got any idea how can i do this ?

July 29, 2014 at 1:04 pm live update data from file #57783

Dimitar

Participant

Hello abcklocki,

First make sure the data source bound to your chart is changed (in the demo this is the variable data). Then just call the chart’s update method.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

August 1, 2014 at 10:05 am live update data from file #57892

abcklocki

Participant

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 example

I 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>

August 4, 2014 at 8:54 am live update data from file #57985

Dimitar

Participant

Hi abcklocki,

As I understand it, in your case you reload the whole page every 5 seconds. The idea is to update just the chart via setInterval. If you are sure your data source is updated every 5 seconds, you only have to include this code in your page:

var ttimer = setInterval(function() {
    $('#chartContainer').jqxChart('update');
}, 5000);

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.