djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Autor fresh plot from new data

Hi

I have a very large dataset; therefore, I am downloading the data in blocks of 1000.

Is it possible to plot 1000 datasets at a time?

My approach would be to update the array and then call the function to reload the plot.

Would this work, or is there an automated method within the library itself?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Autor fresh plot from new data

Hi djoshi!
We appreciate you reaching out to us!

Of course, it is possible to plot 1000 points at a time.
If you want to always plot max 1000 points and after each update "delete" old data and replace them with new ones you can use a setData method - see the first demo.
The second approach would be adding the next 1000 points to existing data, so it is possible to have for example 10000 points after 10 updates. It also could be done using addPoint method - this behaviour can be seen in the second demo below. If want to do this another way, please let me know if you need help.

Demos: https://jsfiddle.net/BlackLabel/Lj7mbkhu/
https://jsfiddle.net/BlackLabel/Lza5we6o/

API Reference: https://api.highcharts.com/class-refere ... es#setData
https://api.highcharts.com/class-refere ... t#addPoint

Let me know if that was what you were looking for!
Best regards!
Hubert Kozik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Autor fresh plot from new data

Hi Hubert

Thanks

I will be calling an HTTP GET process, which will deliver data in batches of 1000 rows. These data will then be pushed into a global array.

The duration of data retrieval will vary, so there could be instances where the plot could be reading the array but has not been updated yet. How would we handle that?

Once data is all downloaded, then there will be no need to keep reading the array or would that not be necessary?

If I am correct, can I use setData to read a function that simply returns that array being updated from my HTTP get process?
hubert.k
Posts: 1164
Joined: Mon Apr 11, 2022 11:48 am

Re: Autor fresh plot from new data

djoshi,
Yes, sure. You can use setData method, like in this demo: https://jsfiddle.net/BlackLabel/1dog5e96/ This demo is similar to your wanted logic because data is changed in some interval. If you will get your data from some HTTP GET process just call setData when the callback will be successful and the duration of data retrieval will not have an impact on the chart. To stop changing data when all downloaded you will need some flag to check if all points are downloaded (in my demo i variable is working in a similar way).

Best regards!
Hubert Kozik
Highcharts Developer
djoshi
Posts: 61
Joined: Fri Mar 26, 2021 5:16 pm

Re: Autor fresh plot from new data

Hi, Will this also work with a HighStock solid gauge?

I am performing the following code, getData will generate a value, but it does not get updated onto the gauge like shown in the example. Do we need to do something different as this is gauge not chart?

Code: Select all


  air_main_gauge() {

    const getData = (min, max, count) => {
      var x=Math.floor(Math.random() * 100) + 1;
      console.log("updated Value for gauge-->"+x);
      return x;
    }
    

    let data = getData(1, 100, 1000);
    
    this.chart = this.maingauge_chart.stockChart('MainGuageA', {
      chart: {
        type: 'solidgauge',
        backgroundColor: 'transparent',
        events: {
          load: function() {
            const chart = this;
    
            setInterval(function() {
              chart.series[0].setData(getData(1, 100, 1000));              
            }, 1000);
          }
        }
      },
      credits: {
        enabled: false
      },

      pane: {
        center: ['50%', '50%'],
        size: '100%',
        innerSize: '10%',
        startAngle: -150,
        endAngle: 150,
        background: {
          backgroundColor: HighCharts.defaultOptions.legend.backgroundColor || '#EEE',
          innerRadius: '90%',
          outerRadius: '100%',
          shape: 'arc',
          borderWidth: 0
        }
      },

      lineWidth: 1,
      tooltip: {
        enabled: false,


      },
      navigator: {
        enabled: false
      },
      rangeSelector: {
        selected: 1,
        inputEnabled: false,
        enabled: false
      },
      scrollbar: { enabled: false },
      yAxis: {
        labels: {
          enabled: false,
        },
        stops: [
          [0.0, '#0c8eca'], // blue
          [0.33, '#0c8eca'], // blue
          [0.34, '#eeb333'], // yellow
          [0.66, '#eeb333'], // yellow
          [0.67, '#f0250a'] // red
        ],
        min: 0,
        max: 100,
        lineWidth: 0,
        tickPositions: [100 / 3, 2 / 3 * 100],
        minorTickWidth: 0,
        zIndex: 10,
        tickColor: '#deeeee',
        tickWidth: 10,
        tickLength: 30,
        offset: 20,
      },
      plotOptions: {
        solidgauge: {
          innerRadius: '90%',
          dataLabels: {
            enabled: false
          },
          rounded: true
        },
      },
      series: [{
        //data: [this.gauge1_value1],
        data: data,
        tooltip: {
          enabled: false
        },
      },
      ],
    });
  }
User avatar
dawid.d
Posts: 807
Joined: Thu Oct 06, 2022 11:31 am

Re: Autor fresh plot from new data

Hi djoshi,

Thanks for contacting us with your question!

I'm sorry, but I don't understand your problem exactly, because you are linking gauge with stock, and they have no relation. Do you mean a live update of the standard gauge chart? If so, there are already such demos on the Highcharts website, see one of some examples: https://jsfiddle.net/gh/get/library/pur ... peedometer

If this is not the answer to your problem, could you describe it in more detail or send a demo of it in action?

Best regards!
Dawid Draguła
Highcharts Developer

Return to “Highcharts Stock”