Telerik blogs

Overview

Showing data trends in a dashboard scenario with multiple charts where the drawing area is limited is no longer a problem. The introduction of sparklines in Telerik’s ASP.NET Chart based on HTML5 allows you to create small and compact charts without unnecessary appearance elements to ensure seamless experience.

What is a sparkline?

A sparkline is a small chart, which is drawn without most standard chart elements, such as axes, labels, legend items, etc. It is often embedded in texts, tables or headings and multiple sparklines are usually used in a group to show a data trend.

Creating a sparkline in RadHtmlChart

All you need to do in order to create a sparkline in Telerik’s ASP.NET Chart based on HTML5 is to set the Layout property to “Sparkline” and the built-in functionality will do the rest for you:

<telerik:RadHtmlChart Layout="Sparkline" ID="RadHtmlChart1" runat="server">
    <%--Your RadHtmlChart configuration--%>
</telerik:RadHtmlChart>

 
This means that converting your current charts to sparklines could be done in no time. Furthermore, sparklines are configured in exactly the same way as standard charts.

Sparkline series in RadHtmlChart for ASP.NET AJAX

 RadHtmlChart’s series types which are supported in a sparkline layout are:

These series types share common appearance settings which make them applicable in a sparkline scenario.

How to Display data in RadGrid with sparklines

Let’s say that we want to display information about the Summer Olympics medals won by countries from 1984 to 2012 in Telerik’s ASP.NET DataGrid using RadHtmlChart’s sparklines. The final result should look like:

 

RadGrid’s configuration

We will use a RadGrid’s MasterTableView to visualize the data in a nice way that will take only a moment to set up. Here are the three columns we want:

  • Country – specifies the country’s name
  • Medals – visualizes medal’s statistics with sparklines
  • Total medals count – shows the total sum of Olympic medals won by the given country

As we would like to show a more detailed medals statistics based on the medal’s type won by a country, we will expand a GridTableView for each one of them.

MasterTableView’s configuration

In order to display a sparkline, we should create a RadHtmlChart with Layout=”Sparkline” in the ItemTemplate of a GridTemplateColumn:

<MasterTableView>
    <Columns>
        <telerik:GridBoundColumn HeaderText="Country"></telerik:GridBoundColumn>
        <telerik:GridTemplateColumn HeaderText="Medals">
            <ItemTemplate>
                <telerik:RadHtmlChart ID="PieChart" runat="server" Layout="Sparkline" Height="50"></telerik:RadHtmlChart>
            </ItemTemplate>
        </telerik:GridTemplateColumn>
        <telerik:GridBoundColumn HeaderText="Total medals count"></telerik:GridBoundColumn>
    </Columns>
    <%--Remaining RadGrid’s configuration --%>
</MasterTableView>

Now, we just need to databind the chart to an array in the code-behind to get the final result.

DetailTables’ configuration

For the detailed statistics about medals won by a country, we can use DetailTables. We will create three columns again:

  • Type – specifies one of the three medal’s types (gold, silver, bronze)
  • Medals trend – uses a sparkline to show the trend for the specific medal type
  • Count – shows the total count of the specific medal type
<DetailTables>
    <telerik:GridTableView>
        <Columns>
            <telerik:GridBoundColumn HeaderText="Type"></telerik:GridBoundColumn>
            <telerik:GridTemplateColumn HeaderText="Medals trend">
                <ItemTemplate>
                    <telerik:RadHtmlChart ID="AreaChart" runat="server" Layout="Sparkline" Width="150" Height="50"></telerik:RadHtmlChart>
                </ItemTemplate>
            </telerik:GridTemplateColumn>
            <telerik:GridBoundColumn HeaderText="Count"></telerik:GridBoundColumn>
        </Columns>
    </telerik:GridTableView>
</DetailTables>

Once again, we create a sparkline chart in the ItemTemplate of a GridTemplateColumn and we will databind it in the code-behind file.

Events’ configuration

We are almost done with the configuration, so what is left is RadGrid’s server-side events settings:

  • OnNeedDataSource – the event sets RadGrid’s datasource as a list of hard-coded data with medals’ statistics to make it simple for the demo)
  • OnDetailTableDataBind – the event sets the datasource for the GridTableView which is specific for the country that we have chosen by clicking on a RadGrid’s row
  • OnItemDataBound – this is the event that we will use to populate our sparklines with data

Databinding a sparkline in RadGrid’s OnItemDataBound event

In order to databind the sparkline, we will get it from the RadGrid first. This is very easy as we can use the GridItemEventArgs.Item.FindControl method like this:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
RadHtmlChart pieChart = e.Item.FindControl("PieChart") as RadHtmlChart;  
}

Now, we can create a chart series and databind the sparkline:

PieSeries pieSeries = new PieSeries();
pieChart.PlotArea.Series.Add(pieSeries);
pieChart.DataSource = data;
pieChart.DataBind();

What is left is to apply some appearance settings (such as appropriate colors for the series, proper RadGrid and sparklines dimensions, using the BlackMetroTouch skin, etc) to our demo to make it look nice and we are done! For detailed information about the visual configuration, you can have a look at the attached sample site.

Wrap-up

Sparklines are a very good improvement in RadHtmlChart as they are really useful in cases where charts’ dimensions are crucial (e.g. in a dashboard with limited drawing area). Do not hesitate to try them now, take advantage of their full potential and send us your ideas for improvements!

Telerik ASP.Net AJAX Controls - Download a trial version

About the Author

Stamo Gochev

Stamo Gochev is a software developer at Telerik's ASP.NET AJAX division, where he is responsible for the development of the RadHtmlChart. His main interests include ASP.NET, JavaScript, TDD and applying agile practices in his work. In his free time, Stamo likes to go out with friends and watch quiz shows.

Comments

Comments are disabled in preview mode.