Series With Missing Values

[Nick]

I have a set of data in a local javascript variable that follows this pattern:

[ 
{ month: 'Jan 2012', series1: 800, series 2: 500 },
{ month: 'Feb 2012', series1: 700, series 2: 700 }, 
{ month: 'Mar 2012', series1: 900, series 2: 300 }, 
{ month: 'Apr 2012', series1: 800, series 2: 500, series3: 100 }, 
{ month: 'May 2012', series3: 200 }, 
{ month: 'Jun 2012', series3: 300 }
]

Notice that the data for series 3 doesn't start showing up until the April 2012 object.  I try and create a line chart with the data above by doing the following:

 $('#Chart').kendoChart({
        theme: 'metro',
        legend: { position: 'top' },            
        dataSource: { data: chartData},            
        seriesDefaults: {
            type: 'line',
            tooltip: {
                        visible: true,                        
                        font: '11px Trebuchet MS'
                     },
            markers: { size: 6 },
            missingValues: 'gap' // Should be the default value anyway
        },            
        series: [            
            {
                field: 'series1'
                name: 'Series1'
            },
            {
                field: 'series2',
                name: 'Series2'
            },
            {
                field: 'series3',
                name: 'Series3'
            }                       
        ],
        categoryAxis: {
            field: 'month',
            labels: {
                font: ".85em Trebuchet MS"
            },
            majorGridLines: { visible: false }
        },
        valueAxis: {
            min: 0,
            max: 100,
            majorUnit: 20,
            majorGridLines: {
                color: '#e7e7e7'
            }
        }
   });   

But it crashes when loading the chart every time with the following javascript error:

1. <error>
   1. o.extend.push
   2. n.extend._bindSeries
   3. n.extend._onDataChanged
   4. e.extend.proxy.g
   5. w.extend.trigger
   6. o.extend._process
   7. o.extend._change
   8. e.extend.proxy.g
   9. w.extend.trigger
   10. o.extend.push
   11. n.extend._bindSeries
   12. n.extend._onDataChanged
   13. e.extend.proxy.g
   14. w.extend.trigger
   15. o.extend._process
   16. o.extend._change
   17. e.extend.proxy.g
   18. w.extend.trigger
   19. o.extend.push
   20. n.extend._bindSeries
   21. n.extend._onDataChanged
   22. e.extend.proxy.g
   23. w.extend.trigger
   24. o.extend._process
   25. o.extend._change
   26. e.extend.proxy.g
   27. w.extend.trigger
   28. o.extend.push
   29. n.extend._bindSeries
   30. n.extend._onDataChanged
   31. e.extend.proxy.g
   32. w.extend.trigger
   33. o.extend._process
   34. o.extend._changekendo.dataviz.min.js:9
   35. e.extend.proxy.g
   36. w.extend.trigger
   37. o.extend.push
   38. n.extend._bindSeries
   39. n.extend._onDataChanged
   40. e.extend.proxy.g
   41. w.extend.trigger
   42. o.extend._process
   43. o.extend._change
   44. e.extend.proxy.g
   45. w.extend.trigger
   46. o.extend.push
   47. n.extend._bindSeries
   48. n.extend._onDataChanged
   49. e.extend.proxy.g
   50. w.extend.trigger
   51. o.extend._process
   52. o.extend._change
   53. e.extend.proxy.g
   54. w.extend.trigger
   55. o.extend.push
   56. n.extend._bindSeries
   57. n.extend._onDataChanged
   58. e.extend.proxy.g
   59. w.extend.trigger
   60. o.extend._process
   61. o.extend._change
   62. e.extend.proxy.g
   63. w.extend.trigger
   64. o.extend.push
   65. n.extend._bindSeries
   66. n.extend._onDataChanged
   67. e.extend.proxy.g
   68. w.extend.trigger
   69. o.extend._process
   70. o.extend._change
   71. e.extend.proxy.g
   72. w.extend.trigger
   73. o.extend.push
   74. n.extend._bindSeries
   75. n.extend._onDataChanged
   76. e.extend.proxy.g
   77. w.extend.trigger
   78. o.extend._process
   79. o.extend._change
   80. e.extend.proxy.g
   81. w.extend.trigger
   82. o.extend.push
   83. n.extend._bindSeries
   84. n.extend._onDataChanged
   85. e.extend.proxy.g
   86. w.extend.trigger
   87. o.extend._process
   88. o.extend._changekendo.dataviz.min.js:9
   89. e.extend.proxy.g
   90. w.extend.trigger
   91. o.extend.push
   92. n.extend._bindSeries
   93. n.extend._onDataChanged
   94. e.extend.proxy.g
   95. w.extend.trigger
   96. o.extend._process
   97. o.extend._change
   98. e.extend.proxy.g
   99. w.extend.trigger
   100. o.extend.push
   101. n.extend._bindSeries
   102. n.extend._onDataChanged
   103. e.extend.proxy.g
   104. w.extend.trigger
   105. o.extend._process
   106. o.extend._change
   107. e.extend.proxy.g
   108. w.extend.trigger
   109. o.extend.push
   110. n.extend._bindSeries
   111. n.extend._onDataChanged
   112. e.extend.proxy.g
   113. w.extend.trigger
   114. o.extend._process
   115. o.extend._change
   116. e.extend.proxy.g
   117. w.extend.trigger
   118. o.extend.push
   119. n.extend._bindSeries
   120. n.extend._onDataChanged
   121. e.extend.proxy.g
   122. w.extend.trigger
   123. o.extend._process
   124. o.extend._change
   125. e.extend.proxy.g
   126. w.extend.trigger
   127. o.extend.push
   128. n.extend._bindSeries
   129. n.extend._onDataChanged
   130. e.extend.proxy.g
   131. w.extend.trigger
   132. o.extend._process
   133. o.extend._change
   134. e.extend.proxy.g
   135. w.extend.trigger
   136. o.extend.push
   137. n.extend._bindSeries
   138. n.extend._onDataChanged
   139. e.extend.proxy.g
   140. w.extend.trigger
   141. o.extend._process
   142. o.extend._change
   143. e.extend.proxy.g
   144. w.extend.trigger
   145. o.extend.push
   146. n.extend._bindSeries
   147. n.extend._onDataChanged
   148. e.extend.proxy.g
   149. w.extend.trigger
   150. o.extend._process
   151. o.extend._change
   152. e.extend.proxy.g
   153. w.extend.trigger
   154. o.extend.push
   155. n.extend._bindSeries
   156. n.extend._onDataChanged
   157. e.extend.proxy.g
   158. w.extend.trigger
   159. o.extend._process
   160. o.extend._change
   161. e.extend.proxy.g
   162. w.extend.trigger
   163. o.extend.push
   164. n.extend._bindSeries
   165. n.extend._onDataChanged
   166. e.extend.proxy.g
   167. w.extend.trigger
   168. o.extend._process
   169. o.extend._change
   170. e.extend.proxy.g
   171. w.extend.trigger
   172. o.extend.push
   173. n.extend._bindSeries
   174. n.extend._onDataChanged
   175. e.extend.proxy.g
   176. w.extend.trigger
   177. o.extend._process
   178. o.extend._change
   179. e.extend.proxy.g
   180. w.extend.trigger
   181. o.extend.push
   182. n.extend._bindSeries
   183. n.extend._onDataChanged
   184. e.extend.proxy.g
   185. w.extend.trigger
   186. o.extend._process
   187. o.extend._change
   188. e.extend.proxy.g
   189. w.extend.trigger
   190. o.extend.push
   191. n.extend._bindSeries
   192. n.extend._onDataChanged
   193. e.extend.proxy.g
   194. w.extend.trigger
   195. o.extend._process
   196. o.extend._change
   197. e.extend.proxy.g
   198. w.extend.trigger
   199. o.extend.push
   200. n.extend._bindSeries

