Highcharts adding new data points in VueJS / Vuex

Question

I want to use highcharts to display an initial set of data and then every two seconds add a new data point. I am subscribing to an external WebSocket services that initially provides me with the data and then sends me a new value every two seconds.

I am using the events option in Highcharts to try and get the data out of the vuex store. Here is my code.

chart:{
                  type: 'spline',
                  animation: '',
                  events: {
                    load: function () {

                      // set up the updating of the chart each second
                      var series = this.series[0];
                      setInterval(function () {

                        series.addPoint([this.$store.getters.getTickEpoch, this.$store.getters.getTickQuote], true, true);
                      }.bind(this), 1000);
                    }.bind(this)
                  }
                }

The problem is that if I don't add .bind(this) to my functions, I can't see the vuex store, but when I do add .bind(this) then var series = this.series[0]; no longer works.

How do I use vuex data to update my chart in real time?

have idea from this [post] (stackoverflow.com/a/39353204/3898339). — Deep 3015
– Deep 3015, Commented Jan 14, 2018 at 16:06
Highcharts.charts is an array of all charts on the page. If you only have one chart on the page then the series you need is Highcharts.charts[0].series[0]. — Dmitry
– Dmitry, Commented Jan 15, 2018 at 11:46
Solution proposed by @Dmitry works: jsfiddle.net/kkulig/ucvoamnr chart variable is still not defined when the load event fires but the chart is already saved in Highcharts.charts array. — Kamil Kulig
– Kamil Kulig, Commented Jan 17, 2018 at 9:04

PrestonDocks · Accepted Answer · 2018-01-17 13:32:41Z

1

The answer was to use the vue-highcharts plugin. This resolved all my problems and allowed me to very quickly setup a real time chart by following the simple examples.

answered Jan 17, 2018 at 13:32

PrestonDocks

5,5279 gold badges59 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wuno Over a year ago

Where are you seeing examples using vue.highcharts or some documentation?

Collectives™ on Stack Overflow

Highcharts adding new data points in VueJS / Vuex

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related