Label Templates based on series fields from JSON

2 posts, 1 answers
  1. Devendra
    Devendra avatar
    16 posts
    Member since:
    Nov 2014

    Posted 29 Jul 2015 Link to this post

     Hello,

    I have below stacked type chart where it display data from a service. I want to display the label value dynamically for each field in the series. Here i have Value and UnusedValue, how to display these values for their respective fileds "Used Capacity" and "Unused Capacity". The below code displays the same value for both fields because the label template doesn't have any condition.

    function createchart(chartID, chartTitle) {
         $(chartID).kendoChart({
             dataSource: {
                 transport: {
                     read: {
                         url: serviceurl,
                         dataType: "json"
                     }
                 }
             },
             title: {
                 text: "RAU"
             },
     
             legend: {
                 position: "right"
             },
             seriesDefaults: {
                 type: "column",
                 stack: {
                     type: "100%"
                 },
                 labels: {
                     visible: true,
                     position: "bottom",
                     template: "#= dataItem.Value #%"
                 }
             },
             series: [{
                 name: "Used Capacity",
                 field: "Value",
                 CategoryField: "RAU"
             }, {
                 name: "Unused Capacity",
                 field: "UnusedValue",
                 CategoryField: "RAU",
                 color: "#FFFFFF"
             }],
             valueAxis: {
                 line: {
                     visible: false
                 },
                 minorGridLines: {
                     visible: true
                 },
                 visible: false
             },
             categoryAxis: {
                 categories: ["Reliability", "Availability", "Utilisation"],
                 majorGridLines: {
                     visible: false
                 }
             },
             tooltip: {
                 visible: true,
                 template: "#= series.name #: #= dataItem.Value #"
             }
         });
     }

    Best Regards,

    Devendra

  2. Answer
    Plamen Lazarov
    Admin
    Plamen Lazarov avatar
    135 posts

    Posted 31 Jul 2015 Link to this post

    Hello Devendra,

    In order to achieve the expected result you should use custom JavaScript logic in the seriesDefaults.labels.template function. Please find below a basic example which demonstrates this approach:
    http://dojo.telerik.com/AzAji

    Regards,
    Plamen Lazarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top