Home forums Using CanvasJS I want to make a 100% stacked chart where JSON data can run Reply To: I want to make a 100% stacked chart where JSON data can run

#22028

Hemel619619
Member

HTML:
<div id=”chartContainer” style=”height: 300px; width: 150%;”></div>

JAVASCRIPT:
var dps1 = [], dps2 = [], dps3 = [];
var chart = new CanvasJS.Chart(“chartContainer”,{
title:{
text: “Y Values based on Frequency of Date”
},
axisX:{
title: “Date”
},
axisY:{
title: “Frequecy of dates”
},
data: [
{
type: “stackedArea100”,
name: “STANDSTILL”,
showInLegend: “true”,
yValueFormatString: “#,##0.##\”%\””,
dataPoints: dps1
},
{
type: “stackedArea100”,
name: “ON FOOT”,
showInLegend: “true”,
yValueFormatString: “#,##0.##\”%\””,
dataPoints: dps2
},
{
type: “stackedArea100”,
name: “ON VEHICLE”,
showInLegend: “true”,
yValueFormatString: “#,##0.##\”%\””,
dataPoints: dps3
}
]
});

getData();
chart.render();

function getData() {
$.getJSON(“https://api.myjson.com/bins/a98dm”, function(data) {

for(var i = 0; i < data.length; i++){
dps1.push({
label: data[i].label,
y: data[i].y1
});
dps2.push({
label: data[i].label,
y: data[i].y2
});
dps3.push({
label: data[i].label,
y: data[i].y3
});
}
});
}

setInterval(function(){
getData();
chart.render();
}, 5000);

I WANT TO COMBINE THIS 2 codes into a simple HTML File. How can I do that? Please write the whole code in the post after edition please. ALso how can i make it dynamic?