graph.php

gistfile1.txt

<div id="chartContainer1" style="height: 500px; width: 100%;"></div>
<br/><br/><br/><br/>
<div id="chartContainer2" style="height: 500px; width: 100%;"></div>
<br/><br/><br/><br/>
<div id="chartContainer3" style="height: 500px; width: 100%;"></div>
 <script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
 <script>
function chart(chartId = "chartContainer1", _data, nameChart) {
	console.log(_data)
points = [];
	_data.forEach(function(entry) {
		new_arr = [];
	entry['chart'].forEach(function(i) {
		new_arr.push({
	label : i['x'],
	y : parseInt(i['y'])
	});
points.push({
	type: "spline",
		name: entry['index'],
	dataPoints : new_arr
});
});
});
console.log(points)
var chart = new CanvasJS.Chart(chartId, {
	theme:"light2",
	animationEnabled: true,
	title:{
		text: nameChart
	},
	axisY :{
		includeZero: false,
		title: "Number of Viewers",
	},
	legend:{
		cursor:"pointer",
		itemclick : toggleDataSeries
	},
	data:points
});
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>
<?php
//select individual_sensor.Sensor_Index from individual_sensor where individual_sensor.Sensor_ID = 'SEN0169'
$sensor_arr = ['SEN0169', 'SEN0114', 'SEN0193'];
$response = array();
// include db_connect
$filepath = realpath(dirname(__FILE__));
require_once $filepath . "/db_connect.php";

// establish connection to db
$db = new DB_CONNECT();

foreach ($sensor_arr as $item) {
    // SQL query to insert data to table
    if ($db->connect()) {
        $query_str = "select individual_sensor.Sensor_Index from individual_sensor where individual_sensor.Sensor_ID = '" . $item . "'";
        $result = $db->query($query_str);

        while ($row = $result->fetch_assoc()) {
            $query_str = "select distinct data.Time as x, data.Value as y from individual_sensor as i_s, data
				where i_s.Sensor_ID = '" . $item . "' and data.Sensor_Index = " . $row["Sensor_Index"] . " and i_s.Sensor_Index = data.Sensor_Index
				order by i_s.Sensor_Index asc";
            $result2 = $db->query($query_str);
            $new_array = [];
            while ($row2 = $result2->fetch_assoc()) {
                $n = $row2['y'];
                $new_array[] = $row2;
            }
            $chart[] = ['index' => $row["Sensor_Index"], 'chart' => $new_array];
        }
        if ($item == 'SEN0169') {
            echo '<script type="text/javascript">
                            chart("chartContainer1", ' . json_encode($chart) . ', "SEN0169");
					</script>';
        } else if ($item == 'SEN0114') {
            echo '<script type="text/javascript">
								chart("chartContainer2", ' . json_encode($chart) . ',"SEN0114");
						</script>';
        } else if ($item == 'SEN0193') {
            echo '<script type="text/javascript">
									chart("chartContainer3", ' . json_encode($chart) . ', "SEN0193");
							</script>';
        }
    }
}
$db->close();

?>