Highcharts-Vue wrapper: Can't get setData() method to work

[SamuelEarl]

I am pulling data from an API and storing that data in a variable called chartData. I am trying to plot the data from chartData as the initial data set when the Highstock chart first renders. Then new data points are added to the initial data set through a live data feed.

Here is my code for the initial data set:

Code: Select all

async load() {
  const series = this.$children[0].chart.series[0];

  // AJAX call
  const { payload } = await Wreck.get(`/api/device-charts/${this.deviceSerNum}`);
  const chartData = JSON.parse(payload.toString());

  const initialData = [];

  for (let i=0; i < chartData.length; i++) {
    initialData.push([
      chartData[i].st * 1000, // timestamp
      chartData[i].pTimeV     // value
    ]);
  }

  series.setData(initialData);
}

I then call the load() method from the mounted() hook.

The result is that the chart is empty, but the navigator below the chart shows the plotted line. Also, the new data points get plotted in the navigator, but the chart remains empty.

I have checked the format of the data in the chartData array and it appears to be in the correct format.

What am I doing wrong?

[wojtek]

Hi SamuelEarl,

Could you provide me with an online demo of your app/chart (codesandbox or jsfiddle for example)? Then I will be able to reproduce your issue and help you easier.

Kind regards.

[SamuelEarl]

Hi wojtek,

Here is a link to a codesandbox: https://codesandbox.io/s/nw4qk1zj24.

However, I don't think the code in the codesandbox will run because my Vue code depends on server-side code and data from the database in order to run properly.

But that sandbox does have the setData() method that is causing the problems. It is located in this file: src/client/views/device-charts/PosDischargeChart.vue

Also, when I navigate away from the page with the chart, I've been getting this error: "Uncaught TypeError: Cannot read property 'turboThreshold' of undefined". Could that be related to the setData() problem?

I have one other thing I wanted to ask. What does the Highcharts-Vue wrapper do for me? Could I just use Highcharts in my Vue apps as explained here: https://stackoverflow.com/questions/387 ... t#40079956?

Thank you for your help!

Sam

[wojtek]

SamuelEarl,

Unfortunately, we are not able to reproduce your issues. Could you provide a static sample data in places where you fetch them from a server? A working example will be very appreciated to debug your problem so please try to prepare it. What version of Highcharts, Vue wrapper are you using?

Highcharts-Vue package is nothing else just like a component (or global plug-in, depending on the way of using it) for Vue framework. It makes the user can put the Highcharts charts much faster on their applications because whole logic of dynamic updating it is already implemented. One thing you need to do is import the wrapper, and use it as every component.

Kind regards.

[SamuelEarl]

I have updated the codesandbox with a chart that is similar to what I am trying to do.

In my actual project I am trying to display time series data in real time. I want to populate the chart with the 1000 most recent data points from my database and then use the addPoint() method to add a new data point to the chart about every second. The data points should then shift off of the chart to the left as each new data point is added to the chart.

In the codesandbox chart I am trying to populate the chart with 1000 randomly generated data points and then add one randomly generated data point about every second. The data points should also shift off of the chart to the left as each new data point is added to the chart.

But I can't get this to work properly. Also, the behavior of the chart in the codesandbox is different from what is happening in my project, even with the same exact code. I don't know if codesandbox is rendering Highcharts properly. The same code in my local project displays one data point at a time (in other words, it displays a single straight line) and the chart continues to update with each new data point.

Thank you for your help.

[SamuelEarl]

I think I may have figure out the problem. The data displays in the navigator (below the chart), but nothing displays in the chart. I noticed that none of the range selectors are selected by default for some reason, so I haven't told the chart what to display. When I click on the "All" selector it displays the data in the chart. I am still getting some buggy behavior, but I think that might be because no xAxis.min or xAxis.max values are defined.

I also found this post on StackOverflow, which might help me out also: https://stackoverflow.com/questions/241 ... k#24138506.

So I will play around with some of these options and see if that fixes my problems.

Thank you!

[wojtek]

SamuelEarl,

We changed the way data is added to the chart and it works fine, so this problem was caused by your data generation. However, the animation doesn't work and we think it can be a bug. We will work on it and try to solve it. Check the demo posted below.

Demo:
https://codesandbox.io/s/7o37zv74rj

Kind regards.

[SamuelEarl]

I was able to get everything to work in my charts. Here is a summary of my findings:

The setData() method does work. The problem that I was having was that I did not tell the chart how many data points to display on initial render (with the range selector buttons), so the chart was rendering as a blank chart. The navigator was being populated with data, but the chart remained blank.

I used some of the ideas from this post to programmatically set the min and max values that should be rendered in the chart when it first loads up: https://stackoverflow.com/questions/241 ... -highstock.

(I would post the actual code I used, but it would just be confusing because my actual code pulls data from a database and it is not too similar to the code that was posted in the codesandbox links. The above StackOverflow link should be helpful, though.)

I then had to programmatically select the initial range selector button. For some reason, the rangeSelector.selected option in the Highcharts configs didn't work in my instance, so I had to programmatically select the button I wanted when the charts were initially rendered.

Here is the code for that:

Code: Select all

const chart = this.$children[0].chart;
chart.rangeSelector.buttons[0].element.onclick();

At this point, the chart was working fine along with the animations. The initial data was populating the charts and the live data was streaming in.

The final issue I had was that the data that was streaming in seemed a little out of sync with what was being displayed in the chart. I had to make a few adjustments to the database query that I was running, but that has nothing to do with Highcharts-Vue.

I hope that helps!

[wojtek]

SamuelEarl,

I was able to get everything to work in my charts.

I'm glad you've solved your problems.

I then had to programmatically select the initial range selector button. For some reason, the rangeSelector.selected option in the Highcharts configs didn't work in my instance, so I had to programmatically select the button I wanted when the charts were initially rendered.

The rangeSelector.selected option didn't work because you generate an empty chart on init. To make it work you would have to provide data when initialise.

Kind regards.