General Fixes and Updates to the .NET OpenFlashChart Control

We tried using the .NET version of the OpenFlashChart Control and found some frustrating nuances and bugs. We found this to be a very useful control, so it was worth my time to make some fixes. This write up describes some of the fixes that we made to overcome these issues. This write up applies to version 1.9.6 of the chart (dot-net-ofc-library), which can be downloaded here

Javascript error in Internet Explorer

If you can read Italian, there is a tutorial on the .NET version of the OpenFlashChart Control here. I don't speak Italian, but the solution to the javascript error that can be found in this tutorial.



The author suggests (I think) that a change be made to the Chart.cs file's RenderContents() function. The change is to add a sequence number to the ClientId in the three spots that it is referenced. We made a slightly different change in that we added "_1" to the client id so every reference to this property now looks like this.ClientID + "_1". Here is the code:

protected override void RenderContents(HtmlTextWriter output) { System.Text.StringBuilder sb = new System.Text.StringBuilder(); if (this.SequenceId == 0) { sb.Append(string.Format("<script type=\"text/javascript\" src=\"{0}/aspnet_client/OpenFlashChart/js/swfobject.js\"></script>", HttpRuntime.AppDomainAppVirtualPath)); } if (this.SWFObject) { sb.Append(string.Format("<div id=\"{0}\" />", this.ClientID + "_1")); sb.Append("<script type=\"text/javascript\">"); sb.Append(string.Format("var so = new SWFObject(\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf\", \"{1}\", \"{2}\", \"{3}\", \"9\", \"#FFFFFF\");", HttpRuntime.AppDomainAppVirtualPath, this.ClientID + "_1", this.Width, this.Height)); sb.Append(string.Format("so.addVariable(\"width\", \"{0}\");", this.Width)); sb.Append(string.Format("so.addVariable(\"height\", \"{0}\");", this.Height)); sb.Append(string.Format("so.addVariable(\"data\", \"{0}\");", this.Url)); sb.Append("so.addParam(\"allowScriptAccess\", \"sameDomain\");"); sb.Append(string.Format("so.write(\"{0}\");", this.ClientID + "_1")); sb.Append("</script>"); sb.Append("<noscript>"); } sb.Append("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\""); sb.Append(string.Format("width=\"{0}\" height=\"{1}\" id=\"chart_{2}\" align=\"middle\">", this.Width, this.Height, this.SequenceId)); sb.Append("<param name=\"allowScriptAccess\" value=\"sameDomain\" />"); sb.Append(string.Format("<param name=\"movie\" value=\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf?width={1}&height={2}&data={3}\" />", HttpRuntime.AppDomainAppVirtualPath, this.Width, this.Height, this.Url)); sb.Append("<param name=\"quality\" value=\"high\" />"); sb.Append("<param name=\"bgcolor\" value=\"#FFFFFF\" />"); sb.Append(string.Format("<embed src=\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf?data={1}\" quality=\"high\" bgcolor=\"#FFFFFF\" width=\"{2}\" height=\"{3}\" name=\"open-flash-chart\" align=\"middle\" allowScriptAccess=\"sameDomain\" ", HttpRuntime.AppDomainAppVirtualPath, this.Url, this.Width, this.Height)); sb.Append(string.Format("type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" id=\"embed_{0}\" />", this.SequenceId)); sb.Append("</object>"); if (this.SWFObject) sb.Append("</noscript>"); this.SequenceId++; output.Write(sb.ToString()); }

I get a Javascript error saying 'SWFObject' not found in Internet Explorer

I found this when I rolled my code from my development machine to my website. "It works in dev, so it must be the server". Well, not exactly. This has to do with RenderContents() in Chart.cs again. If you look where the relative paths for the javascript and flash objects are getting built, you'll see that HttpRuntime.AppDomainAppVirtualPath are getting prepended to the path. On my production site, this value was just "/", so the relative path to swfojbect.js was //aspnet_client/OpenFlashChart/js/swfobject.js. IE did not like the "//". I changed all calls from HttpRuntime.AppDomainAppVirtualPath and replaced it with this.Page.Request.ApplicationPath.TrimEnd('/'). This worked for both IE and Firefox. Here is the code for the function:

