Use the Time sent by server as the X axis

July 24, 2018 at 06:37:55
Specs: Windows 7, i5 2520M / 8 GB
This is my first time to write a dynamic chart HTML program that accept data from server. Accepted data (json format) include three items as below
{"RP":60,"GX":4,"Dtime":"2018-07-24 17:32:15.285"}
{"RP":60,"GX":7,"Dtime":"2018-07-24 17:32:16.289"}
{"RP":60,"GX":8,"Dtime":"2018-07-24 17:32:17.293"}
{"RP":50,"GX":5,"Dtime":"2018-07-24 17:32:18.297"}
{"RP":50,"GX":29,"Dtime":"2018-07-24 17:32:19.302"}
{"RP":50,"GX":68,"Dtime":"2018-07-24 17:32:20.306"}
{"RP":60,"GX":183,"Dtime":"2018-07-24 17:32:21.309"}
{"RP":60,"GX":195,"Dtime":"2018-07-24 17:32:22.313"}
{"RP":60,"GX":50,"Dtime":"2018-07-24 17:32:23.317"}

I draw two dynamic chart RP - Dtime, GX-Dtime. I want to use the Dtime as the X Axis, but failed with syntax error(Line 185). I change to get the current time. It worked. But the data X of the chart has a little gap(difference). How can I modify the HTML program, in order to match the X Axis data?

Please assist me, thanks!!!

the HTML program as below:
<!DOCTYPE HTML>
<html>
<head>
<script src="http://code.jquery.com/jquery-git.js"></script>
<script>
window.onload = function () {

var dps = []; // dataPoints


var chart = new CanvasJS.Chart("chartContainer", {
title :{
text: "Dynamic Chart",
fontSize: 20
},
subtitles:[
{
text: "NO10",
//Uncomment properties below to see how they behave
fontColor: "red",
fontSize: 12
},
{
text: "",
//Uncomment properties below to see how they behave
fontSize: 15
},


],
axisY: {
includeZero: false
},
data: [{
type: "line",
// xValueType: "dateTime",
dataPoints: dps
}]
});

var xVal = 0;
var yVal = 100;
var Acc_X = 0;
var Acc_Y = 0;
var Acc_Z = 0;
var updateInterval = 1000;
var dataLength = 30; // number of dataPoints visible at any point

var updateChart = function (count) {

count = count || 1;

for (var j = 0; j < count; j++) {
//yVal = yVal + Math.round(5 + Math.random() *(-5-5));
console.log("xVal=", xVal);
dps.push({
x: xVal,
y: yVal
});
xVal++;
}

//console.log("1 st ", dps.length);
if (dps.length > dataLength) {
dps.shift();
}

chart.render();
};


setInterval(function(){get_acc()}, updateInterval);


function get_acc() {

console.log('send http get');
var t1=Date.now();
$.ajax({
url: "http://127.0.0.1:3000/sensor",
method: "GET",
success: function(Jdata) {
console.log("receive", Jdata);
yVal=Jdata.RP;
// xVal=Jdata.Dtime;
// xValue1=time.getTime();
yValue1=Jdata.GX;
//console.log("receive=",Jdata.Acc_X, Jdata.Acc_Y, Jdata.Acc_Z);
//var item=Jdata.user[0]["username"]+":"+count;
updateChart();

},
error: function() {
alert("AJAX ERROR!!!");
}
});


}

$("#getdata").click( function() {
console.log('get data');
get_acc()

});
//
//Multiple Chart begin
//
var dataPoints1 = [];

var chart2 = new CanvasJS.Chart("chartContainer2", {
zoomEnabled: true,
title: {
text: "G-Sensor",
fontSize: 20
},
axisX: {
title: "Time"
},
axisY:{
// prefix: "$",
includeZero: false
},
toolTip: {
shared: true
},
legend: {
cursor:"pointer",
verticalAlign: "top",
fontSize: 12,
fontColor: "dimGrey",
itemclick : toggleDataSeries
},
data: [{
type: "line",
xValueType: "dateTime",
// yValueFormatString: "$####.00",
// xValueFormatString: "hh:mm:ss TT",
showInLegend: true,
name: "GX",
dataPoints: dataPoints1
},
]
});

function toggleDataSeries(e) {
console.log("toggleDataSeries");
if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
console.log("2 nd length", dataPoints1.length);

chart2.render();
}


var updateInterval2 = 500;
// initial value
//var xValue1 = Jdata.Dtime;
var yValue1 = 600;
var yValue2 = 605;
var yValue3 = 615;

var time = new Date;
console.log("time =", time);

function updateChart2(count) {
count = count || 1;
var deltaY1, deltaY2, deltaY3;
for (var i = 0; i < count; i++) {
time.setTime(time.getTime()+ updateInterval2);
// pushing the new values
dataPoints1.push({
x: time.getTime(),
// x: Jdata.Dtime,
y: yValue1
});


}

// updating legend text with updated with y Value
chart2.options.data[0].legendText = " X " + yValue1;

if (dataPoints1.length > dataLength) {
dataPoints1.shift();
}

chart2.render();
}

// generates first set of dataPoints
updateChart2(100);
setInterval(function(){updateChart2()}, updateInterval2);


//Multiple Chart end
}
</script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
<div id="chartContainer2" style="height: 300px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<button id='getdata'>Get data</button>
</body>
</html>


See More: Use the Time sent by server as the X axis

Reply ↓  Report •

#1
July 25, 2018 at 03:24:18
Gonna kill your hopes a little, for the better i guess...

This site does not really have that many java experts, I say this based upon the amount of questions & the depth of the answers regarding the programming language from the past few years.

(I mean like 8 or 9 questions in the last 2 years.)

All I'm saying is, you're problem will probably not be solved soon, if at all. Not here...

So I'm sorry to say, but you will be better off asking it on another site, like stackoverflow for example, or some other java specific programming forum,

i5-6600K[delid]@4.8GHz/4.3GHz@1.4v LLC=6 | 2x4GB Crucial-DDR4-2133CL15@14-14-14-30 1T 2700MHz@1.37v
MSI Armor RX 570 4GB@1395Mhz core@1.168v/1920MHz BiosModded


Reply ↓  Report •
Related Solutions


Ask Question