DataVisualization.Charting using ASP.NET and C#

As part of a recent SharePoint project, we have been needing to generate graphs/charts for inclusion on a webpage – as well as via code to save and include in a Microsoft Word document (DOCX).

The best option we found was the Microsoft .NET charting controls :

System.Web.UI.DataVisualization.Charting

To get this working within an ASP.NET project, I had to source information from a few blog posts – and it was a little tricky – so I thought I’d blog about it here.

(1) Within your Visual Studio WebApp Project, add a reference to the required DLL’s :

System.Web.DataVisualization

image

(2) Add an IMAGE placeholder control to your ASP.NET markup :

<asp:Image ID=”imgChart” runat=”server” />

(3) Within code, include the *using* statement, and then the necessary code for charting.   

using System.Web.UI.DataVisualization.Charting;

(4) The trick I found was to made sure the chart control did a ‘RenderControl’ – and then you can use the CurrentImageLocation reference.

private void ShowChart()
{
    // set up some data
    var xvals = new[]
    {
        new DateTime(2012, 4, 4),
        new DateTime(2012, 4, 5),
        new DateTime(2012, 4, 6),
        new DateTime(2012, 4, 7)
    };

    var yvals = new[] { 1,3,7,12 };

    // create the chart
    var chart = new Chart();
    chart.Height = 600;
    chart.Width = 600;
    chart.RenderType = RenderType.ImageTag;

    //set the chart properties
    var chartArea = new ChartArea();
    chartArea.AxisX.LabelStyle.Format = “dd/MMMnhh:mm”;
    chartArea.AxisX.MajorGrid.LineColor = Color.LightGray;
    chartArea.AxisY.MajorGrid.LineColor = Color.LightGray;
    chartArea.AxisX.LabelStyle.Font = new Font(“Consolas”, 8);
    chartArea.AxisY.LabelStyle.Font = new Font(“Consolas”, 8);
    chart.ChartAreas.Add(chartArea);

    var series = new Series();
    series.Name = “Series1”;
    series.ChartType = SeriesChartType.FastLine;
    series.XValueType = ChartValueType.DateTime;
    chart.Series.Add(series);

    // bind the datapoints
    chart.Series[“Series1”].Points.DataBindXY(xvals, yvals);

    // render to a HTML writer
    StringWriter sw = new StringWriter();
    HtmlTextWriter hw = new HtmlTextWriter(sw);
    chart.RenderControl(hw);

    //can now grab the URL to the asp:image
    imgChart.ImageUrl = chart.CurrentImageLocation;

}

(5) Run the solution – and you should see the page like this :

image

** Many thanks to the TIM BARRASS for the following post for much of the details – was just the ‘ASP.NET’ aspect that I had to work out – his blogpost was using the Windows.Forms components.  

The bits in RED above are the main differences.

Creating a chart programmatically in C# using DataVisualization.Charting

Advertisements

One thought on “DataVisualization.Charting using ASP.NET and C#

  1. I know this was written a long time ago, but I’ve been struggling getting charting to work properly, and this is exactly what I needed. A decent base example of a fully programmatically generated chart. Thank you so much.

    Liked by 1 person

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