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

8 posts, 0 answers
  1. Michal
    Michal avatar
    5 posts
    Member since:
    Jan 2017

    Posted 11 Jan Link to this post

    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

  2. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 13 Jan Link to this post

    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 visualization (charts) and form elements.
  3. Michal
    Michal avatar
    5 posts
    Member since:
    Jan 2017

    Posted 15 Jan in reply to Stefan Link to this post

    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

  4. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 17 Jan Link to this post

    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.
  5. Michal
    Michal avatar
    5 posts
    Member since:
    Jan 2017

    Posted 18 Jan in reply to Stefan Link to this post

    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.

  6. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 20 Jan Link to this post

    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 visualization (charts) and form elements.
  7. Michal
    Michal avatar
    5 posts
    Member since:
    Jan 2017

    Posted 22 Jan in reply to Stefan Link to this post

    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

  8. Stefan
    Admin
    Stefan avatar
    1262 posts

    Posted 25 Jan Link to this post

    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.
Back to Top