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

Stacked Line Series with Complex Data

4 Answers 145 Views

Charts

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

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.

07. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common.min.css"/>

08. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.rtl.min.css"/>

09. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.silver.min.css"/>

10. <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2017.1.118/styles/kendo.mobile.all.min.css"/>

11.

12. <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>

13. <script src="http://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.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

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.

Accepted