I wrote a code to draw a graph on button click by accessing data from internet(alphavantage). On the first click it works correctly, but when i click again on the same button, graph is not plotting correctly. The graph look like the start and end points got connected by a line. If i refresh the page and click again, no problem. But if clicked twice, from the second time, graph not plotting correctly.
The onclick functions is as follows:
function calldata(data,sname)
{
$.each(data, function (key, value) {
if (key === ‘Monthly Time Series’) {
$.each(value, function (key1, value1) {
//
// console.log(“data key”, key1)
// console.log(“data”, value1)
var str = key1.split(‘-‘);
// console.log(“data”, str[1])
dataPoints.push({x: new Date(parseInt(str[0]), parseInt(str[1])-1, parseInt(str[2])), y: parseFloat(value1[“4. close”])});
});
}
});
var chart = new CanvasJS.Chart(“chartContainer”, {
title: {
text: “Graph of”+sname
},
data: [{
type: “area”,
dataPoints: dataPoints,
}]
});
chart.render();
}
The passed parameter “data” is an array containing dates and values, “sname” is s string.
Please solve this as soon as possible.
.
