Angular stock chart with multiple series not working

[PN]

Hi,

I was trying to create a angular stock chart with multiple series but no data/series displayed on chart.  Here is the html and java script code.

Am I missing something in chart options ? Please help.

 

Html: 

<div kendo-stock-chart k-options="chartOptions" style="height:400px; width:870px;" ></div>

 

$scope.chartOptions = {
                             dateField: "DateTime",
                             valueAxis: [{
                                 labels: {
                                     format: {}
                                 }
                             }],
                             seriesDefaults: {
                                 type: "line",
                                 style: "smooth"
                             },
                             series: [{
                                 type: "line",
                                 style: "smooth",
                                 field: "KPIVALUE",
                                 name: "Jan 11 2014 12:00AM",
                                 tooltip: {
                                     visible: "true",
                                     template: "#=DateTime#-#=KPIVALUE#"
                                 },
                                 data: [{
                                     DateTime: "2014-01-11T00:00:00.000Z",
                                     DateTimeTicks: "1391212800000",
                                     KPINAME: "percent11",
                                     KPIVALUE: 99.904454,
                                     SeriesName: "Jan 11 2014 12:00AM"
                                 }, {
                                     DateTime: "2014-01-11T00:15:00.000Z",
                                     DateTimeTicks: "1391213700000",
                                     KPINAME: "percent11",
                                     KPIVALUE: 99.900868,
                                     SeriesName: "Jan 11 2014 12:00AM"
                                 }, {
                                     DateTime: "2014-01-11T00:30:00.000Z",
                                     DateTimeTicks: "1391214600000",
                                     KPINAME: "percent11",
                                     KPIVALUE: 99.861033,
                                     SeriesName: "Jan 11 2014 12:00AM"
                                 }, {
                                     DateTime: "2014-01-11T00:45:00.000Z",
                                     DateTimeTicks: "1391215500000",
                                     KPINAME: "percent11",
                                     KPIVALUE: 99.906269,
                                     SeriesName: "Jan 11 2014 12:00AM"
                                 }, {
                                     DateTime: "2014-01-11T01:00:00.000Z",
                                     DateTimeTicks: "1391216400000",
                                     KPINAME: "percent11",
                                     KPIVALUE: 99.91746,
                                     SeriesName: "Jan 11 2014 12:00AM"
                                 }]
                             }]
                         }

 

[Daniel]

Hello,

The series will not be shown because of a JavaScript error thrown due to invalid format value:

valueAxis: [{
   labels: {
       format: {}
   }
}],

You should either change it to a valid string format or remove the option.

Also, note that data fields will not be directly available in the tooltip template. They are available as dataItem.FieldName e.g.

template: "#=dataItem.DateTime#-#=dataItem.KPIVALUE#"

Regards,
Daniel
Telerik