Better Dashboards

Working with Microsoft enterprise chart, dashboard and reporting technologies.

How to Create a Sparkline Chart in ASP.NET

Posted by milang on February 21, 2010

In this post, I’ll show how to create a sparkline chart in ASP.NET using the Microsoft chart control.  Sparklines aren’t supported natively, but they can be implemented easily by stripping the chart down to its basic series.

Try dropping a new chart onto the Visual Studio design surface and use the code below as a starting point to generate a sparkline similar to the one shown above.


using System.Web.UI.DataVisualization.Charting
...

protected void Page_Load(object sender, EventArgs e)
 {
 // Generate random data
 Random rand = new Random();
 double high = rand.NextDouble() * 40;

 // Assign the random number to the chart to create 35 points
 for (int x = 0; x < 35; x++)
 Chart2.Series[0].Points.AddXY(DateTime.Now.AddDays(x), rand.Next(100, 200));

 // Start hiding both sets of axes, labels, gridlines and tick marks
 Chart2.ChartAreas[0].AxisX.LabelStyle.Enabled = false;
 Chart2.ChartAreas[0].AxisY.LabelStyle.Enabled = false;
 Chart2.ChartAreas[0].AxisX.MajorGrid.Enabled = false;
 Chart2.ChartAreas[0].AxisY.MajorGrid.Enabled = false;
 Chart2.ChartAreas[0].AxisX.MajorTickMark.Enabled = false;
 Chart2.ChartAreas[0].AxisY.MajorTickMark.Enabled = false;
 Chart2.ChartAreas[0].AxisX.LineWidth = 0;
 Chart2.ChartAreas[0].AxisY.LineWidth = 0;

 // Sparklines use the 'Spline' chart type to show a smoother trend with a line chart
 Chart2.Series[0].ChartType = SeriesChartType.Spline;

 // Since the line is the only thing you see on the chart, you might want to
 // increase its width.  Interestingly, you need to set the BorderWidth property
 // in order to accomplish that.
 Chart2.Series[0].BorderWidth = 2;

 // Re-adjust the size of the chart to reduce unnecessary white space
 Chart2.Width = 400;
 Chart2.Height = 100;
 }

I see why sparklines are popular but frankly, I’m not a big fan of them.  Charts should have context to understand what the trend line really means.  The “fast food” approach to data visualization will only lead to more confusion in the long run.  Finding easier ways to understand data is cool, but sometimes I feel that we’re just getting lazy as dashboard writers, compromising the difficulties of scientifically analyzing data in favor of quickly finding a pattern.  I can appreciate what Tufte was trying to get at with sparklines, but keep in mind that his use case will not work in all cases.

Anyway, rant over – enjoy your sparklines.  🙂  Feel free to post questions if this is unclear.

Advertisements

10 Responses to “How to Create a Sparkline Chart in ASP.NET”

  1. Simon said

    Hiya,

    this is very useful, the sparkline exactly I was after. Unfortunately I am novice in this arena and trying to find a way add this code to my report. I’m using SQL 2005 reporting services. I am developing report under MS BID but cannot find a wya to add above code. please can you help?

    Simon.

  2. milang said

    Hi Simon,
    Sparklines require the ability to show/hide certain chart elements (legend, axis line, grid lines, etc.) and this is not supported out-of-the-box in SQL RS 2005. The MSFT RS team began to provide these types of features in SQL 2008 after expanding its data visualization capabilities. If you need to create sparklines using the *latest* version of SQL RS, there is a tutorial on MSDN describing how to add a sparkline to your report using the new standalone Report Builder tool that shipped as part of SQL 2008 R2: http://msdn.microsoft.com/en-us/library/ff519545.aspx. Hope this helps.

    -Milan

  3. Srinivas said

    Thanks a lot for the post. Is it possible to show (x,y) on the trend where the y value is low and high?

  4. […] at the Better Dashboards Blog, they provide some sample code for calling the chart API.  The following shows how to make it reusable for your MVC […]

  5. Adrian Malong said

    Tufte’s theory on sparklines is a great read for when and how they can be used effectively. Just like any other tool they can be abused if used improperly. If you view this link http://www.edwardtufte.com/bboard/q-and-a-fetch-msg?msg_id=0001OR you’ll see that his examples do use sparklines in conjunction with the proper context to gain insight from the graphic. Typically when designing dashboards I’ll put enough details to glean knowledge at the glance while allowing drilldowns and drillthroughs if the business user wants to get at a lower granularity of data. I really don’t think sparklines were meant to solve all use cases and none of his writing ever said so. Anyways, counter rant over and thanks for posting the code above. I’m just starting to learn .NET in a BI context and it’s going to be very helpful.

    Cheers

  6. rg443 said

    Reblogged this on rg443blog and commented:
    asp.net sparkline

  7. Vikramaditya said

    thanks dude… it made my work easy and simple

  8. […] Answer is here: https://betterdashboards.wordpress.com/2010/02/21/how-to-create-a-sparkline-chart-in-asp-net/ […]

  9. […] at the Better Dashboards Blog, they provide some sample code for calling the chart API.  The following shows how to make it reusable for your MVC […]

  10. I am lucky that I detected this website, exactly the right info that I was looking for!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: