If you’ve ever developed an application of any type, you know that the business function of that application is only half the story. Most business applications also have to take into mind that your business user is going to want reporting. As a developer I find reporting the most boring part of the development process, but it is becoming less and less painful for me as a developer to implement it into my applications. Within the last year Microsoft has released a charting addition to the .Net framework based on the Dundas charts package, but they only output static images. In most cases this is ok, but it doesn’t make for a very compelling experience. Open Flash Chart is one alternative to the .Net charting; it is interactive and dynamic, which can help you build those compelling interfaces that your clients look for. So the point of this walkthrough is to show you how to implement Open Flash Chart into your MVC application.

image

Step 1 – Download the Open Flash Chart package

Obviously you’ll need Open Flash Chart, you can download it from the Official Open Flash Chart. When you download it there is going to be a lot of files, but don’t worry about it I’ll tell you which ones you need.

Step 2 – Import The Files You Need

You are going to need two files at a minimum. There is a .Net library in the package but I’ll show you, you don’t need it. The first file is the open-flash-chart.swf. This file is the major component of the open flash chart package. I transferred this file directly into my content folder in my ASP.NET MVC project.

image

image

The next file you’ll need is the swfobject.js file, this will make placing your charts on the page much cleaner and simpler. Transfer this file into your scripts folder.

image

image

Step 3 – Integrating Open Flash Chart into your View

There are a couple things that I do to get Open Flash Chart into my view. I first modify my master page and add a new ContentPlaceHolder called “Scripts”. This allows me to inject custom scripts per view if necessary. My head tag in the master page looks like the following.

<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
    <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
    <script src="/Scripts/swfobject.js" type="text/javascript"></script>
    <asp:ContentPlaceHolder ID="Scripts" runat="server" />
</head>

The next step is to inject the Chart into the page. The following code does that.

<asp:Content ContentPlaceHolderID="Scripts" runat="server">
    <script type="text/javascript">
        swfobject.embedSWF(
              "/Content/open-flash-chart.swf", "my_chart", "550", "200",
              "9.0.0", "expressInstall.swf",
              { "data-file": "Home/GetData" }
              );
    </script>
</asp:Content>

Notice what is done here. You first point to the open-flash-chart.swf in your content folder. Next you specify the div you would like to inject the chart into. Thirdly, you specify the size. Right after that is about the flash version and the install if your client is missing flash on their machine. Lastly, the most important thing, the location of your data. Notice that it points to a controller action. I’ll show you how to code that next.

Step 4 – Data, Data, Data

A chart wouldn’t be a chart without data. This is where we will leverage the power of the newest .Net frameworks with anonymous types. Open Flash Chart uses JSON objects to create you chart, but we don’t want to spend hours creating a library or adding references to assemblies we don’t need. So I went ahead and created an action relating to the one seen above. The code looks like this.


        public JsonResult GetData()
        {
            var data = new
            {
                title = new { text = "Many data lines", style = "{font-size: 20px; color:#0000ff; font-family: Verdana; text-align: center;}" },
                y_legend = new { text = "Open Flash Chart", style = "{color: #736AFF; font-size: 12px;}" },
                elements = new object[] {
                        new { type = "bar", alpha = 0.5, colour = "#9933CC", text = "Page views", values = new []   {9,6,7,9,5,7,6,9,7}},
                        new { type = "bar", alpha = 0.5, colour = "#CC9933", text = "Page views 2", values =  new [] {6,7,9,5,7,6,9,7,3}}
                },
                x_axis = new { stroke = 1, tick_height = 10, colour = "#d000d0", grid_colour = "#00ff00",
                    labels = new {
                        labels = new[] { "January", "February", "March", "April", "May", "June", "July", "August", "Spetember" }
                    }
                },
                y_axis = new { stroke = 4, tick_length = 3, colour = "#d000d0",  grid_colour = "#00ff00", offset = 0, max = 20 }
            };

            var result = Json(data);

            // Allow Open Flash Chart to
            // make request for data through GET
            result.JsonRequestBehavior = JsonRequestBehavior.AllowGet;

            return result;
        }

There are two catches here. The first catch is that Open Flash Chart has some properties that have a dash in them, like “font-size”. The other problem is that Open Flash Chart does a GET Request for all data, that is why I have the funky code at the bottom of the action. Don’t forget to look at the Open Flash Chart documentation to get an idea of what you need to get your chart looking like you want it to.

Conclusion

So there you have it. Now you have integrated Open Flash Chart with the addition of two files and a new action. I love how easy it is to use this project in an Asp.net application. Look into the Open Flash Chart package, because I’m sure there are more and better ways to implement this charting package into your applications.