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?