Take values from a table and place in an HTML graph

Asked

Viewed 1,221 times

4

I made a database and this is feeding a table. I wonder how it would be to take such table data and plot on a graph.

In the code below is already the graph with fictitious values.

<! 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 () {

        var chart = new CanvasJS.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>
php javascript html canvas graphic

  • If possible post the structure of your table. These values of data, y and indexLabel and markerColor are defined in the table ?

  • I want to get the date and the y you have on the table.

1 answer

0

I recommend that you use this library, it is very complete and simple to use. In a few minutes you will be able to generate very complete graphics.

http://www.chartjs.org

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

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

http://php.net/manual/en/book.pdo.php

Good luck.

Browser other questions tagged php javascript html canvas graphic

You are not signed in. Login or sign up in order to post.