I'm trying to put in the x-axis the minute and second, but it only gets "mm: ss", I seto the date like this:
var time1 = new Date;
time1.setHours(0);
time1.setMinutes(0);
time1.setSeconds(0);
time1.setMilliseconds(0);
I get the values and update on the chart, even though it is in large format
I'm updating this way:
time1.setTime(time1.getTime() + updateInterval);
Where updateInterval = 3000 (Três segundos)
Even though the graph does not appear on the x-axis of the value and when you hover it shows a large value, for example:
1,525,233,690,000
Below is the code for how I am trying to insert into the chart
function chartTemperaratura(){
var time1 = new Date;
time1.setHours(0);
time1.setMinutes(0);
time1.setSeconds(0);
time1.setMilliseconds(0);
var dataPointsT1 = [];
var dataPointsT2 = [];
$.ajax({
url : '{{ route('medicao') }}',
type : 'get',
dataType : 'json',
success : function ( data ) {
var yValue5 = 0;
var yValue6 = 0;
var x = time1.getTime();
dataPointsT1.push({
x: x,
y: yValue5
});
dataPointsT2.push({
x: x,
y: yValue6
});
optionTemperatura = {
title: {
text: "Temperatura"
},
axisX: {
// title: "Atualização de dados a cada 3 segundos",
valueFormatString: "mm:ss"
},
axisY: {
// suffix: "Wh",
includeZero: true,
valueFormatString: "#", //try properties here
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
verticalAlign: "top",
fontSize: 14,
fontColor: "dimGrey",
itemclick: toggleDataSeries1
},
data: [{
type: "area",
xValueType: "",
yValueFormatString: "#",
xValueFormatString: "",
showInLegend: true,
color: '#d1ffce',
name: "Temperatura",
markerSize : 0,
dataPoints: dataPointsT1
},
{
type: "line",
xValueType: "time",
yValueFormatString: "#",
showInLegend: true,
name: "Humidade",
color: "#ffd757",
markerSize : 0,
dataPoints: dataPointsT2
},
]
};
var chartTemperatura = $("#chart-temperatura").CanvasJSChart(optionTemperatura);
function toggleDataSeries1(e) {
if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
e.dataSeries.visible = false;
}
else {
e.dataSeries.visible = true;
}
e.chart.render();
}
},
complete: function () {
setTimeout( function () {
updateChartTemperatura(3000, dataPointsT1, dataPointsT2, optionTemperatura, time1)
}, 3000)
}
}) ;
}
function updateChartTemperatura( updateInterval, dataPointsT1, dataPointsT2, options1, time1 ){
$.ajax({
url : '{{ route('medicao') }}',
type : 'get',
dataType : 'json',
success : function (data) {
var temp = data.temperatura / 100;
var temp2 = data.humidade / 100;
var yValue5 = parseInt( temp );
var yValue6 = parseInt( temp2 );
// for (var i = 0; i < count; i++) {
time1.setTime(time1.getTime() + updateInterval);
let x = time1.getTime();
console.log( 'Time temperatura: '+x );
console.log( "Tempo: "+time1.getTime() );
console.info( "Tempo1 Temperatura: Hora: "+time1.getHours()+":"+time.getMinutes()+":"+time1.getSeconds() );
dataPointsT1.push({
x: x,
y: yValue5
});
dataPointsT2.push({
x: x,
y: yValue6
});
options1.data[0].legendText = "Temperatura";
options1.data[1].legendText = "Humidade";
$("#chart-temperatura").CanvasJSChart().render();
}, complete : function () {
setTimeout(function () {
updateChartTemperatura( 3000, dataPointsT1, dataPointsT2, options1, time1 )
},3000)
}
});
}Below is the print of how it is getting
