Edit this page

Display HTML and Execute JavaScript

Overview

You can display HTML in tooltips and/or execute JavaScript (i.e., declare variables,if statements, for loops, etc.) in ClientTemplate and SharedTemplate elements. You can find more information on these features in the sections below - Execute JavaScript with a ClientTemplate and Display HTML with a ClientTemplate.

Execute JavaScript with a ClientTemplate

ClientTemplates let you use JavaScript, following this pattern: "#if (condition) {# expression #}#".

  • If Statement:

    ASP.NET

    <telerik:RadHtmlChart ID="RadHtmlChart1" runat="server" Width="300px" Height="300px">
        <PlotArea>
            <Series>
                <telerik:PieSeries>
                    <LabelsAppearance>
                        <ClientTemplate>
    #if (percentage > 0.15) {# #=value# #} else {# 0 #} #
                        </ClientTemplate>
                    </LabelsAppearance>
                    <TooltipsAppearance>
                        <ClientTemplate>
    #if (percentage > 0.15) {# #=value# #} else {# 0 #} #
                        </ClientTemplate>
                    </TooltipsAppearance>
                    <SeriesItems>
                        <telerik:PieSeriesItem Y="30" />
                        <telerik:PieSeriesItem Y="60" />
                        <telerik:PieSeriesItem Y="10" />
                    </SeriesItems>
                </telerik:PieSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    

    Only PieSeries/DonutSeries items whose percentage of the whole is higher than 15% will display their actual value in tooltips and labels. The rest of the series items will display a zero value.

  • For Loop:

    ASP.NET

    <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800" Height="500">
        <PlotArea>
            <CommonTooltipsAppearance Shared="true">
                <SharedTemplate>
            <div>GDP in #= category #</div>
             # for (var i = 0; i < points.length; i++) { # 
            <div>#: points[i].series.name#: #: points[i].value #</div>
            # } #
                </SharedTemplate>
            </CommonTooltipsAppearance>
            <XAxis>
                <Items>
                    <telerik:AxisItem LabelText="1999"></telerik:AxisItem>
                    <telerik:AxisItem LabelText="2000"></telerik:AxisItem>
                </Items>
            </XAxis>
            <Series>
                <telerik:ColumnSeries Name="Transport">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="32735.7"></telerik:CategorySeriesItem>
                        <telerik:CategorySeriesItem Y="37911.3"></telerik:CategorySeriesItem>
                    </SeriesItems>
                </telerik:ColumnSeries>
                <telerik:ColumnSeries Name="Community">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="12453.9"></telerik:CategorySeriesItem>
                        <telerik:CategorySeriesItem Y="14394.3"></telerik:CategorySeriesItem>
                    </SeriesItems>
                </telerik:ColumnSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    

    The tooltip will display three lines of text. The first line shows the category and the next two lines show the Y-values of both items from this category.

  • Call a function

    ASP.NET

        <script>
            function formatLabel(number) {
                if (number < 1000)
                    return number;
                if (number < 1000000)
                    return number / 1000 + "K";
                if (number < 1000000000)
                    return number / 1000000 + "M";
            }
        </script>
        <telerik:RadHtmlChart runat="server" ID="BarChart1" Width="800px" Height="300px">
            <PlotArea>
                <YAxis>
                    <TitleAppearance Text="Quantity" />
                    <LabelsAppearance>
                        <ClientTemplate>
                            #= formatLabel(value) #
                        </ClientTemplate>
                    </LabelsAppearance>
                </YAxis>
                <Series>
                    <telerik:BarSeries Name="Product A">
                        <SeriesItems>
                            <telerik:CategorySeriesItem Y="100" />
                            <telerik:CategorySeriesItem Y="20000" />
                            <telerik:CategorySeriesItem Y="1000000" />
                        </SeriesItems>
                    </telerik:BarSeries>
                </Series>
            </PlotArea>
        </telerik:RadHtmlChart>
    

Display HTML with a ClientTemplate

ClientTemplate can render HTML from a data source following this syntax: "#: #". Figure 1 shows an example of using a ClientTemplate to render HTML in a tooltip.

Example 1: This example illustrates how to render and display HTML in tooltips.

<telerik:radhtmlchart runat="server" id="RadHtmlChart1" skin="Vista">
    <PlotArea>
        <Series>
            <telerik:ColumnSeries DataFieldY="myDataColumn">
                <TooltipsAppearance Color="White">
                    <ClientTemplate>
                        HTML is displayed: #:dataItem.myHTMLColumn# <br/> 
                        HTML is not displayed: #=dataItem.myHTMLColumn#
                    </ClientTemplate>
                </TooltipsAppearance>
            </telerik:ColumnSeries>
        </Series>
        <XAxis DataLabelsField="myLabelsColumn"></XAxis>
    </PlotArea>
</telerik:radhtmlchart>
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        RadHtmlChart1.DataSource = GetData();
        RadHtmlChart1.DataBind();
    }
}

protected DataTable GetData()
{
    DataTable tbl = new DataTable();
    tbl.Columns.Add(new DataColumn("myDataColumn"));
    tbl.Columns.Add(new DataColumn("myLabelsColumn"));
    tbl.Columns.Add(new DataColumn("myHTMLColumn"));
    tbl.Rows.Add(new object[] { 1, "item aaa", "<span>lorem ipsum 1</span>" });
    tbl.Rows.Add(new object[] { 2, "item bbb", "<span>lorem ipsum 2</span>" });
    tbl.Rows.Add(new object[] { 3, "item ccc", "<span>lorem ipsum 3</span>" });
    return tbl;
}
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        RadHtmlChart1.DataSource = GetData()
        RadHtmlChart1.DataBind()
    End If
End Sub

Protected Function GetData() As DataTable
    Dim tbl As New DataTable()
    tbl.Columns.Add(New DataColumn("myDataColumn"))
    tbl.Columns.Add(New DataColumn("myLabelsColumn"))
    tbl.Columns.Add(New DataColumn("myHTMLColumn"))
    tbl.Rows.Add(New Object() {1, "item aaa", "<span>lorem ipsum 1</span>"})
    tbl.Rows.Add(New Object() {2, "item bbb", "<span>lorem ipsum 2</span>"})
    tbl.Rows.Add(New Object() {3, "item ccc", "<span>lorem ipsum 3</span>"})
    Return tbl
End Function

Figure 1: Using a ClientTemplate to display HTML in a tooltip.

htmlchart-client Templates-display-html

important

Since tooltips are rendered as pure HTML and labels as part of the SVG/VML rendering, HTML can only be rendered inside tooltips.

note

You can use number formats inside Client Templates . You can find more information in this Formatting Numbers article in the section called Formatting Labels and Tooltips by Using their Client Templates.

See Also

Is this article helpful? No Yes
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy