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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.