php json realtime line chart

[Kim Do SungParticipant]

Hello.
I am now making line graphs with jsp.

I want to know how to update this in seconds.

Below is the source.

But It will not move to the source below.
What did you do wrong?

			$(document).ready(function () {
				// Create jqxDocking
				$("#docking").jqxDocking({width:3000, theme: 'shinyblack'});

			});
			var source =
				{
					datatype: "json",
					datafields: [
						{ name: "iudatetime"},
						{ name: "install"},
						{ name: "uninstall"}
					],
					url: "http://127.0.0.1/AdminChartAPI/realtime_install_chart_data?param_mac=02:00:00:00:00:00&param_apikey=123456"
				};
			var dataAdapter = new $.jqx.dataAdapter(
				source,
				{
					autoBind: true,
					loadComplete: function(records) {

					},
					loadError: function (xhr, status, error) {
						alert("Error loading '" + source.url + "' : " + error);
					},
					beforeLoadComplete: function (records) {

					}
				}
			);

			/*var data = [
				{Label: 'a', Value1: '100', Value2: '94'},
				{Label: 'b', Value1: '30', Value2: '50'},
				{Label: 'c', Value1: '123', Value2: '140'},
				{Label: 'd', Value1: '-12', Value2: '32'},
				{Label: 'e', Value1: '-29', Value2: '45'},
				{Label: 'f', Value1: '75', Value2: '14'}];
			var dataAdapter = new $.jqx.dataAdapter({
				localdata: data,
				datafields: [
					{name: "Label", type: "string"},
					{name: "Value1", type: "number"},
					{name: "Value2", type: "number"}
				]
			});*/

			JQXElements.settings["chartSettings"] = {
				source: dataAdapter,
				title: "Install & Uninstall",
				description: "",
				padding: {
					left: 5,
					top: 5,
					right: 5,
					bottom: 5
				},
				titlePadding: {
					left: 5,
					top: 5,
					right: 5,
					bottom: 5
				},
				enableAnimations: true,
				animationDuration: 1000,
				showLegend: true,
				xAxis: {
					type: "date",
					baseUnit: "second",
					dataField: "iudatetime",
					valuesOnTicks: false,
					labels: { angle: -45, offset: { x: -17, y: 0}}
				},
				seriesGroups: [
					{
						type: "line",
						alignEndPointsWithIntervals: true,
						valueAxis: {
							valueOnTicks: true,
							unitInterval: 10
						},
						series: [
							{
								dataField: "install",
							},
							{
								dataField: "uninstall"
							}
						]
					}
				]
			};

			window.onload = function () {
				var myChart = document.querySelector("jqx-chart");
				var ttimer = setInterval(function () {
					dataAdapter = new $.jqx.dataAdapter(
						source,
						{
							autoBind: true,
							loadComplete: function(records) {
								myChart.update();
							},
							loadError: function (xhr, status, error) {
								alert("Error loading '" + source.url + "' : " + error);
							},
							beforeLoadComplete: function (records) {

							}
						}
					);
				}, 1000);

[Kim Do SungParticipant]

no update ㅠㅠ

		
	$(document).ready(function () {
				$("#jqxMenu").jqxMenu({ width: '120', mode: 'vertical', theme: 'summer'});
				// Create jqxDocking
				$("#docking").jqxDocking({width:3000, theme: 'shinyblack'});

				//Line Chart
				var source =
					{
						datatype: "json",
						datafields: [
							{ name: "iudatetime"},
							{ name: "install"},
							{ name: "uninstall"}
						],
						url: "http://127.0.0.1/AdminChartAPI/realtime_install_chart_data?param_mac=02:00:00:00:00:00&param_apikey=123456"
					};
				var dataAdapter = new $.jqx.dataAdapter(
					source,
					{
						async: false,
						autoBind: true,
						loadComplete: function(records) {

						},
						loadError: function (xhr, status, error) {
							alert("Error loading '" + source.url + "' : " + error);
						},
						beforeLoadComplete: function (records) {

						}
					}
				);

				var settings = {
					source: dataAdapter,
					title: "Install & Uninstall",
					description: "",
					enableAnimations: true,
					showLegend: true,
					padding: {
						left: 5,
						top: 5,
						right: 5,
						bottom: 5
					},
					titlePadding: {
						left: 5,
						top: 5,
						right: 5,
						bottom: 5
					},
					enableAnimations: false,
					showLegend: true,
					xAxis: {
						type: "date",
						baseUnit: "second",
						dataField: "iudatetime",
						valuesOnTicks: false,
						labels: { angle: -45, offset: { x: -17, y: 0}}
					},
					seriesGroups: [
						{
							type: "line",
							alignEndPointsWithIntervals: true,
							valueAxis: {
								valueOnTicks: true,
								unitInterval: 10
							},
							series: [
								{
									dataField: "install",
								},
								{
									dataField: "uninstall"
								}
							]
						}
					]
				};

				$('#chartContainer').jqxChart(settings);

				var ttimer = setInterval(function () {
					alert("aaaa");
					$("#chartContainer").jqxChart('update');

				}, 3000);

			});

[MartinParticipant]

Hello Kim Do Sung,

Can you try creating a new instance of the dataAdapter and set it to the chart’s source in the setInterval function, before calling the update method.

var ttimer = setInterval(function () {
        dataAdapter = new $.jqx.dataAdapter(source);              
        $("#chartContainer").jqxChart({ source: dataAdapter });
	$("#chartContainer").jqxChart('update');

}, 3000);

Best Regards,
Martin

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

[Kim Do SungParticipant]

Thank you. You succeeded with the Source. However, the screen is not natural during the update. Isn’t it possible to move as flexible as live on the Demo Source when it’s quickly refreshed?

[MartinParticipant]

Hello Kim Do Sung,

Can you clarify what do you mean that the screen is not natural?

Is this behavior better if you remove this line: $('#chartContainer').jqxChart('update');

var ttimer = setInterval(function () {
        dataAdapter = new $.jqx.dataAdapter(source);              
        $("#chartContainer").jqxChart({ source: dataAdapter });
}, 3000);

Best Regards,
Martin

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

[Author]

Posts