Chart auto update - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: auto, axis, beforeLoadComplete, category, categoryAxis, chart, data, jqxChart, refresh, update

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

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

Author

Chart auto update Posts

March 5, 2014 at 11:41 pm Chart auto update #50540

mh512

Participant

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>

March 6, 2014 at 6:51 am 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/

March 16, 2014 at 4:37 pm 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.

March 16, 2014 at 6:48 pm 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?

March 16, 2014 at 7:07 pm Chart auto update #51093

mh512

Participant

Problem solved.

I had neglected dataAdapter.dataBind();

March 17, 2014 at 1:52 am 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

March 17, 2014 at 6:52 am 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/

March 17, 2014 at 9:21 pm Chart auto update #51219

mh512

Participant

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

March 18, 2014 at 6:11 am 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/

Author

Posts

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

You must be logged in to reply to this topic.