Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

Stacked Line Series with Complex Data

4 Answers 112 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Brad
Top achievements
Rank 1
Brad asked on 16 Mar 2017, 02:58 PM

I am looking to display several series on a line chart.  Each series comes from a different datasource, but I have normalized them client-side to ensure there are the correct number of values for the category axis.  I am trying to bind to a custom value field in the series.  Below is one example of my attempt and I think illustrates well what I am trying to do.  Is this possible?

 

01.<!DOCTYPE html>
02.<html>
03.<head>
04.    <meta charset="utf-8"/>
05.    <title>Kendo UI Snippet</title>
06. 
08.    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>
11. 
12.    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
14.</head>
15.<body>
16.   
17.<div id="chart"></div>
18.<script>
19.  var data = [
20.    {name:'Series 1',
21.     //data:[-1, 1, null, 1.2, .8, null, 2, -2],
22.     data:[{Id:1, Value:-1, Year:2010}, {Id:2, Value:2, Year:2011}, {Id:3, Value:null, Year:2012}, {Id:4, Value:4, Year:2013}],
23.     field:'data.Value',
24.     color:'red'
25.    },
26.    {name:'Series 2',
27.     data:[{Id:1, Value:1, Year:2010}, {Id:2, Value:3, Year:2011},{Id:3, Value:5, Year:2012}, {Id:4,Value:7, Year:2013}],
28.     field:'data.Value',
29.     color:'green'
30.    },   
31.  ]
32.$("#chart").kendoChart({
33.  dataSource: {
34.    data: data
35.  }, 
36.  seriesDefaults: {
37.    type: "line",
38.    missingValues:'interpolate',
39.    stack:true,
40.    field:'data.Value'
41.  },
42.  series: data
43.});
44.</script>
45.</body>
46.</html>

4 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Mar 2017, 09:50 AM
Hello Brad,

The data format for the series has to be modified in order to be parsed correctly from the Chart.

I modified the provided example to demonstrate the how similar data have to be passed on the Chart in order to display it correctly:

http://dojo.telerik.com/OYEQu

I can also suggest checking this example and the data format returned from the server:

http://demos.telerik.com/kendo-ui/line-charts/remote-data-binding

I hope this is helpful.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Brad
Top achievements
Rank 1
answered on 20 Mar 2017, 10:35 AM
So a complex data field is not supported?  I know how to handle a simple data series, but I want to track additional information for each graph point, is there a best practice on how to do that?
0
Accepted
Stefan
Telerik team
answered on 20 Mar 2017, 11:16 AM
Hello Brad,

After additional investigation, we made an example which is working as expected with complex objects:

http://dojo.telerik.com/EzUku

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.data

I hope this approach will help to achieve the desired result.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Brad
Top achievements
Rank 1
answered on 20 Mar 2017, 01:59 PM
Thank you, I will work through the example, but this appears to be exactly what I am looking for!
Tags
Charts
Asked by
Brad
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Brad
Top achievements
Rank 1
Share this question
or