0

Estoy realizando una grafica en tiempo real utilizando la librería de highcharts solo que necesito que en el eje de las y aparesca la obtencion de datos de una consulta a una base de datos para que se visualice en dicha gráfica les muestro el código que tengo

<?php
error_reporting(0);
header('Content-Type: application/json');
$pdo=new PDO("mysql:dbname=banorte;host=127.0.0.1","root","adminroot");
switch($_GET['Consultar']){
        // Buscar Último Dato
        case 1:
            $statement=$pdo->prepare("SELECT valory as y FROM llamadas ORDER BY id ASC 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 valory as y FROM llamadas ORDER BY id ASC");
            $statement->execute();
            $results=$statement->fetchAll(PDO::FETCH_ASSOC);
            $json=json_encode($results);
            echo $json;
        break;

}
?>

Y este es el javascript para utilizar la librería

<!DOCTYPE html>
<html lang="es">
<head>
   <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
   <script src="https://code.highcharts.com/highcharts.js"></script>
   <script src="https://code.highcharts.com/modules/exporting.js"></script>
   <script src="https://code.highcharts.com/modules/export-data.js"></script>
    <meta charset="UTF-8">
    <title>prueba</title>
    <script type="text/javascript">
    var chart;
    $(document).ready(function() {


Highcharts.setOptions({
    global: {
        useUTC: false
    }
});

Highcharts.chart('container', {
    chart: {
        type: 'spline',
        animation: Highcharts.svg, // don't animate in old IE
        marginRight: 10,
        events: {
            load: function () {

                // set up the updating of the chart each second
                var series = this.series[0];
                setInterval(function () {
                    var x = (new Date()).getTime(), // current time
                        y = math.random()
                    series.addPoint([x, y], true, true);
                }, 1000);
            }
        }
    },
    title: {
        text: 'Live random data'
    },
    xAxis: {
        type: 'datetime',
        tickPixelInterval: 150
    },
    yAxis: {
        title: {
            text: 'Value'
        },
        plotLines: [{
            value: 0,
            width: 1,
            color: '#808080'
        }]
    },
    tooltip: {
        formatter: function () {
            return '<b>' + this.series.name + '</b><br/>' +
                Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                Highcharts.numberFormat(this.y, 2);
        }
    },
    legend: {
        enabled: false
    },
    exporting: {
        enabled: false
    },
    series: [{
        name: 'Random data',
        data: (function () {
            // generate an array of random data
            var data = [],
                time = (new Date()).getTime(),
                i;

            for (i = -19; i <= 0; i += 1) {
                data.push({
                    x: time + i * 1000,
                    y: math.random()
                });
            }
            return data;
        }())
    }]
});     
</script>
</head>
<body>
    <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
1
  • en el caso del eje de las x me queda perfecto para visualizar la hora Commented el 7 may. 2018 a las 18:34

1 respuesta 1

0

puedes acomodar el JSON en forma que puedas consultar los datos facilmente.

Crea un foreach en donde separes los datos y concatenes de esta forma:

{"x":{1,2,3,4,5},"y":{5,6,7,8,9}}
2
  • ahi donde surge mi duda como es que realiza esa petición por javascript para traer esos datos del json y grafique conforme al tiempo! Commented el 8 may. 2018 a las 19:06
  • setTimeout(function(){ var data = tuFuncion(); data = _events.replace(/&quot;/g, '"'); data = JSON.parse(_events); chart: data, }, 3000); Commented el 3 ene. 2019 a las 19:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.