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

Label Template in databound

3 Answers 267 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Sangeetha
Top achievements
Rank 1
Sangeetha asked on 22 Jun 2017, 07:02 PM

Hi Team,

I need to add percentage in tooltip and series label . I am successfully able to do the same by adding directly into tooltip template and series label template.

Please find below my working code:

<div id="chart"></div>
    <script>   
     
      var x= 0;
      function processResponse(response) {
      var length = response.length;
      var item;
      var i;
   
      for (i = 0; i < length; i++) {
        item = response[i];
        x = x + item.ActionsCount;
       
      }
       return response;
    
    }
      var seriesData = [
        {"IsMainAction":"8). Cancelled","ActionsCount":20},{"IsMainAction":"7). Completed (KPI not fully achieved)","ActionsCount":4},
        {"IsMainAction":"6). Completed (KPI achieved)","ActionsCount":21},
        {"IsMainAction":"5). Ongoing (delayed)","ActionsCount":1},                                                                              
 
{"IsMainAction":"4). Ongoing (on time)","ActionsCount":12},                                                                     {"IsMainAction":"3). Not yet started (will be on time)","ActionsCount":9},
        {"IsMainAction":"2). Not yet started (will be delayed)","ActionsCount":3},
        {"IsMainAction":"1). Planned","ActionsCount":80}
          
        ];
     function createChart() {
     
            $("#chart").kendoChart({
            
  legend: {
    position: "center",
    visible: true,
    template: "#= data.name #"+ "%"
  },
  dataSource: {
    data: seriesData,
                                group: {
                field: "IsMainAction"
            },
    schema: {
                  parse: function(response) {
                  return processResponse(response);
                }
              }
  },
  seriesDefaults: {
    type: "bar",
    stack: true
  },
 
  seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#222222"],
  series: [
    {
      field: "ActionsCount" ,
    labels:{
                                visible: true,
                                position: "center",
      rotation: -90,
      //color: "#FFFFFF",
     
                                format: "{0}",
      mirror: true,
                                background: "transparent", //padding: { left: -10 },
                                template:"#= value # (#=kendo.toString((value/10)*100, 'n2')#" + "%)"
           
                        
                           }
    }
  ],seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#888"],
            
  tooltip: {
    visible: true,mirror: true,
    template:"#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)"
    
                     
  }
});
        }
      $(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
    </script>

Please see the attachment chart1  for output 

However when I am trying to add in databound only for first bar I am getting the output correctly . For all other bar only value is getting displayed. But for template it is working as expected. Please see the code below:

 

<div id="chart"></div>
    <script>
      function onDataBound(arg) {
                    arg.sender.options.tooltip.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)";
        arg.sender.options.series[0].labels.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)";
                arg.sender.redraw();
                }

      var x= 0;
      function processResponse(response) {
      var length = response.length;
      var item;
      var i;

      for (i = 0; i < length; i++) {
        item = response[i];
        x = x + item.ActionsCount;

      }
       return response;

    }
      var seriesData = [
        {"IsMainAction":"8). Cancelled","ActionsCount":20},{"IsMainAction":"7). Completed (KPI not fully achieved)","ActionsCount":4},
        {"IsMainAction":"6). Completed (KPI achieved)","ActionsCount":21},
        {"IsMainAction":"5). Ongoing (delayed)","ActionsCount":1},                                                                              

{"IsMainAction":"4). Ongoing (on time)","ActionsCount":12},                                                                     {"IsMainAction":"3). Not yet started (will be on time)","ActionsCount":9},
        {"IsMainAction":"2). Not yet started (will be delayed)","ActionsCount":3},
        {"IsMainAction":"1). Planned","ActionsCount":80}

        ];
     function createChart() {

            $("#chart").kendoChart({

  legend: {
    position: "center",
    visible: true,
    template: "#= data.name #"+ "%"
  },
  dataSource: {
    data: seriesData,
                                group: {
                field: "IsMainAction"
            },
    schema: {
                  parse: function(response) {
                  return processResponse(response);
                }
              }
  },
  seriesDefaults: {
    type: "bar",
    stack: true
  },
  dataBound: onDataBound,
  seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#222222"],
  series: [
    {
      field: "ActionsCount" ,
    labels:{
                                visible: true,
                                position: "center",
      rotation: -90,
      //color: "#FFFFFF",

                                format: "{0}",
      mirror: true,
                                background: "transparent", //padding: { left: -10 },



                           }
    }
  ],seriesColors: ["#F4DC7A", "#FF2B24", "#FDC1A4", "#3CB4FF", "#D079F1", "#1AAF18", "#0DFF85", "#888"],

  tooltip: {
    visible: true,mirror: true


  }
});
        }
      $(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
    </script
>

 

Please see the attachment chart 2 for this output

Kindly help me to fix this issue

 

3 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 26 Jun 2017, 10:06 AM
Hello Sangeetha,

Could you please provide us more information on the desired result?

Based on the provided code, the changes are correctly applied only to the first series, as they are set only to the first element in the series array:

arg.sender.options.series[0].labels.template

If the desired result is to set it for all series, please make the desired change for all series or use the setOptions method which will set the same template for all series. Please have in mind that this will require a flag in order to execute it only when needed to prevent recursion:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setOptions

If I missed an important detail, please let me know and I will gladly assist.

Regards,
Stefan
Progress Telerik
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.
0
Sangeetha
Top achievements
Rank 1
answered on 26 Jun 2017, 11:11 AM

Hi Stefan,

I have used the code from the following link:
http://www.telerik.com/forums/is-it-possible-to-conditionally-display-the-series-label-
"e.sender.options.series[0].labels.visible" is used for all the series and not for a single series.
Please let me know how to use label template in databound for all the series.

Regards,
Sangeetha

0
Stefan
Telerik team
answered on 27 Jun 2017, 08:36 AM
Hello Sangeetha,

In this scenario I can suggest to loop through all of the series:

dataBound:function(arg){
 for(var i = 0; i <arg.sender.options.series.length; i++ ){
  arg.sender.options.series[i].labels.template = "#= value # (#= kendo.toString((value/10)*100, 'n2')#" + "%)";
 }
 arg.sender.redraw();
}

http://dojo.telerik.com/uveRu

I hope this is helpful.

Regards,
Stefan
Progress Telerik
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 (charts) and form elements.
Tags
Charts
Asked by
Sangeetha
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Sangeetha
Top achievements
Rank 1
Share this question
or