Dynamic chart using Highcharts with data from MySQL database

Question

I've tried to make dynamic chart with updated data from MySQL database based on this tutorial https://www.youtube.com/watch?v=9zxfoamp-xc , but nothing comes up on screen. None chart is generating.

datos.php

<?php
$pdo=new PDO("mysql:dbname=basededatoslocal;host=127.0.0.1","root","");

if(isset($_GET['Consultar']) && $_GET['Consultar']=='1'){
            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id DESC LIMIT 0,1");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);
            echo $json;
}
else
{
        // Buscar Todos los datos

            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id ASC");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);

            echo $json;
}


?>

json output

[{"x":"0","y":"2"},{"x":"5","y":"3"},{"x":"10","y":"3"},{"x":"15","y":"3"},{"x":"20","y":"4"},{"x":"30","y":"3"},{"x":"35","y":"5"},{"x":"40","y":"4"},{"x":"45","y":"3"}]

index.html

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-2.1.4.js" integrity="sha256-siFczlgw4jULnUICcdm9gjQPZkw/YPDqhQ9+nAOScE4=" crossorigin="anonymous"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
  <body>
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>   

      <script>
    $(function () {
    $(document).ready(function () {
        var ultimox;
        var ultimoy;

        $.ajax({
                url: "datos.php",
                type: 'get',
                success: function(DatosRecuperados) {
                $.each(DatosRecuperados, function(i,o){
                    if (o.x) {DatosRecuperados[i].x = parseInt(o.x);}
                    if (o.y) {DatosRecuperados[i].y = parseFloat(o.y);}
                });

                setx(DatosRecuperados[(DatosRecuperados.length)-1].x);
                sety(DatosRecuperados[(DatosRecuperados.length)-1].y);

                $('#container').highcharts({
                    chart:{
                            type: 'spline',
                            animation: Highcharts.svg,
                            marginRight: 10,
                            events: {load: function () {series = this.series[0];}}
                        },
                    title:{text: 'Live random data'},
                    xAxis:{tickPixelInterval: 150},
                    yAxis:{title: {text: 'Value'},
                        plotLines: [{value: 0,width: 1,color: '#808080'}]
                    },
                    tooltip: {
                        formatter: function () {
                            return '<b>' + this.series.name + '</b><br/>' +
                                Highcharts.numberFormat(this.x, 2) + '<br/>' +
                                Highcharts.numberFormat(this.y, 2);
                            }
                    },
                    legend: {
                        enabled: false
                    },
                    exporting: {
                        enabled: false
                    },
                    series: [{ name: 'Random data', data:DatosRecuperados}]
                });

        }});
    });
          setInterval(function () {
                $.get( "datos.php?Consultar=1", function( UltimosDatos ) {
                    var varlocalx=parseFloat(UltimosDatos[0].x);
                    var varlocaly=parseFloat(UltimosDatos[0].y);

                 if((getx()!=varlocalx)&&(gety()!=varlocaly)){

                    series.addPoint([varlocalx, varlocaly], true, true);
                    setx(varlocalx);
                    sety(varlocaly);
                }
           });}, 1000);

          function getx(){return ultimox;}
          function gety(){return ultimoy;}
          function setx(x){ultimox=x;}
          function sety(y){ultimoy=y;}

});    

      </script>
  </body>

I hope someone can help me on my way.

Thanks, Paul

The reason of that is type of values. It should be number not string like you have. Set the json_numeric_check flag in the json_encode() funciton. — Sebastian Bochan
– Sebastian Bochan, Commented May 25, 2016 at 11:01
Thanks for you answer. I've change the lines in datos.php for " $json=json_encode($results, JSON_NUMERIC_CHECK);", but nothng changed. — pkosmicki
– pkosmicki, Commented May 25, 2016 at 11:10

pkosmicki · Accepted Answer · 2016-05-25 23:01:59Z

Author of this tutorial helped me. I post only datos.php working code, because index.html from previous post was fine. Maybe it helps someone :)

<?php
error_reporting(0);
header('Content-Type: application/json');
$pdo=new PDO("mysql:dbname=basededatoslocal;host=127.0.0.1","root","");
switch($_GET['Consultar']){
        // Buscar Último Dato
        case 1:
            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id DESC LIMIT 0,1");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);
            echo $json;
        break; 
        // Buscar Todos los datos
        default:

            $statement=$pdo->prepare("SELECT valorx as x, valory as y FROM medidas ORDER BY id ASC");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);
            echo $json;
        break;
}
?>

Collectives™ on Stack Overflow

Dynamic chart using Highcharts with data from MySQL database

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related