Chart Helper in ASP.NET MVC 3 with Transparent Background

    Introduction:
          ASP.NET MVC 3 includes some new helper methods that are used for different purposes. Chart helper method is one them, which makes it very easy to create charts in ASP.NET MVC. In this article, I will show you how you can use Chart helper in ASP.NET MVC. I will also show you how to use the themes provided by ASP.NET MVC to style your charts.  Then I will show how to create a custom theme for making your chart background as transparent.

    Description:

          First of all, create a new ASP.NET MVC 3 application. Then add an action method named MyChart to your controller,

public ActionResult MyChart()
        {
            var bytes = new Chart(width: 400, height: 200)
                .AddSeries(
                    chartType: "bar",
                    xValue: new[] { "Math", "English", "Computer", "Urdu" },
                    yValues: new[] { "60", "70", "68", "88" })
                .GetBytes("png");
            return File(bytes, "image/png");
        }

          Then add an img tag inside your view and set the src attribute to point this action method,

<img src="@Url.Action("MyChart")" alt="SimpleChart" />

          Now run this application, you will see the following screen,

          

          

         

          The above screenshot shows you a chart with default theme. Now, add a Yellow theme to your chart, 

public ActionResult MyChart()
        {
            var bytes = new Chart(width: 400, height: 200, theme:ChartTheme.Yellow)
                .AddSeries(
                    chartType: "bar",
                    xValue: new[] { "Math", "English", "Computer", "Urdu" },
                    yValues: new[] { "60", "70", "68", "88" })
                .GetBytes("png");
            return File(bytes, "image/png");
        }

          Run this application again, you will see the following screen,

          

          The above screenshot shows you a chart with Yellow theme. This also shows that how easily you can change the theme of your chart. Now, let's add a custom theme which set the background color of your chart to transparent, 

public ActionResult MyChart()
        {
            string myTheme =
                           @"<Chart BackColor=""Transparent"" >
                                            <ChartAreas>
                                                <ChartArea Name=""Default"" BackColor=""Transparent""></ChartArea>
                                            </ChartAreas>
                                        </Chart>";
            var bytes = new Chart(width: 400, height: 200, theme: myTheme)
                .AddSeries(
                    chartType: "bar",
                    xValue: new[] { "Math", "English", "Computer", "Urdu" },
                    yValues: new[] { "60", "70", "68", "88" })
                .GetBytes("png");
            return File(bytes, "image/png");
        }

          Run this application again, you will see the following screen, 

          

          The above screenshot shows you a chart with transparent background color. In addition to changing the background color of your chart, you can also change the gradient, border, rotation, line color, etc. Here are some themes provided by ASP.NET MVC by default, which gives you the idea how to style your charts.

  

public static class ChartTheme {
        // Review: Need better names.

        public const string Blue =
@"<Chart BackColor=""#D3DFF0"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""26, 59, 105"" BorderlineDashStyle=""Solid"" BorderWidth=""2"" Palette=""BrightPastel"">
    <ChartAreas>
        <ChartArea Name=""Default"" _Template_=""All"" BackColor=""64, 165, 191, 228"" BackGradientStyle=""TopBottom"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"" /> 
    </ChartAreas>
    <Legends>
        <Legend _Template_=""All"" BackColor=""Transparent"" Font=""Trebuchet MS, 8.25pt, style=Bold"" IsTextAutoFit=""False"" /> 
    </Legends>
    <BorderSkin SkinStyle=""Emboss"" /> 
  </Chart>";

