Open Flash Charts for ASP.NET


I recently had to find a charting solution for a project at my internship. One solution was to use Open Flash Chart. The only problem is that there is very little documentation for using Open Flash Chart in ASP.NET. Also, I could not find any examples of OFC pulling from a database in ASP.NET. So, let’s take a look into what I had to do to get this working.

Languages and tools used:

Before we dive in, I want to show you what I ended up with.

To start, you will need to download the example Open Flash Chart solution from Prestige Development Group.

From the zip file, open the Quickstart folder and add the ‘aspnet_client’ folder and ‘OpenFlashChart.dll’ to your ASP.NET site. Now you need to register the new dll in any pages you want to use OFC on. To do this, just add the code below.

<%@ Register TagPrefix="ofc" Namespace="OpenFlashChart" Assembly="OpenFlashChart" %>

Next, add the following code where you want the chart on your webpage.

<ofc:Chart ID="FlashChart" Height="500" Width="550" runat="server" />

Now open the codebehind file for your page. First, you will need to add a new ‘using’ line to reference OFC.

using OpenFlashChart;

Next, we need to link the OFC we put on our page and tell it where to get the data from. The way I did this was by creating and referencing a standalone page to grab data. So, put this bit of code in your ‘Page_Load’ in the codebehind file.

FlashChart.Url = "data.aspx";

Now, we finally get to the real meat and potatoes of how to get OFC to work with ASP.NET. Your ‘data.aspx’ page can be blank, as we are not interested in any visuals with it. What we are interested in is the code behind file. In my case, we are working with ‘data.aspx.cs’.

IMPORTANT – All code from here on is C# code that will be placed in the ‘Page_Load’ function in ‘data.aspx.cs’.

To start, we need to establish and get data from the database.

Response.CacheControl = "no-cache";
// Establish the DB connection and run the query
string connectionString = "server=YourServerName;database=YourDB;uid=username;pwd=password";
SqlConnection mySqlConnection = new SqlConnection(connectionString);
string selectString = "Put your full query here";
SqlCommand mySqlCommand = mySqlConnection.CreateCommand();
mySqlCommand.CommandText = selectString;
SqlDataAdapter mySqlDataAdapter = new SqlDataAdapter();
mySqlDataAdapter.SelectCommand = mySqlCommand;
DataSet myDataSet = new DataSet();
mySqlConnection.Open();
string dataTableName = "Customers";
mySqlDataAdapter.Fill(myDataSet, dataTableName);
DataTable myDataTable = myDataSet.Tables[dataTableName];
mySqlConnection.Close();

Whew! That is a good chunk of code! Now we get to the fun stuff though! Here is the rest of the code to get the chart I was going for setup.

Graph Chart = new Graph();
// Here we define what kind of chart we want and colors to use
OpenFlashChart.Charts.ChartData temp = new OpenFlashChart.Charts.BarFilled(75, "#266656", "#000000");

// Here we setup how the labels on the X axis will look
Chart.LabelStyleX = new LabelStyleX(10, "0x000000", 2, 1, "0x000000");
// Here we add a title to the chart
Chart.Title = new Title("Total Leads By Campaign", "{font-size: 20px;}");

// Since the data is dynamic we need to figure out how to scale the chart
// To do this, we first pull in a column of data from the
//    datatable we created back in the DB connection segment
DataRow[] result = myDataTable.Select("Total >= 0", "Total desc");

// Now we declare a variable to find the highest value
int highestValue = 0;
// Now we loop through the datarow we just made and find the highest value
foreach (DataRow row in result)
{
	Chart.LabelsX.Add(row[0]);
	temp.Data.Add(Convert.ToInt32(row[1]));
	if (Convert.ToInt32(row[1]) > highestValue)
		highestValue = Convert.ToInt32(row[1]);
}
// Now we add a bit to the highest value so there is some spacing between the
//    data and the top of the chart
highestValue = highestValue + 10;
// Now we round it off to a nice number so we dont scale the chart based
//    on some number like 523
highestValue = highestValue + (highestValue % 5 > 0 ? (5 - highestValue % 5) : 0);
// Now we cast the MaxY to our highest value
Chart.MaxY = highestValue;

// Finally, we return the chart back to the page
Chart.Data.Add(temp);
Response.Write(Chart.ToString());

Note that you might not get the same results I did. Your dataset may vary from what I was using, so you will need to tweak my code to suite your needs. At least we finally have a guide on how to get OFC working with ASP.NET and databases!

  • Shailen

    Hi Mitchel,

    I have done same as you suggested, but one thing that I wanted a pie chart, so I used following lines,

    Chart.Pie = new OpenFlashChart.Charts.Pie(85, “#000000”, “Test”);

    And it was working properly, but all of a sudden, it has stopped working without any change done in code file.

    Can you guess, what could be the issue?

    Thanks,
    Shailen

  • It’s pretty hard to say what it is without looking at the code/page myself. If you only changed that line and filled in your connection info then I have two guesses. 1. You are using a WYSIWYG editor and it added in some extra code without you realizing it OR 2. Something happened with your server data source and it can’t read it.

  • mobi001

    sir when i try to add this code in my site the there occurs an error on the line

    temp.Data.Add(Convert.ToInt32(row[1]));

    that “System.FormatException: Input string was not in a correct format.”
    what may be the cause

  • Please check how many columns you have in datarow “row”. Am assuming you have just one column, so when you are trying to access row[1] it tries to access second column which doesn’t exist– which might be the reason you got the error.

  • Hi,
    Try to paste the code you have tried so far.
    Below code is one of the examples of pie chart i have tried.

    Response.CacheControl = “no-cache”;
    OpenFlashChart.Charts.Pie Piechart = new OpenFlashChart.Charts.Pie(60, “#505050”, “000000”);

    OpenFlashChart.Charts.Pie.Piece slice1 = new OpenFlashChart.Charts.Pie.Piece(10,”Monday”,”#ff0ff0″);

    OpenFlashChart.Charts.Pie.Piece slice2 = new OpenFlashChart.Charts.Pie.Piece(30, “Tuesday”, “#f08ff0”);

    OpenFlashChart.Charts.Pie.Piece slice3 = new OpenFlashChart.Charts.Pie.Piece(15, “Wednesday”, “#ff0e60”);

    OpenFlashChart.Charts.Pie.Piece slice4 = new OpenFlashChart.Charts.Pie.Piece(8, “Thursday”, “#600a60”);

    Piechart.Data.Add(slice1);
    Piechart.Data.Add(slice2);
    Piechart.Data.Add(slice3);
    Piechart.Data.Add(slice4);

    Response.Write(Piechart.ToString());

  • Nelson

    Hi, I need this line
    Chart.LabelStyleX = new LabelStyleX(10, “0x000000”, 2, 1, “0x000000”);

    in vb.net ?

  • It really should not be much different. Are you trying to use this is a different context or something? Can you post the error or surrounding code you have for VB?

  • Nelson

    thanks, my line in vb.net error showed me the color code, so change it to:

    chart.LabelStyleX = New LabelStyleX(8, “#0000FF”, 2, 1, “#FFFFFF”)

    and now it works fine

    another question is how I can update the data in the graph, use:
    chart.clear () but not working. Some way to refresh the chart?

  • Nelson

    thanks, but I want to reload the chart with the new values ​​and this is part of a webform, the webform provided data to plot, what happens is that after the show for the first time the chart, so you redo the process to provide new data, the first graph shows that position, that is not plot the new values ​​provided

  • Pingback: Google Chart API | Mitchel Burton()