Open Flash Chart 2

apelagenko posted on January 17, 2009 15:37

I've already written about the Open Flash Chart and ASP.NET library to work with it. Since that time the version 2 of the flash component has been released. The flash component now uses JSON format of data, some new types of charts has been added such as horizontal bar chart and there are other “cool new features”.

The great work was done this post. The author adapted the library to use JSON format also added support of some new chart types as well as new properties. All I've done after it it just some refactoring testing, and bugfixing the library to support all the chart types.

I added two examples of lib usage in the project: the static 2 charts on page and the page with a chart inside UpdatePanel control to show how to properly embed in that case. The demo pages are here. The source can be downloaded from codplex (VS2008 solution).

The second chart on the default.aspx page uses a custom data page and does not use ASP.NET cache. The control property SpecificDataHandler is designed to set the custom data page

<OpenFlash:OpenFlashChartControl runat="server" ID="ofcTest2" Height="350" Width="500" OnDrawChart="DrawChart" SpecificDataHandler="FlashData.aspx"/>

The FlashData.aspx is an ordinal ASP.NET page with nothing in aspx file and a code which simply builds and flushes an Graph object in the codebehind.

public partial class FlashData : System.Web.UI.Page
{
    protected override void Render(HtmlTextWriter writer)
    {
        Graph g = new Graph();
        g.Title = new Title("Bar Chart");
        var bar = new BarSketch(3);
        Random random = new Random();
        bar.Fillalpha = 0.4;
        bar.Text = "Test";
        bar.Fontsize = 10;
        int max = int.MinValue;
        for (int i = 0; i < 12; i++)
        {
            int value = random.Next(i, i * 2);
            if (value > max)
                max = value;
            var val = bar.NewValue(i.ToString(), value);
            bar.Values.Add(val);
        }
        g.AddElement(bar);
        g.OnBuildComplete();
        writer.Write(g.ToPrettyString());
    }
}

This approach is useful for web farms.

If you made a bug in the JSON you’ll have the most common Error #2032 which means that the data for the chart can not be loaded. To solve it the chart has properties DataHandlerUrl and SpecificDataHandler and you can exactly specify the HttpHandler or the specific data handler address.

Open Flash Chart

apelagenko posted on April 1, 2008 21:20

Open Flash Chart .NET Library

Open Flash Chart is the chart component I chose to use at Yesnobox.com. I liked it at first sight because it looks really awesome at the client browsers and doesn’t require generating chart images on server. It was pity, but at the time I decided to use it in Nov 2007, there were no .NET API to use it. Thanks to many examples at the Open Flash Chart website and API written for other programming languages it seemed that it will be simple enough to write another one for .NET. So I decided to write my own library to build data strings and create handy asp.net web control to place on a page.

Online Demo

Before going in details of how it is works you can test the chart and properties at the demo page.

How to start?

To start using Open Flash Chart you have to download the project and link the dll or the source with you current application.

Download Open Flash Chart object and copy swf file to the ~/Flash/ open-flash-chart.swf on your website. (You can set another location in the FlashUrl property of OpenFlashChart web control)

In order to display chart data you have to register small HttpHandler from library under the <system.web><httpHandlers> node in web.config:

</configuration> 
<system.web> 
  <httpHandlers> 
    <add verb="*" path="of.axd" type="OpenFlashChartLib.OpenFlashChartControlHandler, OpenFlashChartLib" /> 
  </httpHandlers> 
</system.web> 
</configuration> 

Add Register directive before place the control on the page

<ofc:OpenFlashChart runat="server" ID="ofcTest" Height="350" Width="500" OnDrawChart="ofcTest_DrawChart" /> 

Call BuildChart()control’s method to rebuild chart data:

protected void Page_Load(object sender, EventArgs e) 
{ 
    ofcTest.BuildChart(); 
}  

Define the DrawChart handler in the page code behind. At this event you have to create Graph object, initialize it properties and set diagram values.

