Topic: integrate FusionCharts graphical controls with custom Web forms

In the collaborative office system, the web custom form development tool is the core component. It can provide data presentation interfaces for the collaborative system, the custom form development tool displays the received data on the page after calling the interface and returning it. If you need to analyze the data on the page, the graphical data display is more intuitive and clear.

After verification and research, I decided to integrate the fusioncharts control in the web custom form development tool. The reason why I chose the FusionCharts graphic control is that it is flexible and simple to integrate and has no special requirements on the system. The following is a brief overview of FusionCharts and system requirements:

FusionCharts Overview

Fusioncharts is a flash charting component that can be used to render data-driven animated charts. made in Adobe Flash 8 (formerly Macromedia Flash), fusioncharts can be used with any web scripting language like HTML ,. net, ASP, JSP, PHP, ColdFusion Etc ., To deliver interactive and powerful charts. Using XML as its data interface, FusionCharts makes full use of fluid beauty of Flash to create Compact,InteractiveAndVisually-arrestingCharts.

System Requirements

Server Side: Anything. fusionCharts runs on Windows, Linux, Unix or any other imaginable form of server that you can think. just make sure that your server MIME is configured for SWF files to ensure proper streaming. most servers come pre-configured SWF files. Client Side: Adobe Flash Player 8 (or above). Adobe Flash Player is a free and light-weight plugin to render Flash movies. It can be downloaded from Www.adobe.com. It's one of the most widely installed plugin on this planet.

For more information about FusionCharts, see:Http://www.fusioncharts.com/. The following describes how to integrate FusionCharts with custom web forms:

I. Research on AJAX/JavaScript Integration

FusionCharts provides methods to receive XML data and display the data in various graphs. The specific steps are as follows:

1) JavaScript call method: First, reference the FusionCharts. js file on the page where the image needs to be displayed, and then call it in the following format.

<Script type = "text/javascript">

Var chart = new FusionCharts ("../Charts/Column2D.swf", "ChartId", "500", "300", "0", "0 ");

Chart. setDataURL ("Data/Column2D. xml ");

Chart. render ("chartdiv ");

</SCRIPT>

2) fusioncharts receives XML data in the following format:

　　　　

3) The result displayed after the Javascript call is successful:

　　　　

By following the steps above, you can use JavaScript to call the fusioncharts control interface and display data. The main workload is the organization of XML data. After organizing the data, you can directly call the interface to display the image. You can integrate the fusioncharts control into a web custom form after learning the major workload.

2. Integrate the fusioncharts control into the designer of the Web custom form.

A) add the fusioncharts icon to the toolbar of the Web custom Form Designer.

Add the following configuration attributes to the configuration file of the Web custom form tool to display them on the toolbar. The configuration method and display effect are as follows:

Configuration method:Chart: ["chart control", "../images/new_images/ef_design_chart.gif", false, 'add ("chart") ']

Display Effect:

B) set the basic attributes and data sources of fusioncharts.

To facilitate the integration of custom web forms and fusioncharts, we define the XML data source of fusionchart as the dataset control from custom web forms, in this way, when creating a form, we only need to assign values to the dataset and associate the data of the dataset with the fusioncharts control, so that the data can be displayed graphically.

FirstYou need to add the graphic control to the designer of the custom form. Add the control to the custom form designer by implementing the 'Add ("chart") interface. Add the following code in the add () method:

Case "chart ":

{

ArrNum [name] ++;

Var sid = getNewContID (name, oContXml );

Var sHtml = "Onresizeend = resizeEnd ()/> ";

Htmltocont (sHtml, name );

SelectObj (sid );

Break;

}

SecondTo associate the FusionCharts control with the data items in the dataset, we set the basic attributes and Data Association attributes of FusionCharts on the same page. The setting method is as follows:

ThenDesign the form according to the conventional custom form creation method. If the FusionCharts graphic control is added to the form, the FusionCharts. js file is automatically referenced when the custom form is designed and saved.