protected override void RenderContents(HtmlTextWriter output) { System.Text.StringBuilder sb = new System.Text.StringBuilder(); if (this.SequenceId == 0) { sb.Append(string.Format("<script type=\"text/javascript\" src=\"{0}/aspnet_client/OpenFlashChart/js/swfobject.js\"></script>", this.Page.Request.ApplicationPath.TrimEnd('/') )); } if (this.SWFObject) { sb.Append(string.Format("<div id="Div2" />", this.ClientID + "_1")); sb.Append("<script type=\"text/javascript\">"); sb.Append(string.Format("var so = new SWFObject(\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf\", \"{1}\", \"{2}\", \"{3}\", \"9\", \"#FFFFFF\");", this.Page.Request.ApplicationPath.TrimEnd('/') , this.ClientID + "_1", this.Width, this.Height)); sb.Append(string.Format("so.addVariable(\"width\", \"{0}\");", this.Width)); sb.Append(string.Format("so.addVariable(\"height\", \"{0}\");", this.Height)); sb.Append(string.Format("so.addVariable(\"data\", \"{0}\");", this.Url)); sb.Append("so.addParam(\"allowScriptAccess\", \"sameDomain\");"); sb.Append(string.Format("so.write(\"{0}\");", this.ClientID + "_1")); sb.Append("</script>"); sb.Append("<noscript>"); } sb.Append("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\""); sb.Append(string.Format("width=\"{0}\" height=\"{1}\" id="Object2" align=\"middle\">", this.Width, this.Height, this.SequenceId)); sb.Append("<param name=\"allowScriptAccess\" value=\"sameDomain\" />"); sb.Append(string.Format("<param name=\"movie\" value=\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf?width={1}&height={2}&data={3}\" />", this.Page.Request.ApplicationPath.TrimEnd('/') , this.Width, this.Height, this.Url)); sb.Append("<param name=\"quality\" value=\"high\" />"); sb.Append("<param name=\"bgcolor\" value=\"#FFFFFF\" />"); sb.Append(string.Format("<embed src=\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf?data={1}\" quality=\"high\" bgcolor=\"#FFFFFF\" width=\"{2}\" height=\"{3}\" name=\"open-flash-chart\" align=\"middle\" allowScriptAccess=\"sameDomain\" ", this.Page.Request.ApplicationPath.TrimEnd('/') , this.Url, this.Width, this.Height)); sb.Append(string.Format("type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" id=\"embed_{0}\" />", this.SequenceId)); sb.Append("</object>"); if (this.SWFObject) sb.Append("</noscript>"); this.SequenceId++; output.Write(sb.ToString()); }

Labels on the X axis don't show up!

We spent about an hour trying to figure out why the labels on the X axis of the chart were not displaying. At first we thought we had a bug in our data page. The bug has to do with the fact that the labels were not taken care of in the ToString() function of Graph.cs. So, I added this:

int labcount = 1; if (this.LabelsX.Count > 0) { sb.Append("&x_labels="); foreach (String labx in this.LabelsX) { sb.Append(labx); if (labcount != this.LabelsX.Count) sb.Append(","); labcount += 1; } sb.Append("&\r\n"); }

Here is the complete code for this function with my change in the middle:

