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

Series Label Template

3 Answers 241 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Ken
Top achievements
Rank 1
Ken asked on 21 Feb 2014, 10:10 PM
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));

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 25 Feb 2014, 09:35 AM
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
0
Ken
Top achievements
Rank 1
answered on 28 Feb 2014, 06:54 PM
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>
0
Iliana Nikolova
Telerik team
answered on 04 Mar 2014, 04:43 PM
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

DevCraft Q1'14 is here! Join the free online conference to see how this release solves your top-5 .NET challenges. Reserve your seat now!

Tags
Charts
Asked by
Ken
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Ken
Top achievements
Rank 1
Share this question
or