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.
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.
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.
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.
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:
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:
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.
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.
For the detailed statistics about medals won by a country, we can use DetailTables. We will create three columns again:
<
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.
We are almost done with the configuration, so what is left is RadGrid’s server-side events settings:
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.
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!
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.