public override string ToString() { StringBuilder sb = new StringBuilder(""); if (this.Title != null) sb.Append(this.Title.ToString()); if(this.LegendX != null) sb.Append(this.LegendX.ToString()); if(this.LabelStyleX != null) sb.Append(this.LabelStyleX.ToString()); if(this.TickSizeX > 0) sb.Append(string.Format("&x_ticks={0}&\r\n", this.TickSizeX)); if(this.AxisStepsX > 0) sb.Append(string.Format("&x_axis_steps={0}&\r\n", this.AxisStepsX)); if(this.LegendY != null) sb.Append(this.LegendY.ToString()); if (this.LegendYRight != null) sb.Append(this.LegendYRight.ToString()); if (this.LabelStyleY != null) sb.Append(this.LabelStyleY.ToString()); sb.Append(string.Format("&y_ticks=5,10,{0}&\r\n", this.StepsY)); // Lines/Data/Labels was here moving to object model. int labcount = 1; if (this.LabelsX.Count > 0) { sb.Append("&x_labels="); foreach (String labx in this.LabelsX) { sb.Append(labx); if (labcount != this.LabelsX.Count) sb.Append(","); labcount += 1; } sb.Append("&\r\n"); } string suffix = ""; for (int i = 0; i < this.Data.Count; i++) { if(i > 0) suffix = string.Format("_{0}", i + 1); Type chart = this.Data[i].GetType(); if (chart == typeof(Charts.Bar)) sb.Append(string.Format("&bar{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.BarFilled)) sb.Append(string.Format("&filled_bar{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.AreaHollow)) sb.Append(string.Format("&area_hollow{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.LineHollow)) sb.Append(string.Format("&line_hollow{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.LineDot)) sb.Append(string.Format("&line_dot{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.Line)) sb.Append(string.Format("&line{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.Bar3D)) sb.Append(string.Format("&bar_3d{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.BarFade)) sb.Append(string.Format("&bar_fade{0}={1}", suffix, this.Data[i].ToString())); else if (chart == typeof(Charts.BarGlass)) sb.Append(string.Format("&bar_glass{0}={1}", suffix, this.Data[i].ToString())); sb.Append(string.Format("&values{0}=", suffix)); for (int j = 0; j < this.Data[i].Data.Count; j++) if (j == 0) sb.Append(this.Data[i].Data[j]); else sb.Append(string.Format(",{0}", this.Data[i].Data[j])); sb.Append("&\r\n"); } sb.Append(string.Format("&y_min={0}&\r\n", this.MinY)); sb.Append(string.Format("&y_max={0}&\r\n", this.MaxY)); if(this.MaxY2 != 0) sb.Append(string.Format("&y2_max={0}&\r\n", this.MaxY2)); if(this.MinY2 != 0) sb.Append(string.Format("&y2_min={0}&\r\n", this.MinY2)); if(this.BgColor.Length > 0) sb.Append(string.Format("&bg_colour={0}&\r\n", this.BgColor)); if(this.BgImage != null) sb.Append(BgImage.ToString()); if (this.AxisColorX.Length > 0) { sb.Append(string.Format("&x_axis_colour={0}&\r\n", this.AxisColorX)); sb.Append(string.Format("&x_grid_colour={0}&\r\n", this.GridColorX)); } if (this.AxisColorY.Length > 0) sb.Append(string.Format("&y_axis_colour={0}&\r\n", this.AxisColorY)); if (this.GridColorY.Length > 0) sb.Append(string.Format("&y_grid_colour={0}&\r\n", this.GridColorY)); if (this.AxisColorYRight.Length > 0) sb.Append(string.Format("&y2_axis_colour={0}&\r\n", this.AxisColorYRight)); if (this.AxisX3D != 0) sb.Append(string.Format("&x_axis_3d={0}&\r\n", this.AxisX3D)); if (this.InnerBg != null) sb.Append(this.InnerBg.ToString()); if (this.Pie != null) sb.Append(this.Pie.ToString()); if (this.ToolTip.Length > 0) sb.Append(string.Format("&tool_tip={0}&\r\n", this.ToolTip)); return sb.ToString(); }

A bug in LabelStyle.cs

A recurring theme in some of the bugs we found have to do with the ToString() functions. There is a subtle one in LabelStyle.cs with the instantiation of the StringBuilder. The Size property is of type int, so the original code sets the capacity of the StringBuilder. However, I think the intention was to initialize the StringBuilder with the string value of Size. We found this once we started to see the X axis labels with the fix listed in the section above. Here is the ToString() function for LabelStyle.cs (the change is this.Size.ToString() ):

public override string ToString() { StringBuilder sb = new StringBuilder( this.Size.ToString()); if (this.Color.Length > 0) sb.Append(string.Format(",{0}", this.Color)); return sb.ToString(); }

Null references in the ToString() functions

Let's keep going with ToString() bugs. Well, it's not really a bug per se, but too much confidence is placed on the consumer of this control to set every string property of the classes. A lot of the constructors in the OpenFlashChart Control library are overloaded. This is always useful, but the problem is that there are cases when the class contains strings that are initialized with null. This is fine if you assume that the library consumer will think to set these properties before ToString() executes, but it wasn't fine for me because I didn't set all of the properties. Let's just look at LabelStylex.cs as an example. This class has a property called GridColor, which is not required in 4 of the 5 constructors. The problem is that we did not set this property, so when ToString() was executed we got an "Object reference not set to an instance of an object" exception. Yay! You could probably do anything from change the constructors to initialize these values to something other than null to something like putting a null check in the ToString() function. We chose the latter:

public new string ToString() { StringBuilder sb = new StringBuilder("&x_label_style="); sb.Append(base.ToString()); if (this.Orientation > -1) sb.Append(string.Format(",{0}", this.Orientation)); if (this.Step > 0) sb.Append(string.Format(",{0}", this.Step)); if (this.GridColor != null && this.GridColor.Length > 0) sb.Append(string.Format(",{0}", this.GridColor)); sb.Append("&\r\n"); return sb.ToString(); }

The infamous IE7 caching problem

Ok, enough with ToString() - at least from me anyway. Let's talk about the caching problem in IE7 that prevents your charts from updating. We almost quit on this control because of this. I mean, I'm browser agnostic, but too many people use IE to ignore this. The problem here comes when when you update the URL property on the control and rebind using DataBind(). You should see your data right? Well probably not if you use (at least) IE7. IE7 will cache your calls to the data page which prevents your chart from refreshing on calls after the first (and sometimes not even then). This problem is well documented on the forums, but we never saw the .NET solution, so we'll post ours here. Sorry if someone else found this - we're not making any claims of being the first. Let's assume your data page is called data.aspx and you do all of your work in the Load event handler. Here is a sample Page_Load (in VB - sorry):

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load Response.CacheControl = "no-cache" Response.Write("&title=Todays Availability Percentage,font-size: 14px; color: #FFFFFF&&x_label_style=10,#FFFFFF,0,1,#000000&&x_axis_steps=1&&y_label_style=10,#FFFFFF&&y_ticks=5,10,20&&bar_fade=75,#FF0000,Bar,2&values=&&bar_fade_2=75,#0000A0,Bar,2&values_2=&&bar_fade_3=75,#FF8040,Bar,2&values_3=&&bar_fade_4=75,#00FF00,Bar,2&values_4=&&bar_fade_5=75,#F52887,Bar,2&values_5=&&bar_fade_6=75,#804000,Bar,2&values_6=&&y_min=0&&y_max=100&&bg_colour=#000000&&x_axis_colour=#909090&&x_grid_colour=#D2D2FB&&y_axis_colour=#909090&&y_grid_colour=#D2D2FB&&tool_tip=#val# Percent Availability at #x_label#&") End Sub

The fix is really easy actually. The first line takes care of it: Response.CacheControl = "no-cache". This adds the "Cache-Control" parameter to the response headers and tells IE not to cache your page. NOTE: If this doesn't work for you, make sure you clear your temporary internet files and try again.

The Grand Finale - AJAX!!!!

We've seen in the forums requests for AJAX support for the OpenFlashChart Control and my website uses AJAX, so we figured we'd give it a shot. Someone else may have a better solution, but this worked for us.

The reason that the OpenFlashChart Control doesn't work using AJAX, as is, is because the output of the control uses javascript to load the flash chart (view the page source to see what I'm talking about). Since javascript will only fire when the page loads (or on some event like a button click), the chart will render the first time, but it won't update when placed in an UpdatePanel on an AJAX enabled website (since only the controls in the UpdatePanel are replaced, not the whole page).

