.NET Zone is brought to you in partnership with:

I am developer and technology maniac who is working on Microsoft and PHP technologies. I have ASP.NET MVP title and I hold MCAD, MCSD and MCTS certificates. When I have free time I usually play with new technologies, hack something, read books, participate in communities and speak in events. I am also active blogger and my ASP.NET blog is the place you can find some interesting reading about my discoveries and personal thoughts. Gunnar is a DZone MVB and is not an employee of DZone and has posted 140 posts at DZone. You can read more from them at their website. View Full User Profile

ASP.NET MVC: Creating User Configurable Charts

07.30.2012
| 3372 views |
  • submit to reddit

Although summer here is awful and nice at same time, it’s time to blog. Couple of years ago I wrote about how to use MS Chart control in ASP.NET MVC projects. Now let’s extend my solution and let’s add support for simple chart modifications. I used this solution in one of my projects to let users visualize their data better.

Extending IReportControl interface

Although it is possible to create new interface that extends IReportControl interface I found it better for my solution to modify IReportControl. Here is my new IReportControl interface:

public interface IReportControl : IDisposable
{
     int ChartStyle { set; }
     int ChartType { set; }
     bool Enable3D { set; }

     void DataBind();
     object DataSource { set; }
     void SaveChartImage(Stream stream);
}


We have now three new options:

  • Enable3D - show chart as 3D
  • ChartStyle - set chart style
  • ChartType - set chart type

Now let’s fit these new options to our charting solution.

Code behind chart controls

Now we have to modify code behind chart controls so it implements our new interface. This code is not very fool proof by every aspect but it thin enough to visualize you what we are doing.

public partial class SalaryStatsByLevelsChart : UserControl, ISalaryStatsByLevelsChart

{

    public override void DataBind()

    {

        base.DataBind();

        Chart1.DataBind();

    }

 

    public object DataSource

    {

        set

        {

            Chart1.DataSource = value;

        }

    }

 

    public void SaveChartImage(Stream stream)

    {

        Chart1.SaveImage(stream);

    }

 

    public int ChartType

    {

        set

        {

            foreach (var serie in Chart1.Series)

            {

                serie.ChartType = (SeriesChartType)value;

            }

        }

    }

 

    public bool Enable3D

    {

        set

        {

            Chart1.ChartAreas[0].Area3DStyle.Enable3D = value;

        }

    }

 

    public int ChartStyle

    {

        set

        {

            Chart1.Palette = (ChartColorPalette)value;

        }

    }

}

Here you can see clearly why I defined only setters for new properties – I don’t ask values of these properties from chart. I only set these values.

Updating ChartLoader class

In my previous post I created ChartLoader class that has only one method – SaveChartImage(). Now we are standing on cross-road:

  • We can modify this method and add new arguments to its signature,
  • We can modify ChartLoader class to just load control and after we have made modifications we need we will use overload of SaveChartImage() that accepts IReportControl.

I choose simpler way and modify the signature of SaveChartImage() method:

public static class ChartLoader

{

    public static void SaveChartImage(string controlLocation,
        IEnumerable data, Stream stream,

        int chartType, int chartStyle, bool enable3D)

    {

        using (var page = new Page())

        using (var control = (IReportControl)page.LoadControl("~/Charts/" + controlLocation))

        {

            control.ChartType = chartType;

            control.ChartStyle = chartStyle;

            control.Enable3D = enable3D;

 

            control.DataSource = data;

            control.DataBind();

            control.SaveChartImage(stream);

        }

    }

}

Now SaveChartImage() makes some dirty work for us and our application don’t care about how exactly charts are modified.

Example

Here is the example result of my chart with display options:

 Configurable chart

Now users can select options and decide how they want charts to be shown – 2D or 3D, what color scheme to use and what type of chart is best to visualize their data.

Published at DZone with permission of Gunnar Peipman, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: