Mise à jour dynamique multible series Highcharts avec fichier XML à point unique

Question

Je suis un peu hors de ma zone de confort, car je fais généralement des analyses et pas de frontaux sophistiqués. Cependant, j'aimerais avoir une démo en temps réel de certains de mes travaux, de sorte qu'il devient plus facile à comprendre et pas seulement des nombres dans une matrice. Je l'ai regardé autour et trouvé quelque chose semi-pertinente et venir jusqu'ici:

(il a quatre séries comme je veux et itère - dans une certaine mesure) https://jsfiddle.net/023sre9r/

var series1 = this.series[0], 
series2 = this.series[1], 
series3 = this.series[2], 
series4 = this.series[3]; 

Mais je suis totalement perdu sur la façon de supprimer les générateurs de nombres aléatoires sans perdre de belles choses comme le nombre de points de données dans une vue (semble dépendre de la boucle for ?!). Supprimez le titre supplémentaire "Valeurs" juste à côté de mon véritable titre de l'axe des y. Et de cause comment obtenir un nouveau point de données à partir d'un fichier XML chaque seconde.

Idéalement, je veux avoir un fichier XML contenant 4 valeurs, que je mets à jour environ toutes les 200ms dans MATLAB. Et chaque seconde, je voudrais mettre à jour mon tableau de 4 séries. N'est-ce pas relativement facile, si vous savez ce que vous faites ?! :-)

Merci d'avance!

Answer 1

J'ai simplifié votre exemple et ajouté du code clair montrant comment extraire des données du serveur et l'ajouter à votre graphique en utilisant la méthode series.addPoint. Aussi, si vous voulez utiliser XML, il suffit de le convertir en objet JS/JSON.

const randomData =() => [...Array(12)] 
    .map((u, i) => [new Date().getTime() + i * 1000, Math.random()]) 

Highcharts.chart('container', { 
    chart: { 
    renderTo: 'container', 
    type: 'spline', 
    backgroundColor: null, 
    animation: Highcharts.svg, // don't animate in old IE 
    marginRight: 10, 
    events: { 
     load() { 
     const chart = this 
     setInterval(() => { 
      // Fetch example below (working example: https://github.com/stpoa/live-btc-chart/blob/master/app.js) 
      // window.fetch('https://api.cryptonator.com/api/ticker/btc-usd').then((response) => { 
      // return response.json() 
      // }).then((data) => { 
      // chart.series[0].addPoint({ x: data.timestamp * 1000, y: Number(data.ticker.price) }) 
      // }) 

      chart.series.forEach((series) => series.addPoint([new Date().getTime(), Math.random()], true, true)) 

     }, 3000) 
     } 
    } 
    }, 
    title: { 
    text: null 
    }, 
    xAxis: { 
    type: 'datetime', 
    tickPixelInterval: 150 
    }, 
    yAxis: [{ 
    title: { 
     text: 'Temperature [°C]', 
      margin: 30 
    }, 
    plotLines: [{ 
     value: 0, 
     width: 1, 
     color: '#808080' 
    }] 
    }, { 

    }], 
    tooltip: { 
    formatter: function() { 
     return '<b>' + this.series.name + '</b><br/>' + 
     Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' + Highcharts.numberFormat(this.y, 4); 
    } 
    }, 
    legend: { 
    enabled: true 
    }, 
    exporting: { 
    enabled: false 
    }, 
    rangeSelector: { 
    enabled: false 
    }, 

    navigator: { 
    enabled: false 
    }, 
    scrollbar: { 
    enabled: false 
    }, 

    series: [{ 
    name: 'Setpoint', 
    data: randomData() 
    }, { 
    name: 'Return', 
    data: randomData() 
    }, { 
    name: 'Supply', 
    data: randomData() 
    }, { 
    name: 'Output', 
    data: randomData() 
    }] 
}) 

Un exemple concret: https://jsfiddle.net/9gw4ttnt/

Travailler avec une source de données externe: https://jsfiddle.net/111u7nxs/