jQWidgets Forums

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • in reply to: live update data from file 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>
    
Viewing 1 post (of 1 total)