BoxPlotSeries Tooltip label

5 posts, 1 answers
  1. Joel
    Joel avatar
    166 posts
    Member since:
    Oct 2006

    Posted 15 Aug Link to this post

    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.
  2. Answer
    Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 16 Aug Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Joel
    Joel avatar
    166 posts
    Member since:
    Oct 2006

    Posted 16 Aug in reply to Vessy Link to this post

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

     

  5. Joel
    Joel avatar
    166 posts
    Member since:
    Oct 2006

    Posted 16 Aug in reply to Joel Link to this post

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

  6. Vessy
    Admin
    Vessy avatar
    1389 posts

    Posted 18 Aug Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017