protected void ofcTest_DrawChart(object sender, OpenFlashChartLib.DrawChartEventArgs e) 
{ 
    // Create graph object and initialize its display preferences 
    Graph graph = new Graph(); 
    e.Graph = graph; 
    graph.Title.Text = ""; 
    graph.Title.Style.Font.Size = new FontUnit(26, UnitType.Pixel); 
    graph.XLabelStyle.Color = "#9933CC"; 
    graph.XLabelStyle.Size = 10; 
    graph.YLegend.Text = "Votes"; 
    graph.YLegend.Size = 12; 
    graph.YLegend.Color = "0x736AFF"; 
    graph.XLegend.Text = "Your question"; 
    graph.XLegend.Size = 14; 
    graph.XLegend.Color = "0x736AFF"; 
    graph.YTicks.Size = 2; 
  
    // Create new data renderer 
    DataRenderer<int> ret = new DataRenderer<int>(); 
    // Create a chart type wich you want to display 
    // as GraphTypeRenderer 
    string grColor = "E61C1C"; 
    int alpha = 60; 
    string legentText = "Legend"; 
    int legentTextHeight = 12; 
    ret.GraphTypeRenderer = new BarGraphType(alpha, "#" + grColor, legentText, legentTextHeight); 
  
    // Initialize XLables for the data set 
    graph.XLabels.Values.Add("Answer 1"); 
    graph.XLabels.Values.Add("Answer 2"); 
    graph.XLabels.Values.Add("Answer 3"); 
    graph.XLabels.Values.Add("Answer 4"); 
    graph.XLabels.Values.Add("Answer 5"); 
    // Add Values to display 
    ret.Values.Add(3); 
    ret.Values.Add(3); 
    ret.Values.Add(7); 
    ret.Values.Add(12); 
    ret.Values.Add(1); 
    // Add data rendere to the Graph.Values collection 
    graph.Values.Add(ret); 
  
    graph.Attributes.Add(new KeyValuePair(Tokens.BackgroundColor, "#FFFFFF")); 
} 

That’s it. Press F5 and see results:

The flash object is automatically embedded by SWFObject script which is linked to the page from library resources.

If the chart is not pie chart we can add other data sets to display as it is done at http://teethgrinder.co.uk/open-flash-chart/gallery-bar-2.php page. All we have to do is to create another DataRenderer object, init it in the GraphTypeRenderer and add values.

To create 2 data sets on one chart use the following code

using System; 
using System.Web.UI.WebControls; 
using OpenFlashChartLib; 
  
namespace WebDemo 
{ 
    public partial class _Default : System.Web.UI.Page 
    { 
        protected void Page_Load(object sender, EventArgs e) 
        { 
            ofcTest.BuildChart(); 
        } 
  