It obviously looks like it is hitting some infinite loop.  I tried to add series3: 0 to the first row in my dataset to just see what would happen so my data set looked like: 

[ 
{ month: 'Jan 2012', series1: 800, series 2: 500, series3: 0 },
{ month: 'Feb 2012', series1: 700, series 2: 700 }, 
{ month: 'Mar 2012', series1: 900, series 2: 300 }, 
{ month: 'Apr 2012', series1: 800, series 2: 500, series3: 100 }, 
{ month: 'May 2012', series3: 200 }, 
{ month: 'Jun 2012', series3: 300 }
]

That made the graph render but instead of having a gap for series3 for Feb 2012 and Mar 2012 it pushed the series3 values for Apr 2012 to Feb 2012, May 2012 to Mar 2012, and Jun 2012 to Apr 2012.  Each series3 value was shifted down two months and no gaps were present.

Am I missing something?  I would like series to to not start until it reaches data which should start in the April 2012 row.

Thanks for any suggestions in advance!

[Nick]

Does anyone have any comment on this issue?

[T. Tsonev]

Hello,

Thank you for reporting this problem. We were able to reproduce it easily thanks to your detailed notes.

We've already implemented a fix and it'll be available in the next internal build. It will be available for download by Friday.

As a token of gratitude for your involvement your Telerik points have been updated.

All the best,
Tsvetomir Tsonev
the Telerik team

[Nick]

Thank you.  I look forward to the update on Friday.

[Josh]

Can you provide an example of a line chart that has a dynamic number of series and missing data points? I am able to achieve it but I cannot get the missing values to work, I have to zero them out and want to exclude them in the graph...

[T. Tsonev]

Hi Josh,

Can you please share more details about your scenario? What does the data look like?

Upgrading to the latest internal build should resolve the problem with undefined values that Nick was experiencing.

All the best,
Tsvetomir Tsonev
the Telerik team

[Josh]

For example I would want a line/bar chart that will have the months in a year on the x-axis and values on the y-axis.

The data will dynamically generate series by grouping the data by year and displaying the month values within that year.

Data points:  month, year, value

I currently have this working but in a way that may not be ideal.  To generate dynamic series I am doing something simliar to this:
http://www.kendoui.com/forums/ui/chart/json-format-for-multiple-series.aspx 

I basically return a list of series data (already grouped by year) and manually create the series array.  To get the missing data points effect, I am using .NET, I make the data point value nullable type which in turn prevents it from plotting.  (I initially tried zero out missing points but they would display).

This seems to work but I was wondering if there was a more efficient/maintainable way to get dyanmic series data into the line/bar chart.

Ideal situation:
Instead of returning a List<SeriesData> in a JSON GET request, I return back a List<CustomDataObjects> where CustomDataObjects contain the my data points (Month, Year, Value) and I just set up field properties within the chart initialization code.

I've attached my sample javascript.

[Manoj]

Hello everybody. I am using line chart to show number of registered users and total business via site. So is there any way so i can make filter this chart. For example i select the weekly then its show only current weeks data(Registered users,business). If i select month then it shows whole current months data. As happening in opencart admin.

Please help me ASAP.

Thanks

[T. Tsonev]

Hello Josh,

Apologies for taking so long to respond. Your current approach is fine, but it can probably be simplified with some help from the data source.

I've prepared a little sample that shows how to do the filtering in the data source. It is also possible to plot grouped data, it seems that you're already doing the grouping on the server.

Please feel free to direct additional questions to separate forum threads / support tickets.

All the best,
Tsvetomir Tsonev
the Telerik team