ASP.NET MVC: Charting Configuration and Example

As far as I know this is the minimum you need to get charting up and running under ASP.NET MVC 2/3. This works with the ASP ViewEngine only. This configuration is using the .NET 4 version of the libraries but it works with 3.5 as well. You would need to update the version numbers accordingly.

Global.asax
(Kept getting a 404 looking for ChartImg.axd until I added this)

public static void RegisterRoutes(RouteCollection routes)
{
    ...
    RouteTable.Routes.Ignore("{*pathInfo}", new { pathInfo = @"^.*(ChartImg.axd)$" });
    ...
}

Web.config

<system.web>
    <pages>
        <controls>
            ...
            <add tagPrefix="asp" namespace="System.Web.UI.DataVisualization.Charting" assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
            ...
        </controls>
    </pages>
    <compilation debug="true" targetFramework="4.0">
        <assemblies>
            ...
            <add assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            ...
        </assemblies>
    </compilation>    
    <httpHandlers>
        ...
        <add verb="*" path="ChartImg.axd" type="System.Web.UI.DataVisualization.Charting.ChartHttpHandler,System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>   
        ...
    </httpHandlers>
</system.web>

View

<%@ Import Namespace="System.Web.UI.DataVisualization.Charting" %>

<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
        <%
            var Chart2 = new Chart();
            Chart2.Width = 412;
            Chart2.Height = 296;
            Chart2.RenderType = RenderType.ImageTag;

            Chart2.Palette = System.Web.UI.DataVisualization.Charting.ChartColorPalette.BrightPastel;
            Title t = new Title("No Code Behind Page", Docking.Top, new System.Drawing.Font("Trebuchet MS", 14, System.Drawing.FontStyle.Bold), System.Drawing.Color.FromArgb(26, 59, 105));
            Chart2.Titles.Add(t);
            Chart2.ChartAreas.Add("Series 1");

   // create a couple of series
            Chart2.Series.Add("Series 1");
            Chart2.Series.Add("Series 2");
            
            // you can replace these and store them in viewdata or your own class (or build the whole control in the viewdata and pass it back to the page
            int[] series1 = { 1, 2, 3, 2, 1, 2, 3 };
            int[] series2 = { 3, 2, 1, 2, 3, 2, 1 };

            // add points to series 1
            foreach (int value in series1)
            {
                Chart2.Series["Series 1"].Points.AddY(value);
            }

            // add points to series 2
            foreach (int value in series2)
            {
                Chart2.Series["Series 2"].Points.AddY(value + 1);
            }

            Chart2.BorderSkin.SkinStyle = BorderSkinStyle.Emboss;
            Chart2.BorderColor = System.Drawing.Color.FromArgb(26, 59, 105);
            Chart2.BorderlineDashStyle = ChartDashStyle.Solid;
            Chart2.BorderWidth = 2;

            Chart2.Legends.Add("Legend1");

   // Render chart control
            Chart2.Page = this;
   HtmlTextWriter writer = new HtmlTextWriter(Page.Response.Output);
   Chart2.RenderControl(writer);
        %>
</asp:Content>

jQuery: Module Stub

jQuery module stub with basic namespace and function declarations. Not sure if this is the right way to do it. YMMV.

// usage $("selector").moduleStub(options);
(function ($) {
    $.fn.moduleStub = function (options) {
        return inlineEditor.init(this, options);
    };
})(jQuery);

var moduleStub = {
    el: {},
    options: {},
    init: function (el, options) {
        this.el = $(el);
        if (options) { $.extend(this.options, options); }
        return this;
    },
    test: function () {
        alert(this.el.attr("id"));
    }
}