Hello guys! I have a huge problem with dynamic chart. All the part is working fine , except when i update my datapoints , i dont want to scroll the data and than shift it , but when i get a new data , i want the previous data to dissappear , or deleted and the new one comes to its place without scrolling or increasing the x axis values.Here is my code:
<script type="text/javascript">
var dataLength = 60;
window.onload = function() {
var dataPoints = [];
var chart;
$.getJSON("test.svg", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
chart = new CanvasJS.Chart("chartContainer",{
zoomEnabled: true,
panEnabled: true,
//animationEnabled: true,
exportEnabled: true,
title:{
text:"Dynamic-Data Renderelés Json formában DB-ből.",
fontColor: "rgba(100,149,237,.8)"
},
axisX: [{
gridColor: "lightgreen" ,
gridThickness: 1,
tickLength: 0,
lineThickness: 0,
labelFormatter: function(e) {
return "";
},
margin: -5
}, {
viewportMinimum: 0,
viewportMaximum: 100,
interval: 10,
stripLines: [{
value: 0,
label: "Trigger",
labelPlacement: "inside"
}]
}],
axisY:{
interval: 10,
gridColor: "lightgreen",
maximum: 150,
labelFormatter: function(e){
return e.value +"%";
},
},
data: [{
type: "line",
color: "red",//"rgba(0,135,147,.3)",
dataPoints : dataPoints,
}]
});
chart.render();
updateChart();
});
function updateChart() {
$.getJSON("test.svg", function(data) {
$.each(data, function(key, value){
dataPoints.push({x: value[0], y: parseInt(value[1])});
});
chart.render();
setTimeout(function(){updateChart()}, 1000);
});
}
}
</script>
This code now looks like this , when i get data , it displayes in the chart. Thats okay until i get a new one. When the new data comes , my old data remains at the same place and the new data is stacked to the old data and i can’t see sh***t. No matter what i do , shift or destroy or anything else , the old data is remains at on the chart.
.