        public const string Green =
@"<Chart BackColor=""#C9DC87"" BackGradientStyle=""TopBottom"" BorderColor=""181, 64, 1"" BorderWidth=""2"" BorderlineDashStyle=""Solid"" Palette=""BrightPastel"">
  <ChartAreas>
    <ChartArea Name=""Default"" _Template_=""All"" BackColor=""Transparent"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"">
      <AxisY LineColor=""64, 64, 64, 64"">
        <MajorGrid Interval=""Auto"" LineColor=""64, 64, 64, 64"" />
        <LabelStyle Font=""Trebuchet MS, 8.25pt, style=Bold"" />
      </AxisY>
      <AxisX LineColor=""64, 64, 64, 64"">
        <MajorGrid LineColor=""64, 64, 64, 64"" />
        <LabelStyle Font=""Trebuchet MS, 8.25pt, style=Bold"" />
      </AxisX>
      <Area3DStyle Inclination=""15"" IsClustered=""False"" IsRightAngleAxes=""False"" Perspective=""10"" Rotation=""10"" WallWidth=""0"" />
    </ChartArea>
  </ChartAreas>
  <Legends>
    <Legend _Template_=""All"" Alignment=""Center"" BackColor=""Transparent"" Docking=""Bottom"" Font=""Trebuchet MS, 8.25pt, style=Bold"" IsTextAutoFit =""False"" LegendStyle=""Row"">
    </Legend>
  </Legends>
  <BorderSkin SkinStyle=""Emboss"" />
</Chart>";

        public const string Vanilla =
@"<Chart Palette=""SemiTransparent"" BorderColor=""#000"" BorderWidth=""2"" BorderlineDashStyle=""Solid"">
<ChartAreas>
    <ChartArea _Template_=""All"" Name=""Default"">
            <AxisX>
                <MinorGrid Enabled=""False"" />
                <MajorGrid Enabled=""False"" />
            </AxisX>
            <AxisY>
                <MajorGrid Enabled=""False"" />
                <MinorGrid Enabled=""False"" />
            </AxisY>
    </ChartArea>
</ChartAreas>
</Chart>";

        public const string Vanilla3D =
@"<Chart BackColor=""#555"" BackGradientStyle=""TopBottom"" BorderColor=""181, 64, 1"" BorderWidth=""2"" BorderlineDashStyle=""Solid"" Palette=""SemiTransparent"" AntiAliasing=""All"">
    <ChartAreas>
        <ChartArea Name=""Default"" _Template_=""All"" BackColor=""Transparent"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"">
            <Area3DStyle LightStyle=""Simplistic"" Enable3D=""True"" Inclination=""30"" IsClustered=""False"" IsRightAngleAxes=""False"" Perspective=""10"" Rotation=""-30"" WallWidth=""0"" />
        </ChartArea>
    </ChartAreas>
</Chart>";

        public const string Yellow =
@"<Chart BackColor=""#FADA5E"" BackGradientStyle=""TopBottom"" BorderColor=""#B8860B"" BorderWidth=""2"" BorderlineDashStyle=""Solid"" Palette=""EarthTones"">
  <ChartAreas>
    <ChartArea Name=""Default"" _Template_=""All"" BackColor=""Transparent"" BackSecondaryColor=""White"" BorderColor=""64, 64, 64, 64"" BorderDashStyle=""Solid"" ShadowColor=""Transparent"">
      <AxisY>
        <LabelStyle Font=""Trebuchet MS, 8.25pt, style=Bold"" />
      </AxisY>
      <AxisX LineColor=""64, 64, 64, 64"">
        <LabelStyle Font=""Trebuchet MS, 8.25pt, style=Bold"" />
      </AxisX>
    </ChartArea>
  </ChartAreas>
  <Legends>
    <Legend _Template_=""All"" BackColor=""Transparent"" Docking=""Bottom"" Font=""Trebuchet MS, 8.25pt, style=Bold"" LegendStyle=""Row"">
    </Legend>
  </Legends>
  <BorderSkin SkinStyle=""Emboss"" />
</Chart>";
    }

          Note that from these chart themes, Yellow theme used in above example.  

   Summary:

          Chart helper makes it very easy to show chart in your ASP.NET MVC application. In this article, I showed you how to create a chart in ASP.NET MVC. I also showed you how to style a chart and how to change the background color of a chart. Hopefully you will enjoy this article too.