How do I refresh data and/or redraw chart in highcharts?

user_8500684 0
Viewed 267

I'm implementing a highchart in an ember component in the following way

/controllers/mycontroller.js

  export default Controller.extend({
  chartData:
    [{
      name: 'Impact',
      borderWidth: 2,
      borderColor: '#FFFFFF',
      data: [],
      keys: ['x', 'y', 'v','f', 'i', 'm', 'c', 'g', 'p'],
      dataLabels: {
        enabled: true,
        color: '#000000',
        style:{
          fontSize: 14,
          fontFamily: 'arial',
          textOutline: false
        },
        formatter: function(){
          return this.point.options.feature;
        }
      }
    }],
  chartOptions: computed(function() {
    return {
      chart: {
        renderTo: 'container',
        type: 'mymap',
        events: {
          load: requestData,        -----> function that makes an api call and formats data
          redraw: true
        }

I've enabled the redraw option, but it does not redraw because the load data happens only when the component first loads (land on URL), I think?

So my question is how do I load/redraw data automatically every 60 seconds when the data is being fetched through a function call?

ember.js
1 Answers

I presume you have something like {{high-charts content=chartData chartOptions=chartOptions}} somewhere in your template (or the more modern syntax <HighCharts @content={{chartData}} @chartOptions={{chartOptions}}>)?

Then the displayed chart should update automatically when chartData or chartOptions change. To achieve this, you have two decent options:

  • Load the data, do the processing to generate properly structured chartData and chartOptions if necessary, then do this.setProperties({ chartData, chartOptions });
  • Make chartData and chartOptions proper computed properties. If you just define computed(function() ... without dependent keys, ember will not re-compute because there is nothing to trigger re-computation. If your data-requesting method changes a controller/component (not the same concept, btw!) property named rawData, for example, your computed property should depend on this: chartData: computed('rawData', function() { ... },.

To reload data every 60 seconds, just import { later } from '@ember/runloop'; and schedule your data-loading function again at the end of its own function body:

reload() {
  fetchStuff(...).then(result => this.set('rawData', result));
  later(this, () => this.reload(), 60*1000);
}
user_6337700
Related