jQuery UI Widgets Forums Chart Chart auto update

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

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • Chart auto update #50540

    mh512
    Participant

    Hi

    I have the following code but my chart does not retrieve the new data after 3 seconds?

    Any help appreciated.

    `
    <!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: “Environment data log”,
    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 () {
    var max = 800;
    for (var i = 0; i < data.length; i++) {
    data[i].a = Math.max(100, (Math.random() * 1000) % max);
    data[i].b = Math.max(100, (Math.random() * 1000) % max);
    }
    $(‘#jqxchart’).jqxChart(‘update’);
    }, 3000);

    });
    </script>
    </head>
    <body class=’default’>
    <div align=”center”>
    <div id=’jqxChart’ style=”width:780px; height:300px”>
    </div>
    </div>
    </body>
    </html>

    Chart auto update #50563

    Dimitar
    Participant

    Hello mh512,

    In your example data is not defined. In ttimer‘s callback function leave only:

    $(‘#jqxchart’).jqxChart(‘update’);

    The chart will be updated (but only if the data source has been updated externally).

    Best Regards,
    Dimitar

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

    Chart auto update #51089

    mh512
    Participant

    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.

    Chart auto update #51091

    mh512
    Participant

    What do I need to write above $(‘#jqxchart’).jqxChart(‘update’); in order to collect the new JSON data from data.php?

    Chart auto update #51093

    mh512
    Participant

    Problem solved.

    I had neglected dataAdapter.dataBind();

    Chart auto update #51101

    mh512
    Participant

    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

    Chart auto update #51132

    Dimitar
    Participant

    Hi mh512,

    The category axis (x in most cases) is controlled by the data source. The value axis (y) can be controlled by minValue and maxValue.

    Best Regards,
    Dimitar

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

    Chart auto update #51219

    mh512
    Participant

    ok, how can I control how many pieces of data the chart gets from the JSON data source?

    Chart auto update #51228

    Dimitar
    Participant

    Hi mh512,

    You can do this in the dataAdapter beforeLoadComplete callback function. Here is an example, based on the demo Column Series, but with only 4 results:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <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/jqxchart.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare chart data as an array            
                var source =
                {
                    datatype: "csv",
                    datafields: [
                        { name: 'Country' },
                        { name: 'GDP' },
                        { name: 'DebtPercent' },
                        { name: 'Debt' }
                    ],
                    url: '../sampledata/gdp_dept_2010.txt'
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, { async: false, autoBind: true, loadError: function (xhr, status, error) { alert('Error loading "' + source.url + '" : ' + error); },
                    beforeLoadComplete: function (records) {
                        var data = new Array();
                        for (var i = 0; i < 4; i++) {
                            var dataPoint = new Object();
                            dataPoint.Country = records[i].Country;
                            dataPoint.GDP = records[i].GDP;
                            dataPoint.DebtPercent = records[i].DebtPercent;
                            dataPoint.Debt = records[i].Debt;
                            dataPoint.uid = records[i].uid;
                            data.push(dataPoint);
                        }
                        return data;
                    }
                });
    
                // prepare jqxChart settings
                var settings = {
                    title: "Economic comparison",
                    description: "GDP and Debt in 2010",
                    showLegend: true,
                    enableAnimations: true,
                    padding: { left: 5, top: 5, right: 5, bottom: 5 },
                    titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                    source: dataAdapter,
                    categoryAxis:
                        {
                            dataField: 'Country',
                            showGridLines: true
                        },
                    colorScheme: 'scheme01',
                    seriesGroups:
                        [
                            {
                                type: 'column',
                                columnsGapPercent: 50,
                                valueAxis:
                                {
                                    unitInterval: 5000,
                                    displayValueAxis: true,
                                    description: 'GDP & Debt per Capita($)'
                                },
                                series: [
                                        { dataField: 'GDP', displayText: 'GDP per Capita' },
                                        { dataField: 'Debt', displayText: 'Debt per Capita' }
                                    ]
                            },
                            {
                                type: 'line',
                                valueAxis:
                                {
                                    unitInterval: 10,
                                    displayValueAxis: false,
                                    description: 'Debt (% of GDP)'
                                },
                                series: [
                                        { dataField: 'DebtPercent', displayText: 'Debt (% of GDP)' }
                                    ]
                            }
    
                        ]
                };
    
                // setup the chart
                $('#jqxChart').jqxChart(settings);
    
            });
        </script>
    </head>
    <body class='default'>
        <div style='height: 600px; width: 682px;'>
            <div id='host' style="margin: 0 auto; width: 680px; height: 400px;">
                <div id='jqxChart' style="width: 680px; height: 400px; position: relative; left: 0px;
                    top: 0px;">
                </div>
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

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

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

You must be logged in to reply to this topic.