Chart Update

[SchmakusParticipant]

Hi!
I’m new here. I dont’t understand the live update function. My chart should only update, if there ist new JSON data. Now, the complete Script is loading.
Here is my Code:

function displayDUTproInsert() {
	function getExportServer() {
		return 'http://www.jqwidgets.com/export_server/export.php';
	}
    var source =
	{
		 datatype: "json",
		 datafields: [
			 { name: 'Anzahl', },
			 { name: 'Ort'}
			 
		],
		url: 'script/charts.php?select=2'
	};
	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: "Prüflinge in den jeweiligen Eingangsregalen",
		description: "",
		enableAnimations: true,
		showLegend: true,
		showBorderLine: false,
		legendLayout: { left: 480, top: 160, width: 300, height: 200, flow: 'vertical' },
		padding: { left: 5, top: 5, right: 5, bottom: 5 },
		titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
		source: dataAdapter,
		colorScheme: 'scheme03',
		seriesGroups:
			[
				{
					type: 'pie',
					showLabels: true,
					series:
						[
							{ 
								offsetX : 230,
								dataField: 'Anzahl',
								displayText: 'Ort',
								labelRadius: 170,
								initialAngle: 15,
								radius: 145,
								centerOffset: 0,
								formatFunction: function (value) {
									if (isNaN(value))
										return value;
									return parseFloat(value) + ' Prüflinge';
								},
							}
						]
				}
			]
	};
	$('#DUTproInsert').jqxChart(settings);
	$("#jpegButton1").jqxButton({});
	$("#pngButton1").jqxButton({});
	$("#jpegButton1").click(function () {
		// call the export server to create a JPEG image
		$('#DUTproInsert').jqxChart('saveAsJPEG', 'DUTproOrt.jpeg', getExportServer());
	});
	$("#pngButton1").click(function () {
		// call the export server to create a PNG image
		$('#DUTproInsert').jqxChart('saveAsPNG', 'DUTproOrt.png', getExportServer());
	});
	// auto update timer
	var ttimer = setInterval(function () {
		$('#DUTproInsert').jqxChart('update');
	}, 3000);
};
	
	// Display Charts
	displayDUTproInsert();

[DimitarParticipant]

Hi Schmakus,

Unfortunately, the widget does not “know” if there are any changes to the data source, so a request has to be made to retrieve the data, whether it is changed or not. If there are no changes, the chart should not show any visual indication.

Best Regards,
Dimitar

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

[SchmakusParticipant]

Hi, thank you for your fast answer!
Could you help me, how i can check the data it it’s changed or not?

[DimitarParticipant]

Hi Schmakus,

Here is a suggestion: when there is an update server-side, you can set a flag variable to true. Client-side, in the setInterval function, this variable can be retrieved via an Ajax call and checked. If it is true, you can do the chart update and make a new Ajax call, setting the variable to false again.

Best Regards,
Dimitar

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

[Author]

Posts