Skip to main content
2 de 2
se añadieron 6791 caracteres en el cuerpo

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);
            }
        });

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);
            }
        }); });