Basic Column Chart - CanvasJS
Basic Column Chart
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
JavaScript
<?php
// If the user is not logged in redirect to the login page...
if (!isset($_SESSION['loggedin'])) {
header('Location: index.html');
exit();
}
require ('conn.php');
if(isset($_POST['start_date'])){
$a=$_POST["start_date"];
}
if(isset($_POST['end_date'])){
$end=$_POST["end_date"];
}
$ab = "SELECT * FROM sensor_detail limit 1 ";
$as = $con->query($ab);
while($get = $as->fetch_array())
{
$datenew=$get['time'];
}
$exp2 = explode("T", $a);
$a5 = $exp2[0];
$a4 = $exp2[1];
$exp4 = explode(":", $a4);
$a10=$exp4[0];
$a11=$exp4[1];
$a6 = "{$a5} {$a4}";
$exp3 = explode("T", $end);
$a7 = $exp3[0];
$a8 = $exp3[1];
$a9 = "{$a7} {$a8}";
+
?>
<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
theme: "light2",
title:{
text: "Climate Monitoring Chart - IDF"
},
axisX:{
labelFormatter: function (e) {
return CanvasJS.formatDate( e.label, "DD/MM/YYYY HH:mm:ss");
},
crosshair: {
enabled: true,
snapToDataPoint: true
}
},
toolTip: {
contentFormatter: function (e) {
var content = " ";
for (var i = 0; i < e.entries.length; i++) {
content += "<span style='color:" + e.chart.selectedColorSet[i] + ";'>" + CanvasJS.formatDate(e.entries[i].dataPoint.label, "DD/MM/YYYY HH:mm:ss") + "</span>" + ": " + e.entries[i].dataPoint.y;
content += "<br/>";
}
return content;
}
},
axisY: {
title: "IDF",
includeZero: true,
crosshair: {
enabled: true
}
},
legend:{
cursor:"pointer",
verticalAlign: "bottom",
horizontalAlign: "left",
dockInsidePlotArea: true,
itemclick: toogleDataSeries
},
data:[ <?php
function random_color_part() {
return str_pad( dechex( mt_rand( 0, 255 ) ), 2, '0', STR_PAD_LEFT);
}
function random_color() {
return random_color_part() . random_color_part() . random_color_part();
}
$sql = "SELECT * FROM sensors_lists where linetick=1 ";
$data2=...