Home › Forums › Chart Support › 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
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?