Picking values from a table and putting them in an HTML chart

Posted on

Question :

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 >


        <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" }

    @charset "UTF-8";
    @import url('https://fonts.googleapis.com/css?family=Bangers');
            margin-left: 150px;
            text-align: center;

        font-family: Arial,sans-serif;
        background-color: #2F4F4F;

        div#div_table {
        background-color: white;
        margin: -20px auto 0px auto;
        box-shadow: 0px 0px 10px #696969;
        padding: 10px;
        footer#rodape {
            margin-top: 20px;
            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;
        <div id="div_table">
        <h1 id="cabecalho"></h1>

        <table id="minha_tabela" width = "600" border = "2" cellspacing = "2" cellpadding = "5" ;

            <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>                    



    $resultado = mysql_query("select * from tabelaarduino");

            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>';


            <div id="chartContainer" style="height: 300px; width: 900px; margin-top: 20px;"></div>




Answer :

I recommend using this library, it is very complete and simple to use. In a few minutes, you’ll be able to generate very complete graphs.


Now, in order for you to get the data populated by PHP I recommend that you add classes to the table row. So you can get them via Javascript.

If I can make a recommendation, use the PDO class to perform database operations. The mysql functions that you are using in your code are obsolete, and may bring future problems to your application.


Good luck.


Leave a Reply

Your email address will not be published. Required fields are marked *