This is a migrated thread and some comments may be shown as answers.

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

8 Answers 26 Views
This is a migrated thread and some comments may be shown as answers.
Rich
Top achievements
Rank 1
Rich asked on 25 Sep 2018, 10:34 PM

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!

8 Answers, 1 is accepted

Sort by
0
Rich
Top achievements
Rank 1
answered on 25 Sep 2018, 10:41 PM

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;
    }
  },

 

0
Ianko
Telerik team
answered on 27 Sep 2018, 10:46 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rich
Top achievements
Rank 1
answered on 01 Oct 2018, 08:25 PM

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. 

0
Rich
Top achievements
Rank 1
answered on 01 Oct 2018, 09:09 PM
My sample is now working at https://codesandbox.io/s/2vl4ppy1rr . Once I removed field: "DateTime" from the categoryAxis settings the series displayed correctly.
0
Ianko
Telerik team
answered on 02 Oct 2018, 08:39 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Rich
Top achievements
Rank 1
answered on 02 Oct 2018, 02:28 PM
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. 
0
Rich
Top achievements
Rank 1
answered on 02 Oct 2018, 06:38 PM
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!
0
Ianko
Telerik team
answered on 03 Oct 2018, 06:35 AM
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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Asked by
Rich
Top achievements
Rank 1
Answers by
Rich
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or