0

Estoy intentando añadir líneas de datos en un único gráfico creado con la librería CanvasJS de forma dinámica.

El gráfico lo creo de la siguiente forma:

var chart = new CanvasJS.Chart("graphicONDevices", {

    // Configuram els paràmetres del gràfic.

    zoomEnabled: true,
    exportEnabled: true,
    exportFileName: "Gràfic evolució temporal",

    title: {

        text: "Evolució temporal de les sondes connectades a l'Arduino"

    },

    legend: {

            horizontalAlign: "center",
            cursor: "pointer"

        },

    axisY: {

        title: "Temperatura (ºC)",
        minimum: minimumValueAxisY,
        maximum: maximumValueAxisY

    },

    axisX: {

        valueFormatString: "hh:mm:ss",
        crosshair: { 
            enabled: true
        },  
        title: "Hora de mostreig"

    },   

    data: [

        systemInformation

    ]

});

Seguidamente, lo que hago es ir construyendo objetos JSON dentro de la variable systemInformation (uno para cada sonda de temperatura):

systemInformation[systemInformation.length] = { // Cream l'objecte JSON de la sonda en qüestió.

    type: "line",
    showInLegend: true,
    legendText: this.responseXML.getElementsByTagName('aliasONDevices')[count1].childNodes[0].nodeValue,
    cursor: "pointer",
    connectNullData: true,
    dataPoints: actualData[actualData.length - 1]

}

Finalmente, voy añadiendo los datos dentro de la variable actualData:

actualData[count2].push({   // Introduïm els valors a l'array.

    x: new Date(this.responseXML.getElementsByTagName('dateActualTemp')[count1].childNodes[0].nodeValue + " " + this.responseXML.getElementsByTagName('hourActualTemp')[count1].childNodes[0].nodeValue),
    y: parseFloat(this.responseXML.getElementsByTagName('actualTemp')[count1].childNodes[0].nodeValue)

});

El problema es que el gráfico se crea pero no se representan las líneas correspondientes a cada sonda de temperatura.

Usando el console.log puedo ver el valor de la variable systemInformation y parece que tiene buena pinta:

Array(4) [ {…}, {…}, {…}, {…} ]

Expandiéndolo:

(4) […]
​
0: Object { type: "line", showInLegend: true, legendText: "sondaA", … }
​
1: Object { type: "line", showInLegend: true, legendText: "sondaB", … }
​
2: Object { type: "line", showInLegend: true, legendText: "sondaC", … }
​
3: Object { type: "line", showInLegend: true, legendText: "sondaD", … }
​
length: 4
​
__proto__: Array []

Expandiendo un objeto:

0: {…}
​​
connectNullData: true
​​
cursor: "pointer"
​​
dataPoints: (106) […]
​​​
[0…99]
​​​​
0: Object { x: Date 2018-06-08T19:40:37.000Z, y: 25 }
​​​​
1: Object { x: Date 2018-06-08T19:41:33.000Z, y: 25 }
​​​​
2: Object { x: Date 2018-06-08T19:41:44.000Z, y: 25 }

...

(los demás son iguales a este pero con diferentes valores)

¿Alguien sabe que me está fallando?

Muchas gracias!

1 respuesta 1

0

He encontrado el fallo, llevo horas buscándolo!!!

En la creación del gráfico:

data: [

    systemInformation

]

Tiene que ser...

data: 

    systemInformation

Chicos, bienvenidos al mundo de la programación xDDD

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.