Feeds:
Posts
Comments

Archive for September, 2012

Its been quite a while since my last post so I want to first welcome myself back before getting my hands dirty again. Welcome back me! Over the past few months I’ve shifted direction a bit from building desktop client apps with C#/WPF to creating web applications to support infrastructure at my company. Our platform of choice now is ASP.NET MVC 3 and I must say I like it quite a bit. Recently I was tasked with creating some charts on a webpage so our higher-ups could easily quantify/analyze/be confused by/or do who knows what with some of the data we have in our system. In order to simplify the task at hand, I figured why not just create a pie chart using static data and get that on a page, so here goes.

Once you have a new ASP.NET MVC 3 project created, add a new view to your /Views/Home folder and call it PieChart.cshtml. Copy and paste the code below into this new file:

@{
    DataSet myDataSet = new DataSet();
    DataTable myTable = myDataSet.Tables.Add();

    //-- Add columns to the data table
    myTable.Columns.Add("Department", typeof(string));
    myTable.Columns.Add("Number of Employees", typeof(int));

    //-- Add rows to the data table
    myTable.Rows.Add("Accounting", 7);
    myTable.Rows.Add("Purchasing", 17);
    myTable.Rows.Add("Shipping", 14);
    myTable.Rows.Add("Engineering", 25);
    myTable.Rows.Add("IT", 11);

    var dataView = new DataView(myDataSet.Tables[0]);

    var myChart = new Chart(width: 400, height: 400, themePath: "~/Content/CustomChartTheme.xml")
        .AddTitle("Employees / Department")
        .AddSeries("Default", chartType: "Pie",
                    xValue: dataView, xField: "Department",
                    yValues: dataView, yFields: "Number of Employees")
        .Write();
}

This will create a new DataSet for the pie chart that will allow us to visualize how many employees work in each department of the company. As you can see there are 5 departments and a total of 74 employees. After defining the DataSet we can declare a new Chart object. I think the code is quite self explanatory. The themePath parameter points to our custom theme file that I will discuss a bit later. However, out of the box, there are several themes you could use instead by using the theme parameter. They are as follows: blue, green, vanilla, vanilla3d, and yellow. Since I don’t like any of them, I’ll create a custom one later.

Now that we have our chart being created, we need to add an ActionResult method to the home controller that will return the proper view.


public ActionResult PieChart()
{
    return View();
}

This will show the chart on an empty page all by itself. However, we want to embed it in a specific webpage rather than have it sit all alone. For this simple example, we’re going to stick it into the /Views/Home/Index.cshtml page. You can drop it anywhere you like in the Index page by using the img source like so:

<img src="@Url.Action("PieChart")" />

Now when you run your project, you’ll see the pie chart embedded in the index page correctly.

Lastly, we’re going to set up the custom style mentioned previously. Create the CustomChartTheme.xml file and place it wherever you like in the project. For me, I put it in the Content folder, thus the themePath above is specified appropriately as: ~/Content/CustomChartTheme.xml. Paste the content below into the .xml file:

<pre><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></pre>

Now you’re probably wondering where I came up with that custom theme right? Well its essentially the same as one of the default themes you can find here. Why re-invent the wheel when you can base your new custom theme entirely on one Microsoft already created? Once you’ve tweaked your custom theme you should be able to run the application and see a nice little pie chart on your /Home/Index.cshtml page that is styled how you like it. Enjoy!

Advertisements

Read Full Post »