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

BoxPlotSeries Tooltip label

4 Answers 132 Views

Chart (HTML5)

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

4 Answers, 1 is accepted

Accepted

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.

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";

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)# " +

"P10: #=kendo.format(\\'{0:N0}\\',dataItem.P10)# " +

" P25: #=kendo.format(\\'{0:N0}\\',dataItem.P25)# " +

"P50: #=kendo.format(\\'{0:N0}\\',dataItem.P50)# " +

"P75: #=kendo.format(\\'{0:N2}\\',dataItem.P75)# " +

"P90: #=kendo.format(\\'{0:N2}\\',dataItem.P90)#";

}