ThenWhen the form is running, it parses the settings and calls the method provided by FusionCharts to display the image. The specific parsing process encapsulates a common method. You can call this method in Form Design to display various graphs based on the data. The encapsulation method is as follows:

Function ShowOneGraph (obj ){

Var iWidth = obj. style. pixelWidth;

Var iHeight = obj. style. pixelHeight;

Var dssub1 = eval ("window." + obj. getAttribute ("datasetdata "));

Var sXml = obj. getAttribute ("formatxml"); // string of the vertical axis Field List

Var oXml;

If (window. ActiveXObject ){

OXml = new ActiveXObject ("Microsoft. XMLDOM ");

OXml. async = false;

OXml. loadXML (sXml );

}

Else {

OXml = (new DOMParser (). parseFromString (sXml, "text/xml ");

}

// Debugger;

Var Is3D = obj. Is3D; // whether D is displayed

Var IsStack = obj. IsStack; // whether the stack is displayed

// Alert (IsStack );

Var IsMulti = (oXml.doc umentElement. childNodes. length> 2); // whether it is a multi-Series Image

Var IsShowValue = obj. IsShowValue; // whether the data value is displayed

Var showvalue = '0 ';

If (IsShowValue = "yes") showvalue = '1 ';

Var Is2YAxis = obj. Is2YAxis; // whether to display a dual-axis Image

Var myChart = null

// Add the display image type attribute (which flash file is used)

Var chartName = (obj. chartTypeName = "undefined" | typeof obj. chartTypeName = "undefined ")? "": Obj. chartTypeName;

If (chartName = ""){

Switch (obj. graphtype ){

Case "line chart": // Line.swf

If (IsMulti)

Chartname = "scrollline2d.swf"; // "msline.swf ";

Else

Chartname = "line.swf ";

Break;

Case "Pie Chart": // pie2d.swf

If (is3d = "yes ")

Chartname = "pie3d.swf ";

Else

ChartName = "Pie2D.swf ";

Break;

Case "Bar Chart": // Bar2D.swf

// Whether it is a multi-Series Image

If (IsMulti ){

// Whether to accumulate the display image

If (IsStack = "yes "){

// Whether D is displayed

If (Is3D = "yes ")

ChartName = "StackedBar3D.swf ";

Else

ChartName = "StackedBar2D.swf ";

}

Else {

// Whether D is displayed

If (Is3D = "yes ")

ChartName = "MSBar3D.swf ";

Else

ChartName = "MSBar2D.swf ";

}

}

Else {

ChartName = "Bar2D.swf ";

}

Break;

Case "Area Chart": // Area2D.swf

If (IsMulti ){

If (IsStack = "yes ")

ChartName = "StackedArea2D.swf ";

Else

ChartName = "ScrollArea2D.swf"; // "MSArea.swf ";

}

Else {

ChartName = "Area2D.swf ";

}

Break;

Default: // Column2D.swf

If (IsMulti ){

If (IsStack = "yes "){

If (Is3D = "yes ")

ChartName = "StackedColumn3D.swf ";

Else

ChartName = "ScrollStackedColumn2D.swf"; // "StackedColumn2D.swf ";

}

Else {

If (Is3D = "yes ")

ChartName = "MSColumn3D.swf ";

Else

// ChartName = "MSColumn2D.swf ";

ChartName = "ScrollColumn2D.swf ";

}

}

Else {

If (Is3D = "yes ")

ChartName = "Column3D.swf ";

Else

ChartName = "Column2D.swf ";

}

}

// Double axis Graphic Display

If (Is2YAxis = "yes "){

If (IsStack = "yes" & Is3D = "yes ")

ChartName = "StackedColumn3DLineDY.swf ";

Else {

If (Is3D = "yes ")

ChartName = "MSColumn3DLineDY.swf ";

Else

Chartname = "mscombidy2d.swf ";

}

}

}

// Alert (chartname );

MyChart = new fusioncharts ("http://www.cnblogs.com/../FusionCharts/" + chartname, "mychartid", iwidth, iheight, "0", "0 ");

// Set the XML to be displayed as an interface attribute for the graphic control. In the form, you can directly set data for the graphic and display it.

// If the chartxml attribute is assigned to the graphic control on the form, the attribute spelling is no longer performed according to the property page of the graphic control.

VaR strxml = "";

If (obj. chartxml = "undefined" | typeof obj. chartxml = "undefined "){

If (parent. Request. QueryString ("opentype"). toString () = "1 "){

Dssub1.Open ();

}

// Determine whether the dataset content is empty

Var ilen = 0;

If (dssub1.oDom. xml! = "")

Ilen = dssub1.oDom.doc umentElement. childNodes. length;

Var xfield = obj. xfield;

Var colno = dssub1.FieldNameToNo (xfield); // the serial number of the X axis Field

Var yfield = oXml.doc umentElement. childNodes (0). childNodes (0). text; // y axis Field

Var yno = dssub1.FieldNameToNo (yfield); // the serial number of the Y axis Field

// Graphic attributes

Var strCaption = (obj. caption = "undefined" | typeof obj. caption = "undefined ")? "": Obj. caption;

Var strSubCaption = (obj. subcaption = "undefined" | typeof obj. subcaption = "undefined ")? "": Obj. subcaption;

Var strxAxisName = (obj. xAxisName = "undefined" | typeof obj. xAxisName = "undefined ")? "": Obj. xAxisName;

Var stryAxisName = (obj. yAxisName = "undefined" | typeof obj. yAxisName = "undefined ")? "": Obj. yAxisName; // master Y axis name

Var strNumPrefix = (obj. numberPrefix = "undefined" | typeof obj. numberPrefix = "undefined ")? "": Obj. numberPrefix;

// Adds data suffix attributes, standard line values, and standard line display values.

Var strNumSuffix = (obj. numberSuffix = "undefined" | typeof obj. numberSuffix = "undefined ")? "": Obj. numberSuffix;

Var strTrendlines = (obj. trendlines = "undefined" | typeof obj. trendlines = "undefined ")? "": Obj. trendlines;

Var strDisplayValue = (obj. TrendDisplayValue = "undefined" | typeof obj. TrendDisplayValue = "undefined ")? "Standard line": obj. TrendDisplayValue; // standard line display value

// Add the secondary Y axis name

Var strSyyAxisName = (obj. SyAxisName = "undefined" | typeof obj. SyAxisName = "undefined ")? "": Obj. SyAxisName;

Var bg = "";

If (Is3D = "yes" & obj. graphtype = "Pie Chart") bg = "bgcolor = '99ccff, ffffff '";

// Modify the number of decimal places to retain two digits

StrXml = "<chart" + bg + "decimals = '2' formatNumberScale = '0' palette = '2' caption = '" + strCaption + "'basefontsize = '12' baseFont = 'arial '";

StrXml + = "showSum = '1' decimals = '0' useRoundEdges = '1' palette = '2' showBorder = '1 '";

StrXml + = "subcaption = '" + strSubCaption + "'axisname ='" + strxAxisName + "'numberprefix = '" + strNumPrefix + "'numbersuffix ='" + strNumSuffix + "' ";

// Add whether to display the dual-axis chart. The last field of the Y-axis of the dataset is used for Y-axis data.

If (Is2YAxis = "yes" & oXml.doc umentElement. childNodes. length> 2)

StrXml + = "PYAxisName = '" + stryAxisName + "'syaxisname ='" + strSyyAxisName + "'";

Else

StrXml + = "yAxisName = '" + stryAxisName + "'";

StrXml + = "> ";

// Organize Graphical Data

If (typeof myChart! = "Undefined" & myChart! = Null & ilen> 1 ){

Var strcategories = "<categories> ";

For (var I = 0; I <ilen-1; I ++ ){

// Chart category

Var strlabel = dssub1.oDom.doc umentElement. childNodes (I). childNodes (colno). text;

Var strvalue = "";

If (IsMulti)

Strcategories + = "<category label = '" + strlabel + "'/> ";

Else

Strvalue = dssub1.oDom.doc umentElement. childNodes (I). childNodes (yno). text;

// Add the attributes of other events that can be triggered when you click the image

Var strlink = dssub1.oDom.doc umentElement. childNodes (ilen-1). childNodes (1). childNodes (yno). childNodes (14). text;

If (strlink. toLowerCase (). indexOf ("javascript")> = 0)

Strlink = strlink. substring (11, strlink. length );

If (strlink. indexOf (";")> = 0)

Strlink = strlink. substring (0, strlink. length-1 );

If (strlink. indexOf ("(")> = 0 ){

Var ss = strlink. substring (strlink. indexOf ("(") + 1, strlink. length );

Strlink = strlink. substring (0, strlink. indexOf ("(") + 1) + "\ '" + I + "\'";

If (ss. length> 1)

Strlink = strlink + "," + ss;

Else

Strlink = strlink + ss;

}

Var slink = "link = \" JavaScript: "+ strlink + "\"";

StrXml + = "<set label = '" + strlabel + "'value ='" + strvalue + "'" + slink + "/> ";

}

If (IsMulti ){

Strcategories + = "</categories> ";

StrXml + = strcategories;

For (var j = 0; j <oXml.doc umentElement. childNodes. length-1; j ++ ){

Var ycolno = dssub1.FieldNameToNo(oXml.doc umentElement. childNodes (j). childNodes (0). text );

Var yfieldname = oXml.doc umentElement. childNodes (j). childNodes (1). text

Var strdataset = "<dataset showValues = '" + showvalue + "'seriesname ='" + yfieldname + "'";

If (Is2YAxis = "yes" & oXml.doc umentElement. childNodes. length> 2 & (j = oXml.doc umentElement. childNodes. length-2 ))

Strdataset + = "parentyaxis ='s '";

Strdataset + = "> ";

For (var k = 0; k <ilen-1; k ++ ){

VaR strvalue = dssub1.odom.doc umentelement. childnodes (k). childnodes (ycolno). text;

Strdataset + = "<set value = '" + strvalue + "'/> ";

}

Strdataset + = "</dataset>"

Strxml + = strdataset;

}

}

// Add a standard line

If (strtrendlines! = "" & Strtrendlines! = "Undefined "){

StrXml + = "<trendlines>"

StrXml + = "<line startValue = '" + strTrendlines + "'istrendzone = '0' displayValue ='" + strDisplayValue + "'color = 'ff0000'/>"

StrXml + = "</trendlines>"

}

}

StrXml + = "</chart> ";

}

Else {

StrXml = obj. chartXML;

}

MyChart. setDataXML (strXml );

Var sdiv = "<div id = '" + obj. id + "'style = 'position: absolute; left:" + obj. style. left + "; top:" + obj. style. top + "; width:" + obj. style. width + "; height:" + obj. style. height + "'> ";

Obj. outerHTML = sdiv + "</div> ";

MyChart. render (obj. id );

}

C) reserved data source interfaces for FusionCharts

1. The charttypename attribute interface is used to specify the type of image display. Example: chart1.charttypename = sharedoughnut2d.swf ";
2. The chartxml attribute interface is used to specify the XML data of a graph. For example, chart1.chartxml = "…"; The data format is the standard format provided by fusioncharts. Because fusioncharts provides many attributes and interfaces, it cannot be listed one by one in a custom form. This attribute interface is provided. For standard APIs, see
   Chart xml api introduction.

3. Create Custom forms with images and Display Results

1. design the form according to the conventional form creation method, and add graphical controls to the form. The design effect is as follows:

2. Set the basic attributes of the Graphic Control and the associated dataset

3. Call ShowOneGraph (CharT1); display the image.

4. Run the form to display the following results:

Address: http://www.iteye.com/topic/1066339