I made a database and it is feeding a table. I would like to know what it would take to get such data from the table and plot it on a chart.
In the code below the graphic with fictitious values is already present.
<! DOCTYPE html >
<html>
<head>
<meta charset = "uts-8">
<title> Arduino e Mysql com Php </title>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script><script>window.onload=function(){varchart=newCanvasJS.Chart("chartContainer", {
animationEnabled: true,
title: {
text: "Consumo de energia ao longo do tempo"
},
axisX: {
minimum: new Date(2015, 01, 25),
maximum: new Date(2017, 02, 15),
valueFormatString: "MMM YY"
},
axisY: {
title: "Number of Sales",
titleFontColor: "#4F81BC",
suffix: "mn"
},
data: [{
indexLabelFontColor: "darkSlateGray",
name: "views",
type: "area",
yValueFormatString: "#,##0.0mn",
dataPoints: [
{ x: new Date(2015, 02, 1), y: 74.4, label: "Q1-2015" },
{ x: new Date(2015, 05, 1), y: 61.1, label: "Q2-2015" },
{ x: new Date(2015, 08, 1), y: 47.0, label: "Q3-2015" },
{ x: new Date(2015, 11, 1), y: 48.0, label: "Q4-2015" },
{ x: new Date(2016, 02, 1), y: 74.8, label: "Q1-2016" },
{ x: new Date(2016, 05, 1), y: 51.1, label: "Q2-2016" },
{ x: new Date(2016, 08, 1), y: 40.4, label: "Q3-2016" },
{ x: new Date(2016, 11, 1), y: 45.5, label: "Q4-2016" },
{ x: new Date(2017, 02, 1), y: 78.3, label: "Q1-2017", indexLabel: "Highest", markerColor: "red" }
]
}]
});
chart.render();
}
</script>
</head>
<style>
@charset "UTF-8";
@import url('https://fonts.googleapis.com/css?family=Bangers');
table{
margin-left: 150px;
}
h1{
text-align: center;
}
body{
font-family: Arial,sans-serif;
background-color: #2F4F4F;
color:#000000;
}
div#div_table {
width:900px;
background-color: white;
margin: -20px auto 0px auto;
box-shadow: 0px 0px 10px #696969;
padding: 10px;
}
footer#rodape {
margin-top: 20px;
clear:both;
border-top: 1px solid #606060;
}
footer#rodape p {
text-align: center;
}
a {
color: #528B8B;
text-decoration: none;
}
a:hover {
text-decoration: overline;
}
#cabecalho {
font-family: 'Bangers', cursive;
font-size: 40pt;
text-shadow: 1px 1px 1px #696969;
padding: 0px;
text-align: center;
}
</style>
<body>
<div id="div_table">
<h1 id="cabecalho"></h1>
<table id="minha_tabela" width = "600" border = "2" cellspacing = "2" cellpadding = "5" ;
<tr>
<td> <b> ID </td>
<td> <b> DATA e HORA </td>
<td> <b> CORRENTE (A) </td>
<td> <b> TENSÃO (V) </td>
<td> <b> CONSUMO (KWh) </td>
</tr>
<php
include("conecta.php");
$resultado = mysql_query("select * from tabelaarduino");
while($linha=mysql_fetch_array($resultado))
{
echo '<tr>';
echo '<td>' .$linha["id"].'</td>';
//echo '<td>' .$linha["evento"].'</td>';
echo '<td>' .date('d/m/Y - H:i:s',strtotime($linha["evento"])).'</td>';
echo '<td>' .$linha["sensor1"].'</td>';
echo '<td>' .$linha["sensor2"].'</td>';
echo '<td>' .$linha["sensor3"].'</td>';
echo '</tr>';
}
>
</table>
<div id="chartContainer" style="height: 300px; width: 900px; margin-top: 20px;"></div>
</div>
</body>
</html>