ASP.NET MVC Chart Setup

Home >Shield UI Documentation >Chart >ASP.NET MVC >ASP.NET MVC Chart Setup

ShieldChart for ASP.NET MVC is a server-side wrapper component implemented in the ASP.NET MVC HTML helper pattern. Getting started with the component is a breeze. Simply add a reference to the Shield.Mvc.UI assembly in your ASP.NET MVC 3 or MVC 4 project and add the Shield.Mvc.UI namespace to the <pages> node of the <system.web.webpages.razor> section in your ~/Views/Web.config configuration file:

<?xml version="1.0"?>

<configuration>
  <configSections>
    <sectionGroup name="system.web.webPages.razor" type="System.Web.WebPages.Razor.Configuration.RazorWebSectionGroup, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
      <section name="host" type="System.Web.WebPages.Razor.Configuration.HostSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
      <section name="pages" type="System.Web.WebPages.Razor.Configuration.RazorPagesSection, System.Web.WebPages.Razor, Version=2.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" />
    </sectionGroup>
  </configSections>

  <system.web.webPages.razor>
    <host factoryType="System.Web.Mvc.MvcWebRazorHostFactory, System.Web.Mvc, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
    <pages pageBaseType="System.Web.Mvc.WebViewPage">
      <namespaces>
        <add namespace="System.Web.Mvc" />
        <add namespace="System.Web.Mvc.Ajax" />
        <add namespace="System.Web.Mvc.Html" />
        <add namespace="System.Web.Optimization"/>
        <add namespace="System.Web.Routing" />
        <add namespace="Shield.Mvc.UI"/>
      </namespaces>
    </pages>
  </system.web.webPages.razor>
...

Since the ShieldChart is a wrapper of javascript chart component you need to include the references to the CSS and JavaScript resources in the HEAD section of your webpage:

<head >
<link rel="stylesheet" type="text/css" href="css/light/all.min.css" />
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/shieldui-all.min.js" type="text/javascript"></script>
  
</head>

The javascript resources for client side component you can find on the download page under “ShieldUI JavaScript” section.

Now your Razor views are ready to use the ShieldChart extension methods. In your .cshtml view file the @Html helper now provides the ShieldChart extension method that is the entry point to defining a chart widget:

//the simplest chart definition
@(Html.ShieldChart()
    .Name("myChart")
    .PrimaryHeader(header => header.Text("Hello from a Shield Chart"))
    .DataSeries(series => series.Line().Data(new object[] { 1, 3, 2, 4 })))

This documentation describes the usage of ShielChart for ASP.NET MVC with the Razor view engine, but you are free to use any familiar ASP.NET MVC view engine, including WebForms:

<%: Html.ShieldChart()
    .Name("myChart")
    .PrimaryHeader(header => header.Text("Hello from a Shield Chart"))
    .DataSeries(series => series.Line().Data(new object[] { 1, 3, 2, 4 })) %>

ShieldChart for ASP.NET MVC follows the MVC helper pattern by providing a set of chainable methods that configure the widget. The C# helper API is a 1:1 reflection of the JavaScript widget configuration, so you only have to get familiar with a single set of configuration options:

//JavaScript Area Chart Basic Usage demo
$(document).ready(function () {
    $("#chart").shieldChart({
        theme: ThemeChooser.theme,
        primaryHeader: {
            text: "GDP Changes per region"
        },
        exportOptions: {
            image: false,
            print: false
        },
        axisX: {
            categoricalValues: ["2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"]
        },
        dataSeries: [{
            seriesType: 'area',
            collectionAlias: "India",
            data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855]
        }, {
            seriesType: 'area',
            collectionAlias: "World - wide",
            data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
        }, {
            seriesType: 'area',
            collectionAlias: "Haiti",
            data: [-0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590]
        }]
    });
});

//ASP.NET MVC Area Chart Basic Usage demo
@(Html.ShieldChart()
    .Name("chart")
    .Theme(Request.Cookies.Theme())
    .PrimaryHeader(header => header.Text("GDP Changes per region"))
    .Export(false)
    .AxisX(axis => axis.CategoricalValues("2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011"))
    .DataSeries(series =>
        series.Area()
              .Name("India")
              .Data(new object[] { 3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855 }))
    .DataSeries(series => 
        series.Area()
              .Name("World - Wide")
              .Data(new object[] { 1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727 }))
    .DataSeries(series => 
        series.Area()
              .Name("Haiti")
              .Data(new object[] { -0.253, 0.362, -3.519, 1.799, 2.252, 3.343, 0.843, 2.877, -5.416, 5.590 })))

No matter whether you have a JavaScript-centric or MVC Helper-centric approach to building your UI, ShieldChart stays out of your way by providing a simple, consistent set of configuration options across languages. Choosing the ShieldChart MVC Helper additionally gives you model binding and IntelliSense support, helping you focus on your business logic rather than UI quirks.