1

estoy realizando un código donde almaceno datos en tiempo real a una base de datos en MySQL, y los muestro en unas graficas a través de una grafica de Charts.js, pero cada vez que quero ver como se modifica la grafica tengo que actualizar la pagina web, y lo que yo necesito es que automáticamente se vaya actualizando al ingresar los valores a la base de datos. un detalle que tengo es que cuándo ya llevan muchos datos almacenados y actualizo la pagina web se tarda bastante en volver a cargar las graficas, por eso me gastaría que se muestreara en tiempo real. mi script es el siguiente.

**var ctx= document.getElementById('myChart').getContext("2d");
    /////Creacion de un grafico/////////////
    var myChart= new Chart(ctx,{
        type: "line",
        data:{
            //labels:['col1','col2','col3'],
            datasets:[{
                    label: 'ANI INSTANTANÉO',
                    //data:[10,9,15],
                    backgroundColor: ['#ffff00'],
                    borderColor: ['#ffff00'],
                    //borderColor: none,
                    borderWidth:1,
                    tension: 0.7,
                    pointRadius: .1,
                    pointHoverRadius: 5,
                    pointHitRadius: 30,
                    pointBorderWidth: 2,      
            },
            {   label: 'ANI MEDIO',
                backgroundColor: ['#ff8000'],
                    borderColor: ['#ff8000'],
                    borderWidth:1,
                    tension: 0.7,
                    pointRadius: .1,
                    pointHoverRadius: 5,
                    pointHitRadius: 30,
                    pointBorderWidth: 2,
        }]
        },
        options:{
            scales:{
                
                y: {
                suggestedMin: 0,
                suggestedMax: 100
            }
            }
        }
    })
    ////////Fin de grafico /////////
    var ctx= document.getElementById('energia').getContext("2d");
    var energia= new Chart(ctx,{
        type: "line",
        data:{
            //labels:['col1','col2','col3'],
            datasets:[{
                    label: 'ENERGIA',
                    //data:[10,9,15],
                    backgroundColor: ['#30FF24'],
                    borderColor: ['#30FF24'],
                    //borderColor: none,
                    borderWidth:1,
                    tension: 0.7,
                    pointRadius: .1,
                    pointHoverRadius: 5,
                    pointHitRadius: 30,
                    pointBorderWidth: 2,      
            }]
        },
        options:{
            scales:{
                
                y: {
                suggestedMin: 0,
                suggestedMax: 3
            }
            }
        }
    })
   
    let url = 'http://localhost/somnus/apirest/DBAni_lectura.php'
        fetch(url)
            .then( response => response.json() )
            .then( datos => mostrar(datos) )
            .catch( error => console.log(error) )
        const mostrar = (ani_datos) =>{
            ani_datos.forEach(element => {
                myChart.data['labels'].push(element.hora)
                myChart.data['datasets'][0].data.push(element.ani_inst)
                myChart.data['datasets'][1].data.push(element.ani_med)
                myChart.update()
                energia.data['labels'].push(element.hora)
                energia.data['datasets'][0].data.push(element.energia)
                energia.update()
            });
            console.log(myChart.data)
            //console.log(myChart2.data)
        }** 

y muestro como queda la vista desde mi pagina web. introducir la descripción de la imagen aquí

Nuevo colaborador
RobMed es un usuario nuevo en el sitio. Tenlo en cuenta cuando preguntes por aclaraciones, comentes o respondas. Revisa nuestro Código de conducta.

0

Tu Respuesta

RobMed es un nuevo usuario. Sé cortés y por favor lee nuestro Código de conducta.

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.