The way that I've handled this with other AJAX controls is by registering the script with the ScriptManager class. Basically, we just added a second StringBuilder to the RenderContents() function, called sb2, in Chart.cs. This is where the javascript gets built now instead. Once the script is built, I don't output the string with the rest of the flash code, but instead I register that script using the ScriptManager class. This makes the script fire every time the control is loaded in my UpdatePanel, which refreshes the chart, and voila! AJAX!

Here is the ToString() function for Chart.cs with AJAX support (with the ClientId and relative path fixes mentioned before):

protected override void RenderContents(HtmlTextWriter output) { System.Text.StringBuilder sb = new System.Text.StringBuilder(); System.Text.StringBuilder sb2 = new System.Text.StringBuilder(); if (this.SequenceId == 0) { sb2.Append(string.Format("<script type=\"text/javascript\" src=\"{0}/aspnet_client/OpenFlashChart/js/swfobject.js\"></script>", this.Page.Request.ApplicationPath.TrimEnd('/') )); ScriptManager.RegisterStartupScript(this.Page, typeof(Chart), "a_1", sb2.ToString(), false); sb2 = new System.Text.StringBuilder(); } if (this.SWFObject) { sb.Append(string.Format("<div id="Div1" />", this.ClientID + "_1" )); sb2.Append("<script type=\"text/javascript\">"); sb2.Append(string.Format("var so = new SWFObject(\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf\", \"{1}\", \"{2}\", \"{3}\", \"9\", \"#FFFFFF\");", this.Page.Request.ApplicationPath.TrimEnd('/') , this.ClientID + "_1", this.Width, this.Height)); sb2.Append(string.Format("so.addVariable(\"width\", \"{0}\");", this.Width)); sb2.Append(string.Format("so.addVariable(\"height\", \"{0}\");", this.Height)); sb2.Append(string.Format("so.addVariable(\"data\", \"{0}\");", this.Url)); sb2.Append("so.addParam(\"allowScriptAccess\", \"sameDomain\");"); sb2.Append(string.Format("so.write(\"{0}\");", this.ClientID + "_1")); sb2.Append("</script>"); ScriptManager.RegisterStartupScript(this.Page, typeof(Chart), "a_2", sb2.ToString(),false ); sb.Append("<noscript>"); } sb.Append("<object classid=\"clsid:d27cdb6e-ae6d-11cf-96b8-444553540000\" codebase=\"http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0\""); sb.Append(string.Format("width=\"{0}\" height=\"{1}\" id="Object1" align=\"middle\">", this.Width, this.Height, this.SequenceId)); sb.Append("<param name=\"allowScriptAccess\" value=\"sameDomain\" />"); sb.Append(string.Format("<param name=\"movie\" value=\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf?width={1}&height={2}&data={3}\" />", this.Page.Request.ApplicationPath.TrimEnd('/') , this.Width, this.Height, this.Url)); sb.Append("<param name=\"quality\" value=\"high\" />"); sb.Append("<param name=\"bgcolor\" value=\"#FFFFFF\" />"); sb.Append(string.Format("<embed src=\"{0}/aspnet_client/OpenFlashChart/open-flash-chart.swf?data={1}\" quality=\"high\" bgcolor=\"#FFFFFF\" width=\"{2}\" height=\"{3}\" name=\"open-flash-chart\" align=\"middle\" allowScriptAccess=\"sameDomain\" ", this.Page.Request.ApplicationPath.TrimEnd('/') , this.Url, this.Width, this.Height)); sb.Append(string.Format("type=\"application/x-shockwave-flash\" pluginspage=\"http://www.macromedia.com/go/getflashplayer\" id=\"embed_{0}\" />", this.SequenceId)); sb.Append("</object>"); if (this.SWFObject) sb.Append("</noscript>"); this.SequenceId++; output.Write(sb.ToString()); }

That's all we have for now. We got everything working the way we needed so hopefully some of the solutions described in this write up will help you. If you have questions or comments email us.

We added a quickstart .NET tutorial here.

An AJAX demo can be found here.