two or more graphics in real time highcharts

Navigation
1

I'm looking for help with some graphics in real time with highcharts. There are more than two graphs on the same page. The error is that I get both points on the same graph. 

<!-- 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>
    
asked by lourdes bustamante 13.08.2018 в 18:50
source

1 answer

0

The problem is that you are writing about the functions because they have the same name. As you did with the containers and the variables, you must rename the functions. Something like this: 

            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;}
    
answered by 14.08.2018 в 00:34
Failed to return False or true Java How to insert value of an array with $ _SESSION in mysql?