How to Generate Flash Charts from DataWindow in PowerBuilder Web Forms

by Haibo,2008-09-14                                                                                                                 Demo

Download 1(Sybase CodeXchange)

Download 2 (Google Page)

Fusion Charts free documentation Online

Everyone using Graph control in PowerBuilder more and more realize that the graph types and styles offered in this development tool are out of date, though they are still powerful and could be generated directly from DataWindow. In PowerBuilder 11.2, you can deploy PowerBuilder applications as ASP.NET Ajax applications, I think it is the time to find a component to replace it.

 

With Google, we could find a lot of flash charting components. The most fashionable to me, one is “FusionCharts Free” (www.fusioncharts.com/free) and the other is "XML/SWF Charts" (www.maani.us/xml_charts). Finally, with some investigations, I choose FusionCharts, the first reason is it looks more abstractive; the second reason is it has a very good fault-tolerance capability, if you add some improper properties in XML file, it could ignore them, that is very useful to me if I want to write a common class; and the third reason is it has a professional suite, as we know, it means more powerful functionality and may meet the farther requirements.

Fusion charts are assembled with three things:

  • SWF File for the chart that you want to create. We want to create a 3D Column Chart, whose SWF file is named as Column3D.swf. All the chart SWF files could be downloaded in http://fusioncharts.com/free/Download.asp?gMenuItemId=5
  • XML Data File. FusionCharts accepts data only in a pre-defined XML format. So, we'll need to convert your data to XML format - either using a server side scripting language or manually.
  • HTML Wrapper File. This HTML file would contain the code to embed the chart.
    Then, how to generate flash charts from DataWindow in PowerBuilder Web Forms?  We need solve the following problems step by step.

1 A control could integrate the flash chart in application.

The simplest way to demonstrate a flash chart in your application is just open HTML Wrapper File in a new url, but if you want to make it more like a application, you have to find a class to embed flash. Fortunately, you could use StaticHyperLink control in PowerBuilder Web Form. When you set the Embedded property to true for a StaticHyperLink control, the IFRAME element is used to embed the Web page that you defined in the control's URL property. The Web page including flash charts displays inline on the Web Forms page (see figure 1).


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2 Get the chart to display in the Web Form

When you deploy a PowerBuilder application as a .NET Web Forms application, PowerBuilder creates a virtual file system that Web Forms users can access from client-side Web browsers. The virtual file system is maintained on the server. Application users can read from and write to files in the virtual file system as long as user permissions for file operations are not restricted.

 

Figure 2 shows the Common directory and its subdirectories for the PB11 & FusionCharts Web Forms sample. At runtime, the Web Forms application creates a SessionID folder in the File\Session directory for each user for storing files uploaded or created by that user. The exact name of the SessionID directory is generated by the ASP.NET runtime engine.

 The question becomes: “How could I get the chart to display in the Web Form?” The first of all is we need let different user dynamically get their desired effect. There are two file process modes: Share mode and Copy mode. Because we need to call basic swf files implicitly in HTML Wrapper File. We need to specify Copy mode in Web Configuration (Figure 3), all folders and files under the Common directory are copied to the SessionID or UserName directory at the first time a file operation is called. You may also notice that the session id is not a fixed string. Do not worry, we could use GetDownloadFileURL and MapVirtualPath to combine a full URL (see Figure 4).

 

 3 Wrapper class for FusionCharts

 If you want the wrapper class flexible enough, you have to process XML Data File and HTML Wrapper File synchronously. Now let we take a look at the structure of fusioinchartsfree.pbl. This utility pbl is designed for PowerBuilder Web Forms. Of cause, you could use it in PB runtime or Windows Forms after a little modification, just add an OLE control and select the Microsoft WebBrowser control to get the chart to display. Bruce wrote a XML/SWF Demo with PB105, and he also wrote a aritcle here, you could learn how to reconstruct fusioncharts to make it run well in PB runtime or Windows Forms.

To specify a custom chart by script (Figure 5)

 

 

To generate XML Data File and HTML Wrapper File (Figure 6)

 

 Fairly simple? You even could use the embed u_fusioncharts in your application to make user specify flash chart property in runtime. 

 

The FusionCharts example, is available on Sybase’s CodeXchange site:http://xrl.us/flashcharting.

Demo

Download Sample 1(Sybase CodeXchange)

Download Sample 2 (Google Page) 

 Fusion Charts free documentation Online

 Note: Since function MapVirturePath is unsupported in PB11.0, it's better to try the sample in PB11.2