Angular stock chart with multiple series not working

2 posts, 0 answers
  1. PN
    PN avatar
    1 posts
    Member since:
    Feb 2014

    Posted 25 Apr Link to this post

    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"
                                     }]
                                 }]
                             }

     

  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 27 Apr Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top