CODEWITHSUNDEEP
chartskendo-uiseries
dj22
dj22

Reputation: 245

kendo chart dynamic series

I currently have a two step process for my kendo charts. The first process is allowing the user to select the datasets (series) they want on the chart. They then choose a template. A template is the graph settings ex (color theme, chart type line, bar, circle ect.).

Currently if a user selects the datasets they want i return the series information to the graph and the graph is then populated with the template settings.

I also allow the user to change the template settings on the fly. For example a Bar chart to Line, Area, Circle ect. They can also change the theme. The issue becomes when the first load is set, the series information that i pass is:

{
  [name: "string", data: []], 
  [name: "string", data: []]
}

when i inspect the series object after the change on the template I see the following added to the object:

{
  [name: "string",
   data: [],
   type: "area",
   color: "ff6800",
   ect...   
  ],
  [name: "string",
   data: [],
   type: "area",
   color: "ff6800",
   ect...   
  ],
}

The issue becomes that I can modify my object type to the correct selected type. I can even change the color value to a differen color for each series. However, because I am using the Kendo Themes, the chart background will change but then the series colors wont match. I could come up with a function to choose the background color for the chart and then choose what colors you want for your series. But I would rather use the kendo methods if possible.

I also think if i clear out that object and just use the settings and data I am passing it could work. However, I dont want to have to go to the database each time a page level changes is made and I also noticed that my object even if i create a temp object is given all of the chart properties.

Thank you in advance!

Upvotes: 3

Views: 7043

Answers (1)

dj22
dj22

Reputation: 245

I asked this question on Kendo forums and recieved the following answer.

You'll need to keep a deep copy of the chart options before passing them in. This way you can recreate the chart with only your original options.

var options = { ... };

$("#chart").kendoChart(
     // No side effects on options
     $.extend(true, {}, options)
 );

If you look at the example this makes sense to do it this way because then you can modify your chart when different events on the page occur. For example when I want to change a theme or a chart type. I can just modify the:

options.seriesDefaults = { type = "bar" };

Here is a link to an example provided by Tsvetomir: http://jsbin.com/ulohof/1/edit

Here is a link to the question on Kendo Forums: http://www.kendoui.com/forums/dataviz/chart/kendo-chart-dynamic-series.aspx

Upvotes: 4

Related Questions