        protected void ofcTest_DrawChart(object sender, OpenFlashChartLib.DrawChartEventArgs e) 
        { 
            // Create graph object and initialize its display preferences 
            Graph graph = new Graph(); 
            e.Graph = graph; 
            graph.Title.Text = ""; 
            graph.Title.Style.Font.Size = new FontUnit(26, UnitType.Pixel); 
            graph.XLabelStyle.Color = "#9933CC"; 
            graph.XLabelStyle.Size = 10; 
            graph.YLegend.Text = "Votes"; 
            graph.YLegend.Size = 12; 
            graph.YLegend.Color = "0x736AFF"; 
            graph.XLegend.Text = "Your question"; 
            graph.XLegend.Size = 14; 
            graph.XLegend.Color = "0x736AFF"; 
            graph.YTicks.Size = 2; 
  
            // Create new data renderer 
            DataRenderer<int> ret = new DataRenderer<int>(); 
            // Create a chart type wich you want to display 
            // as GraphTypeRenderer 
            string grColor = "E61C1C"; 
            int alpha = 60; 
            string legentText = "Legend"; 
            int legentTextHeight = 12; 
            ret.GraphTypeRenderer = new BarGraphType(alpha, "#" + grColor, legentText, legentTextHeight); 
            // Initialize XLables for the data set 
            graph.XLabels.Values.Add("Answer 1"); 
            graph.XLabels.Values.Add("Answer 2"); 
            graph.XLabels.Values.Add("Answer 3"); 
            graph.XLabels.Values.Add("Answer 4"); 
            graph.XLabels.Values.Add("Answer 5"); 
            // Add Values to display 
            ret.Values.Add(3); 
            ret.Values.Add(3); 
            ret.Values.Add(7); 
            ret.Values.Add(12); 
            ret.Values.Add(1); 
            // Add rendere to Values collection 
            graph.Values.Add(ret); 
            graph.YMax = 12; 
  
            // if this is not pie chart create another renderer 
            if (!graph.PieChart()) 
            { 
                DataRenderer<int> ret2 = new DataRenderer<int>(); 
                BarGraphType renderer = new GlassGraphType(alpha, "#005231", "", null); 
                renderer.Color = "#005231"; 
                renderer.OulineColor = "#005231"; 
                ret2.GraphTypeRenderer = renderer; 
                ret2.Values.Add(5); 
                ret2.Values.Add(12); 
                ret2.Values.Add(1); 
                ret2.Values.Add(0); 
                ret2.Values.Add(8); 
                graph.Values.Add(ret2); 
            } 
            graph.YMax = 12; 
            graph.Attributes.Add(new KeyValuePair(Tokens.BackgroundColor, "#FFFFFF")); 
  
        } 
    } 
} 

We will get the following pretty chart:

The creation of pie chart does not differ much. The only thing that changes is the is type of GraphTypeRenderer property of the DataRenderer. Use the following code to define Pie chart in the DrawChart event:

// Create new data renderer 
DataRenderer<int> ret = new DataRenderer<int>(); 
// Create a chart type wich you want to display 
// as GraphTypeRenderer 
string grColor = "E61C1C"; 
PieGraphType pie = new PieGraphType(); 
pie.Colors = new List<string>(new string[] { "E61C1C", "462CDE", "3F9735" }); 
pie.Alpha = 60; 
ret.GraphTypeRenderer = pie; 
// Initialize XLables for the data set 
graph.XLabels.Values.Add("Answer 1"); 
graph.XLabels.Values.Add("Answer 2"); 
graph.XLabels.Values.Add("Answer 3"); 
graph.XLabels.Values.Add("Answer 4"); 
graph.XLabels.Values.Add("Answer 5"); 
// Add Values to display 
ret.Values.Add(3); 
ret.Values.Add(3); 
ret.Values.Add(7); 
ret.Values.Add(12); 
ret.Values.Add(1); 
// Add data rendere to the Graph.Values collection 
graph.Values.Add(ret); 

The result:

Supported features

Now the API supports following chart types:

Chart types:

Bar chart
Glass chart
3D chart
Fade chart
Sketch chart
Pie chart
Line chart (dot line, hollow line)

Ajax panel is also supported. To find out how to use the control there see demo web example.

Download

OpenFlashChartLib project and WebDemo available at CodePlex.

I am not first …

At the moment am writing this article there are two other similar api released. You can find them at Dot NET APIs page of Open Flash Chart Page. The functionality is almost the same except some features I coded here

Automatic SWFObject link to the page. The SWFObject is compiled to dll resources and the script include generated automatically.
JQuery flash registration. If you are using JQuery it is better to use JQuery flash plug in to embed flash object in the page. It can be set by EmbedScriptType property of OpenFlashChart control.
No need to create separate data page or handler you just handle DrawChart event. You can use generic data handler registered in web.config and chart data will be cached between postbacks. Or you can switch this feature off by setting SpecificDataHandler control’s property to any data renderer url.

a point about .NET