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

chart (series): tooltip and label problem with format value

7 Answers 389 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Michal
Top achievements
Rank 1
Michal asked on 11 Jan 2017, 02:56 PM

Hi

I use a chart Kendo UI, (using typescript). I have a problem with the tooltip formatting and the same problem with the label (on series).

I have a formatted value (as string, but not the format type) and I want to replace the original value with that.
Is it possible to replace the value? then how?

*** Must say I have seen the example chartTooltip.html

another question , I’ve tried to replace the value with escape char “\”, Before any character I've “\\\\”, which is the result.


result : see (kendo chart.png)

------------------------------------------------------------------------

i tried to do that also 

namespace prefix.html.chart
{

    export class chart
    {

         public formatnewABC(v: any, vf: any): any
         {
             return (vf);
         }

         ...

         ... 

         // build chart source code 
         // this.ser - current series object properties

         var vf: string = this.data.getFormattedValue(i, j); // contains format value (string)
    
         this.ser["labels"] = {
                                visible: true,
                                template: "#= prefix.html.chart.PnChart.prototype.formatnewABC(dataItem," + "\"" + vf + "\"" + " ) #"

         };

    }

}

result : see (kendo chart2.png)

Thanks in advance for your help

7 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 13 Jan 2017, 09:50 AM
Hello Michal,

In general, when the value of the Tooltip and the labels have to be formatted I can suggest using their template properties with combination with kendo.toString() method:

http://docs.telerik.com/kendo-ui/framework/globalization/numberformatting#number-formatting

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.labels.template

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-series.tooltip.template

Also, I can suggest checking our article for templates and escaping characters:

http://docs.telerik.com/kendo-ui/framework/templates/overview#templates-overview

I also made a Dojo example demonstrating different formatting and escaping:

http://dojo.telerik.com/ASuYu

I hope this is helpful.

Regards,
Stefan
Telerik by Progress
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.
0
Michal
Top achievements
Rank 1
answered on 15 Jan 2017, 12:03 PM

Hi Stefan,
Thanks for the answer, but I want to be more clear in my explanation.
First of all I wanted to say that I've seen all the links are attached, they do not helped me get to a solution.
I have an array of values I load into the chart (series data) , and another array with the same formatted values that I want to represent in the tooltip and label. 

Thank you for your attention

0
Stefan
Telerik team
answered on 17 Jan 2017, 03:49 PM
Hello Michal,

Thank you for the clarification.

I can assume that the desired result is to have a second array only with the formatted data. If that is correct, the data can be accessed by using a function inside the template, but the data will not be mapped automatically, and a custom approach has to be used.

The other option is instead of having a second array, to have the formatted value as a field in the data object and to access it through the dataItem e.g. dataItem.formatedValue.

Regards,
Stefan
Telerik by Progress
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
Michal
Top achievements
Rank 1
answered on 18 Jan 2017, 11:06 AM

Hi Stefan,

please elaborate about this custom approach.

i have tried also to pass to the template (e.g. tooltip template) other variables other than the predefined ones, having the template call my function with these parameters.

When doing so, i see the template gets called for each tooltip assignment (for each data point) with the CORRECT values. However, when looking at the chart i see all tooltips (also label) show the value from the LAST data point for all data points.

0
Stefan
Telerik team
answered on 20 Jan 2017, 07:36 AM
Hello Michal,
 
The suggested custom approach is similar to the described approach with a function in the template.

As for the mismatch, I was not able to reproduce it on my end.

Could you please send a runnable example or modify the Dojo example to reproduce the scenario and the issue, and I will gladly investigate and assist further.

Regards,
Stefan
Telerik by Progress
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.
0
Michal
Top achievements
Rank 1
answered on 22 Jan 2017, 02:30 PM
Hi Stefan 
I made 2 examples, the first with regular format labels 
The first example of true values can be seen, however the second example the values are incorrect.
now i hope the scenario more clean than before
thanks

0
Stefan
Telerik team
answered on 25 Jan 2017, 06:51 AM
Hello Michal,

I noticed that in the provided example the numbers are not matching at all because of the different indexes.

The easier approach will be to add the formatted array values to the original data and display them on the Chart, to ensure that the order will be correct.

Please check the example demonstrating this:

http://dojo.telerik.com/ASuYu/2

Regards,
Stefan
Telerik by Progress
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.
Tags
Charts
Asked by
Michal
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Michal
Top achievements
Rank 1
Share this question
or