Series Label Template

[Ken]

I'm trying to apply a template to the chart serias label... Currently when I chose to make the series lable visible it displays the value exactly as saved in the database.  For instance if the value in the database is 0.621 then the value at the top of the column displays 0.621; however, on the tooltips I have added formatting that works and in this case I've asked the tooltip to round to two decimal places so in the tooltip it displays: 0.62  and the value 0.663 would round to 0.67.  I want to be able to apply the same format to the label on the series... hopefully the code below makes sense.. I can dummy it up without the model references if necessary... by the way the "thetemplateformat" is just a variable on the view... It works correctly for the tooltip but has no apparent affect on the series... Thanks..

series.Column(s => s.rate1_1).Name(Model.Rate01Lbl).Color(Model.Rate01Clr).Labels(l => l.Visible(Model.ShowChartValue_yn).Template(thetemplateformat));

[Iliana Dyankova]

Hi Ken,

In order to achieve this you could use a function with custom logic into the series.labels.template. As an example: 

@(Html.Kendo().Chart(Model)
  //....
  .Series(series =>
     {
      series.Column(
         model => model.Value
      )
     .Labels(labels => labels.Visible(true).Template("#=thetemplateformat()#"));
  })
)
<script>
function thetemplateformat() {
   //your custom logic here
}
</script>

Regards,
Iliana Nikolova
Telerik

[Ken]

I'm having problems with the suggested use of .Template...

I have added the .Template on my code and grabbed a function to format the number but it is not doing anything...  Do you have a more complete approach? 

series.Column(s => s.rate1_1).Name(Model.Rate01Lbl).Color(Model.Rate01Clr).Labels(l => l.Visible(Model.ShowChartValue_yn).Template("#=formatNumber (" + series.Column(s => s.rate1_1) + ", " + i + " #"));


<script>
function formatNumber (obj, decimal) {
//decimal - the number of decimals after the digit from 0 to 3
//-- Returns the passed number as a string in the xxx,xxx.xx format.
anynum=eval(obj.value);
divider =10;
switch(decimal){
case 0:
divider =1;
break;
case 1:
divider =10;
break;
case 2:
divider =100;
break;
default: //for 3 decimal places
divider =1000;
}

workNum=Math.abs((Math.round(anynum*divider)/divider));
workStr=""+workNum

if (workStr.indexOf(".")==-1){workStr+="."}
dStr=workStr.substr(0,workStr.indexOf("."));dNum=dStr-0
pStr=workStr.substr(workStr.indexOf("."))

while (pStr.length-1< decimal){pStr+="0"}
if(pStr =='.') pStr ='';
//--- Adds a comma in the thousands place.
if (dNum>=1000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000))+","+dStr.substring(dLen-3,dLen)
}
//-- Adds a comma in the millions place.
if (dNum>=1000000) {
dLen=dStr.length
dStr=parseInt(""+(dNum/1000000))+","+dStr.substring(dLen-7,dLen)
}
retval = dStr + pStr

//-- Put numbers in parentheses if negative.
if (anynum<0) {retval="("+retval+")";}

//You could include a dollar sign in the return value.
//retval = "$"+retval
obj.value = retval;
}

</script>

[Iliana Dyankova]

Hello Ken,

In order to achieve the expected result you should use JavaScript logic into the series.labels.template function. As an example:

//....
.Series(series => {
  //....
  .Labels(l => l.Visible(true).Template("#=formatNumber(value)#"));
})

<script>
function formatNumber(value) {
   var formatLabel = Math.round(value * 100) / 100;
   return formatLabel ;
}
</script>

Keep in mind in the template you could reach directly the following fields:

• category
• dataItem
• percentage
• series
• value 

Regards,
Iliana Nikolova
Telerik