Untitled

<?php

$dataPoints = array(
  array(
    array("x" => 1451586600000, "y" => 96.709),
    array("x" => 1454265000000, "y" => 94.918),
    array("x" => 1456770600000, "y" => 95.152),
    array("x" => 1459449000000, "y" => 97.070),
    array("x" => 1462041000000, "y" => 97.305),
    array("x" => 1464719400000, "y" => 89.854),
    array("x" => 1467311400000, "y" => 88.158),
    array("x" => 1469989800000, "y" => 87.989),
    array("x" => 1472668200000, "y" => 86.366),
    array("x" => 1475260200000, "y" => 81.650),
    array("x" => 1477938600000, "y" => 85.789),
    array("x" => 1480530600000, "y" => 83.846),
    array("x" => 1483209000000, "y" => 84.927),
    array("x" => 1485887400000, "y" => 82.609),
    array("x" => 1488306600000, "y" => 81.428),
    array("x" => 1490985000000, "y" => 83.259),
    array("x" => 1493577000000, "y" => 83.153),
    array("x" => 1496255400000, "y" => 84.180),
    array("x" => 1498847400000, "y" => 84.840),
    array("x" => 1501525800000, "y" => 82.671),
    array("x" => 1504204200000, "y" => 87.496),
    array("x" => 1506796200000, "y" => 86.007),
    array("x" => 1509474600000, "y" => 87.233),
    array("x" => 1512066600000, "y"=> 86.276)
),
array(
 array("x"=> 1451586600000, "y" => 73.5555),
 array("x"=> 1454265000000, "y" => 74.1625),
 array("x"=> 1456770600000, "y" => 75.3980),
 array("x"=> 1459449000000, "y" => 76.0965),
 array("x"=> 1462041000000, "y" => 74.8165),
 array("x"=> 1464719400000, "y" => 74.9660),
 array("x"=> 1467311400000, "y" => 74.4805),
 array("x"=> 1469989800000, "y" => 74.7355),
 array("x"=> 1472668200000, "y" => 74.8155),
 array("x"=> 1475260200000, "y" => 73.2275),
 array("x"=> 1477938600000, "y" => 72.6315),
 array("x"=> 1480530600000, "y" => 71.4610),
 array("x"=> 1483209000000, "y" => 72.9025),
 array("x"=> 1485887400000, "y" => 70.5750),
 array("x"=> 1488306600000, "y" => 69.0955),
 array("x"=> 1490985000000, "y" => 70.0565),
 array("x"=> 1493577000000, "y" => 72.5320),
 array("x"=> 1496255400000, "y" => 73.8350),
 array("x"=> 1498847400000, "y" => 76.0255),
 array("x"=> 1501525800000, "y" => 76.1465),
 array("x"=> 1504204200000, "y" => 77.1570),
 array("x"=> 1506796200000, "y" => 75.4075),
 array("x"=> 1509474600000, "y" => 76.7690),
 array("x"=> 1512066600000, "y" => 76.5950)
),
array(
 array("x"=> 2451586600000, "y" => 73.5555),
 array("x"=> 2454265000000, "y" => 74.1625),
 array("x"=> 2456770600000, "y" => 75.3980),
 array("x"=> 2459449000000, "y" => 76.0965),
 array("x"=> 2462041000000, "y" => 74.8165),
 array("x"=> 2464719400000, "y" => 74.9660),
 array("x"=> 2467311400000, "y" => 74.4805),
 array("x"=> 2469989800000, "y" => 74.7355),
 array("x"=> 2472668200000, "y" => 74.8155),
 array("x"=> 2475260200000, "y" => 73.2275),
 array("x"=> 2477938600000, "y" => 72.6315),
 array("x"=> 2480530600000, "y" => 71.4610),
 array("x"=> 2483209000000, "y" => 72.9025),
 array("x"=> 2485887400000, "y" => 70.5750),
 array("x"=> 2488306600000, "y" => 69.0955),
 array("x"=> 2490985000000, "y" => 70.0565),
 array("x"=> 2493577000000, "y" => 72.5320),
 array("x"=> 2496255400000, "y" => 73.8350),
 array("x"=> 2498847400000, "y" => 76.0255),
 array("x"=> 2501525800000, "y" => 76.1465),
 array("x"=> 2504204200000, "y" => 77.1570),
 array("x"=> 2506796200000, "y" => 75.4075),
 array("x"=> 2509474600000, "y" => 76.7690),
 array("x"=> 2512066600000, "y" => 76.5950)
));

$names = array("EUR","PLN","INDR");
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
    animationEnabled: true,
    title:{
        text: "Comparison of Exchange Rates"
    },
    subtitles: [{
        text: "GBP & EUR to INR",
        fontSize: 18
    }],
    axisY: {
        includeZero: false,
        prefix: "₹"
    },
    legend:{
        cursor: "pointer",
        itemclick: toggleDataSeries
    },
    toolTip: {
        shared: true
    },
    data: [
    ]
});

<?php for($i = 0; $i < count($dataPoints);$i++):?>
var newSeries =   {
    type: "area",
    name: "<?php echo $names[$i]?>",
    showInLegend: "true",
    xValueType: "dateTime",
    xValueFormatString: "MMM YYYY",
    yValueFormatString: "₹#,##0.##",
    dataPoints: <?php echo json_encode($dataPoints[$i]); ?>
  };
  chart.options.data.push(newSeries);
<?php endfor ?>

chart.render();

function toggleDataSeries(e){
    if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        e.dataSeries.visible = false;
    }
    else{
        e.dataSeries.visible = true;
    }
    chart.render();
}

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>