Reactivity in chart datasource prop? Should the chart rebind or do we need to redraw()?

[Rich]

Hi There, I have a kendo UI chart who's datasource is bound to a computed property. I can see the datasource computed property is being updated but the chart is not rebinding/redrawing. Do I need to manually redraw the chart?

If we don't need to manually refresh/redraw then do you have any ideas as to why the chart wouldn't redraw when I update the datasource prop? Thanks!

[Rich]

I'm sorry looks like I am unable to edit this post. 

To clarify what I am doing is binding the series prop:

:series="series"

"series" is a computed property in my component that creates series where the series data property is passed data:

computed: {
    series() {
      let chartSeries = [];
      this.prices.forEach(commodSeriesData => {
        chartSeries.push({
          type: "line",
          data: commodSeriesData,
          field: "Price",
          categoryField: "DateTime",
          categoryAxis: "DateTime",
          style: "normal",
          markers: { visible: false },
          labels: { visible: false }
        });
      });
      return chartSeries;
    }
  },

 

[Ianko]

Hi Rich,

I tried out the case described in this example (https://codesandbox.io/s/n869o6zy4) and I was uable to see any problems with the chart refreshing when the series prop is changed.

Regards,
Ianko
Progress Telerik

[Rich]

Hi Ianko,

Please take a look at: https://codesandbox.io/s/2vl4ppy1rr . There is no apparent error and it this one does not bind at all. I do have it binding in my own but the series prop is not reactive. ie: the computed series changes and the chart does not update automatically.

I am unable to determine from the documentation whether or not you can bind multiple series without explicitly defining a category axis array with all values. I don't think my scenario is an edge case. Imagine a chart where you have multiple series sources, the only thing you are 100 % certain of is the value and category fieldname in your series array objects. It would be very useful to be able to bind multiple series where the value AND the category axis values are defined in the series itself. 

[Rich]

My sample is now working at https://codesandbox.io/s/2vl4ppy1rr . Once I removed field: "DateTime" from the categoryAxis settings the series displayed correctly.

[Ianko]

Hi Rich,

Typically, whatever change is caused should be propagated to the Vue wrapper and the widget to be refreshed. That this is implemented by utilizing the watchers of the Vuie component. In Vue, there is a limitation regarding mutation of Arrays, where updating indexes will not propagate a change to a watcher. Thus, there is no programmatic approach to tell when an internal field of an index in an array is changed. Therfeore, I suggest you to check if this is going to work properly if you update the entire array, instead of only the specific indexes of the array. 

Also, the codesandbox example is not rendering any series even if they are not updated programmatically.  

Regards,
Ianko
Progress Telerik

[Rich]

Hi Ianko, thanks for the reply. Turns out my (local)issue was with having a configuration artifact where I was setting the data-source as well as the series bindings. This was giving me a kendo js error which I posted in another message. Once I removed the data-source binding everything worked as expected. As for the codesandbox, if you hit the refresh button the series will show and update accordingly. The initial load is not displaying the series. 

[Rich]

Hi Ianko, now that I am binding the series prop as opposed to the data prop the databound event no longer is fired. When the series is bound I need to bubble an event. I am trying to get the series color to pass along to other components. Any ideas? thanks!

[Ianko]

Hi Rich,

I assume, you could use the render event, which is triggered when the chart is rendered or re-rendered. Here you are an example: https://codesandbox.io/s/1v2k7y15ml.

Regards,
Ianko
Progress Telerik