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

BoxPlotSeries Tooltip label

4 Answers 94 Views
Chart (HTML5)
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 2
Joel asked on 15 Aug 2016, 05:40 PM
How do you change the text of the tooltip for the BoxPlotSeries?  We use the terms P10, P25 etc.  The q1, and lower terms would not be understood by the customer in this application.

4 Answers, 1 is accepted

Sort by
0
Accepted
Vessy
Telerik team
answered on 16 Aug 2016, 06:10 AM
Hi Joel,

The tooltips text and/or layout of RadHtmlChart can be controlled through a client template like explained here:
http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/functionality/clienttemplate/shared-template-for-tooltips

For example:
<telerik:RadHtmlChart runat="server" ID="BoxPlotChart" Width="800" Height="500" Skin="Silk">
    <PlotArea>
        <Series>
            <telerik:BoxPlotSeries
                DataLowerField="lower"
                DataQ1Field="q1"
                DataMedianField="median"
                DataQ3Field="q3"
                DataMeanField="mean"
                DataUpperField="upper"
                DataOutliersField="outliers">
                <TooltipsAppearance Color="White">
                    <ClientTemplate>
                            #=kendo.format(\'{0:N2}\',dataItem.q1)# <br />
                            #=kendo.format(\'{0:N2}\',dataItem.q3)#
                    </ClientTemplate>
                </TooltipsAppearance>
                ....

I hope this helps.

Regards,
Vessy
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Joel
Top achievements
Rank 2
answered on 16 Aug 2016, 02:37 PM

That is a great solution, thank you.

Is it possible to create the client template programatically? Bringing just the strings over didn't seem to work.  It doesn't seem I can create the boxplotseries without the upper and lower extremes, so I have to reuse the p25 and p75 values in that instance to hide the whiskers.  I would like to do the same for the tooltip and only show the values which I am displaying.

 

This is how my series is set up.

 

if (ShowExtremes == true)
            {
                boxPlot.DataLowerField = "P10";
                boxPlot.DataUpperField = "P90";
            }
            else
            {
                boxPlot.DataLowerField = "P25";
                boxPlot.DataUpperField = "P75";
            }
            
            boxPlot.DataQ1Field = "P25";
            boxPlot.DataMedianField = "P50";
            boxPlot.DataQ3Field = "P75";
            boxPlot.DataMeanField = "Avg";
             
            boxPlot.DataOutliersField = "outliers";

 

0
Joel
Top achievements
Rank 2
answered on 16 Aug 2016, 02:46 PM

I had failed to escape my "\".

For documentation purposes, this works;

if (ShowExtremes == true)
               {
                   boxPlot.DataLowerField = "P10";
                   boxPlot.DataUpperField = "P90";
                   boxPlot.TooltipsAppearance.ClientTemplate = "Avg: #=kendo.format(\\'{0:N2}\\',dataItem.Avg)# <br />" +
                "P10:  #=kendo.format(\\'{0:N0}\\',dataItem.P10)# <br /> " +
                        " P25:   #=kendo.format(\\'{0:N0}\\',dataItem.P25)# <br />" +
                    "P50: #=kendo.format(\\'{0:N0}\\',dataItem.P50)# <br />" +
                    "P75: #=kendo.format(\\'{0:N2}\\',dataItem.P75)# <br />" +
                    "P90: #=kendo.format(\\'{0:N2}\\',dataItem.P90)#";
               }
               else
               {
                   boxPlot.DataLowerField = "P25";
                   boxPlot.DataUpperField = "P75";
                   boxPlot.TooltipsAppearance.ClientTemplate = "Avg: #=kendo.format(\\'{0:N2}\\',dataItem.Avg)# <br />" +
                    " P25:   #=kendo.format(\\'{0:N0}\\',dataItem.P25)# <br />" +
                     "P50: #=kendo.format(\\'{0:N0}\\',dataItem.P50)# <br />" +
                     "P75: #=kendo.format(\\'{0:N2}\\',dataItem.P75)# <br />";
               }

0
Vessy
Telerik team
answered on 18 Aug 2016, 03:05 PM
Hi,

Thank you for sharing your solution with us, Joel. Let us know should any further questions on the matter occur.

Regards,
Vessy
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Tags
Chart (HTML5)
Asked by
Joel
Top achievements
Rank 2
Answers by
Vessy
Telerik team
Joel
Top achievements
Rank 2
Share this question
or