Skip to main content
se añadieron 6791 caracteres en el cuerpo
Origen Enlace

Demo.js

demo = {


initDocChart: function() {
    chartColor = "#FFFFFF";

    // General configuration for the charts with Line gradientStroke
    gradientChartOptionsConfiguration = {
        maintainAspectRatio: false,
        exportEnabled: true,
        legend: {
            display: false
        },
        tooltips: {
            bodySpacing: 4,
            mode: "nearest",
            intersect: 0,
            position: "nearest",
            xPadding: 10,
            yPadding: 10,
            caretPadding: 10
        },
        responsive: true,
        scales: {
            yAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }]
        },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 15,
                bottom: 15
            }
        }
    };
},

initDashboardPageCharts: function() {

    gradientChartOptionsConfigurationWithTooltipPurple = {
        maintainAspectRatio: false,
        legend: {
            display: false
        },

        tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            bodySpacing: 4,
            xPadding: 12,
            mode: "nearest",
            intersect: 0,
            position: "nearest"
        },
        responsive: true,
        scales: {
            yAxes: [{
                barPercentage: 1.6,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(29,140,248,0.0)',
                    zeroLineColor: "transparent",
                },
                ticks: {
                    suggestedMin: 60,
                    suggestedMax: 125,
                    padding: 20,
                    fontColor: "#9a9a9a"
                }
            }],

            xAxes: [{
                barPercentage: 1.6,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(225,78,202,0.1)',
                    zeroLineColor: "transparent",
                },
                ticks: {
                    padding: 20,
                    fontColor: "#9a9a9a"
                }
            }]
        }
    };

    //****************************************************
    //* aqui van los datos para la grafica del dashboard *
    //***************************************************
        
        function recogerDatos() {
           
            const xhttp = new XMLHttpRequest();

            xhttp.open('GET','assets/js/mqtt/ajax.php',true);

            xhttp.send();

            xhttp.onreadystatechange = function(){
                
                if (this.readyState == 4 && this.status == 200) {

                    console.log(this.responseText);
                    let datos = JSON.parse(this.responseText);
                    let datox = datos.hora;
                    let datoy = datos.ppm;
                    console.log(`datox = ${datox} y datoy = ${datoy}`);

                }
            
            }
        }
        window.setTimeout(recogerDatos, 10000);
    
    var datoy=[];
    var datox=[];
   //setInterval(function() {
        for(var i=0;i<=120;i++){
            datoy[i]= Math.floor((Math.random() * (1200 - 300 + 1)) + 300);
            datox[i]= i;
        }
    //console.log(datoy);
    //}, 3000);
    

    var ctx = document.getElementById("chartLinePurple").getContext("2d");

    var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);

    gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
    gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
    gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors

    var data = {
        labels: datox,
        datasets: [{
            label: "Data",
            fill: true,
            backgroundColor: gradientStroke,
            borderColor: '#d048b6',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: '#d048b6',
            pointBorderColor: 'rgba(255,255,255,0)',
            pointHoverBackgroundColor: '#d048b6',
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: datoy,
        }]
    };

    var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: gradientChartOptionsConfigurationWithTooltipPurple
    });
},

};

Luego la llamo desde funciones.js dependiendo que selecciono

$("select[name=dispositivo]").change(function() {
        seleccion = $(this).children("option:selected").val();
        console.log("Has seleccionado - " + seleccion);
        //pasamos los datos a ajax para mostrar la grafica
        action = "grafica";
        $.ajax({
            url: 'assets/js/mqtt/ajax.php',
            type: 'GET',
            async: true,
            data:{action:action,seleccion:seleccion},
            success:function(response){
                //console.log(response);
            },
            error:function(error){
                console.log(error);
            }
        }); });

Demo.js

demo = {


initDocChart: function() {
    chartColor = "#FFFFFF";

    // General configuration for the charts with Line gradientStroke
    gradientChartOptionsConfiguration = {
        maintainAspectRatio: false,
        exportEnabled: true,
        legend: {
            display: false
        },
        tooltips: {
            bodySpacing: 4,
            mode: "nearest",
            intersect: 0,
            position: "nearest",
            xPadding: 10,
            yPadding: 10,
            caretPadding: 10
        },
        responsive: true,
        scales: {
            yAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }],
            xAxes: [{
                display: 0,
                gridLines: 0,
                ticks: {
                    display: false
                },
                gridLines: {
                    zeroLineColor: "transparent",
                    drawTicks: false,
                    display: false,
                    drawBorder: false
                }
            }]
        },
        layout: {
            padding: {
                left: 0,
                right: 0,
                top: 15,
                bottom: 15
            }
        }
    };
},

