3

busco ayuda con unas graficas en tiempo real con highcharts. Son mas de dos graficas en la misma pagina. El error es que me salen ambos puntos en la misma grafica.

<!-- 1grafico -->
<div class="container" id="container" name="1" style="min-width: 400px; height: 250px; margin: 0 auto">
    <div class="row">
        <div class="col-sm-4">
          <script>

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

                    $.ajax({
                        url: "conexion/conexion_temp.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);

                    Highcharts.chart('container', {
                        chart: {
                            type: 'spline',
                            animation: Highcharts.svg, // don't animate in old IE
                            marginRight: 10,
                            events: {
                                load: function () {
                                    series = this.series[0];
                                }
                            }
                        },
                        title: {
                            text: 'TEMPERATURA EN TIEMPO REAL'
                        },
                        xAxis: {
                            type: 'datetime',
                            tickPixelInterval: 200
                        },
                        yAxis: {
                            title: {
                                text: 'ESCALA'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                         plotOptions: {
                            spline: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: true
                            }
                        },
                        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: 'Datos En VIVO', data: DatosRecuperados}]
                    });

                }});
            });
                setInterval(function () {
                    $.get( "conexion/conexion_temp.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); //delay

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

            });
        </script>
        </div>
        <div class="col-sm-4">.col-sm-4</div>
    </div>
</div>

<!-- 2grafico -->
<div class="container" id="container1" name="2" style="min-width: 400px; height: 250px; margin: 0 auto">
    <div class="row">
        <div class="col-sm-4">
          <script>

            $(function (){
                $(document).ready(function () {
                    var ultimox1;
                    var ultimoy1;

                    $.ajax({
                        url: "conexion/conexion_hum.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);

                    Highcharts.chart('container1', {
                        chart: {
                            type: 'spline',
                            animation: Highcharts.svg, // don't animate in old IE
                            marginRight: 10,
                            events: {
                                load: function () {
                                    series = this.series[0];


                                }
                            }
                        },
                        title: {
                            text: 'HUMEDAD EN TIEMPO REAL'
                        },
                        xAxis: {
                            type: 'datetime',
                            tickPixelInterval: 200
                        },
                        yAxis: {
                            title: {
                                text: 'ESCALA'
                            },
                            plotLines: [{
                                value: 0,
                                width: 1,
                                color: '#808080'
                            }]
                        },
                         plotOptions: {
                            spline: {
                                dataLabels: {
                                    enabled: true
                                },
                                enableMouseTracking: true
                            }
                        },
                        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: 'Datos En VIVO', data: DatosRecuperados}]
                    });

                }});
            });
                setInterval(function () {
                    $.get( "conexion/conexion_hum.php?Consultar=1", function( UltimosDatos ) {
                        var varlocalx1=parseFloat(UltimosDatos[0].x);
                        var varlocaly1=parseFloat(UltimosDatos[0].y);

                        if((getx()!=varlocalx1)&&(gety()==varlocaly1)){

                            series.addPoint([varlocalx1, varlocaly1], true, true);
                            setx(varlocalx1);
                            sety(varlocaly1);
                        }
                    });}, 1000); //delay

                function getx(){return ultimox1;}
                function gety(){return ultimoy1;}
                function setx(x){ultimox1=x;}
                function sety(y){ultimoy1=y;}

            });
        </script>
        </div>
        <div class="col-sm-4">.col-sm-4</div>
    </div>
</div>
3
  • Te refieres a que los nuevos puntos te salen en la misma grafica?
    – alanfcm
    Commented el 13 ago. 2018 a las 17:16
  • si, se sobreponen en una sola grafica Commented el 13 ago. 2018 a las 20:52
  • Lo pudiste resolver? tengo el mismo problema Commented el 14 ago. 2020 a las 18:23

1 respuesta 1

0

El problema es que estas sobre escribiendo las funciones porque tienen el mismo nombre. Asi como hiciste con los containers y las variables, debes de renombrar las funciones. Algo asi:

            setInterval(function () {
                $.get( "conexion/conexion_hum.php?Consultar=1", function( UltimosDatos ) {
                    var varlocalx1=parseFloat(UltimosDatos[0].x);
                    var varlocaly1=parseFloat(UltimosDatos[0].y);

                    if((getx1()!=varlocalx1)&&(gety1()==varlocaly1)){

                        series.addPoint([varlocalx1, varlocaly1], true, true);
                        setx1(varlocalx1);
                        sety(varlocaly1);
                    }
                });
            }, 1000); //delay

            function getx1(){return ultimox1;}
            function gety1(){return ultimoy1;}
            function setx1(x){ultimox1=x;}
            function sety1(y){ultimoy1=y;}
5
  • probe cambiar el nombre de las funciones y no, sigue graficando ambos puntos en la misma grafica Commented el 15 ago. 2018 a las 15:33
  • En donde defines la variable series?
    – alanfcm
    Commented el 15 ago. 2018 a las 15:36
  • es una variable de highcharts que grafica, yo no la defino Commented el 15 ago. 2018 a las 16:04
  • Intenta cambiar esta linea: series = this.series[0]; por esta: series1 = this.series[0]; en la segunda grafica. Tambien cambia series por series1 en el codigo de mi respuesta.
    – alanfcm
    Commented el 15 ago. 2018 a las 16:09
  • ya lo intente, tampoco funciona. se pone en blanco la grafica, se pierde la escala y no me responde el css Commented el 15 ago. 2018 a las 16:12

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.