<script>
   	var arrayGegevens = <?php echo json_encode($arrayLineChart1); ?>;
	//de data voor in de grafiek

	var data =
	{
	    labels: [],
	    datasets: [
	        {
	            label: "Machine activity",
	            fillColor: "rgba(151,187,205,0.2)",
	            strokeColor: "rgba(151,187,205,1)",
	            pointColor: "rgba(151,187,205,1)",
	            pointStrokeColor: "#fff",
	            pointHighlightFill: "#fff",
	            pointHighlightStroke: "rgba(151,187,205,1)",
	            data: []
	        }]
	};

	//ctx = plek waar de grafiek wordt geplaatst(canvasLineChart)
	var ctx = document.getElementById("canvasLineChart").getContext("2d");

	//De grafiek aanmaken en alles koppelen(plaats van grafiek + data koppelen)
	var myLineChart = new Chart(ctx).Line(data,
	{
    bezierCurve: false,
    animation: false,
    pointDot : false,
    pointHitDetectionRadius : -1,
   	showTooltips: false,
   	scaleOverride: true,
    scaleSteps: 1,
    scaleStepWidth: 1,
    scaleStartValue: 0
    });

    for(i = 0; i < arrayGegevens.length; i++)
    {
    	var TimeShort= arrayGegevens[i]['Time'].substr(11,5);

    	if (TimeShort.substr(4,1) == '5') //alle waardes die eindigen op 5 (bijv: 14:05) worden niet gedisplayed op de grafiek
    	{
			myLineChart.addData([arrayGegevens[i]['MachineStatus']], '');
		}
    	else
    	{
			myLineChart.addData([arrayGegevens[i]['MachineStatus']], TimeShort); // punt toevoegen
		}
	}
</script>