initDashboardPageCharts: function() {

    gradientChartOptionsConfigurationWithTooltipPurple = {
        maintainAspectRatio: false,
        legend: {
            display: false
        },

        tooltips: {
            backgroundColor: '#f5f5f5',
            titleFontColor: '#333',
            bodyFontColor: '#666',
            bodySpacing: 4,
            xPadding: 12,
            mode: "nearest",
            intersect: 0,
            position: "nearest"
        },
        responsive: true,
        scales: {
            yAxes: [{
                barPercentage: 1.6,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(29,140,248,0.0)',
                    zeroLineColor: "transparent",
                },
                ticks: {
                    suggestedMin: 60,
                    suggestedMax: 125,
                    padding: 20,
                    fontColor: "#9a9a9a"
                }
            }],

            xAxes: [{
                barPercentage: 1.6,
                gridLines: {
                    drawBorder: false,
                    color: 'rgba(225,78,202,0.1)',
                    zeroLineColor: "transparent",
                },
                ticks: {
                    padding: 20,
                    fontColor: "#9a9a9a"
                }
            }]
        }
    };

    //****************************************************
    //* aqui van los datos para la grafica del dashboard *
    //***************************************************
        
        function recogerDatos() {
           
            const xhttp = new XMLHttpRequest();

            xhttp.open('GET','assets/js/mqtt/ajax.php',true);

            xhttp.send();

            xhttp.onreadystatechange = function(){
                
                if (this.readyState == 4 && this.status == 200) {

                    console.log(this.responseText);
                    let datos = JSON.parse(this.responseText);
                    let datox = datos.hora;
                    let datoy = datos.ppm;
                    console.log(`datox = ${datox} y datoy = ${datoy}`);

                }
            
            }
        }
        window.setTimeout(recogerDatos, 10000);
    
    var datoy=[];
    var datox=[];
   //setInterval(function() {
        for(var i=0;i<=120;i++){
            datoy[i]= Math.floor((Math.random() * (1200 - 300 + 1)) + 300);
            datox[i]= i;
        }
    //console.log(datoy);
    //}, 3000);
    

    var ctx = document.getElementById("chartLinePurple").getContext("2d");

    var gradientStroke = ctx.createLinearGradient(0, 230, 0, 50);

    gradientStroke.addColorStop(1, 'rgba(72,72,176,0.2)');
    gradientStroke.addColorStop(0.2, 'rgba(72,72,176,0.0)');
    gradientStroke.addColorStop(0, 'rgba(119,52,169,0)'); //purple colors

    var data = {
        labels: datox,
        datasets: [{
            label: "Data",
            fill: true,
            backgroundColor: gradientStroke,
            borderColor: '#d048b6',
            borderWidth: 2,
            borderDash: [],
            borderDashOffset: 0.0,
            pointBackgroundColor: '#d048b6',
            pointBorderColor: 'rgba(255,255,255,0)',
            pointHoverBackgroundColor: '#d048b6',
            pointBorderWidth: 20,
            pointHoverRadius: 4,
            pointHoverBorderWidth: 15,
            pointRadius: 4,
            data: datoy,
        }]
    };

    var myChart = new Chart(ctx, {
        type: 'line',
        data: data,
        options: gradientChartOptionsConfigurationWithTooltipPurple
    });
},

};

Luego la llamo desde funciones.js dependiendo que selecciono

$("select[name=dispositivo]").change(function() {
        seleccion = $(this).children("option:selected").val();
        console.log("Has seleccionado - " + seleccion);
        //pasamos los datos a ajax para mostrar la grafica
        action = "grafica";
        $.ajax({
            url: 'assets/js/mqtt/ajax.php',
            type: 'GET',
            async: true,
            data:{action:action,seleccion:seleccion},
            success:function(response){
                //console.log(response);
            },
            error:function(error){
                console.log(error);
            }
        }); });
Origen Enlace

No no realice ningun cambio es mas este es mi codigo en aja por el cual le paso la variable al php para realizar una consulta en mysql y cuando realizo el console.log(response) dentro del si todo salio bien en la salida veo todos los resultados. @A. Cedano

 action = "grafica";
        $.ajax({
            url: 'assets/js/mqtt/ajax.php',
            type: 'GET',
            async: true,
            data:{action:action,seleccion:seleccion},
            success:function(response){
                //console.log(response);
            },
            error:function(error){
                console.log(error);
            }
        });