Fusioncharts free (2) detailed analysis of Usage

Some friends say that the CFC function is simple. After all, the free version. For the commercial version (cracking), $4999 is required, which is expensive. Let's go back and introduce it.

To put it bluntly, using fusioncharts is three steps. 1. generate an XML data source. 2. Introduce the fusioncharts component. 3. Associate XML with components. A demo is provided.

1. generate an XML data source.

(1) manually create static files.

For example:

<? XML version = "1.0" encoding = "UTF-8"?>
<Graph caption = 'sales volume per month' xaxisname = 'month' yaxisname = 'Units 'shownames = '1' decimalprecision = '0' formatnumberscale = '0'>
<Set name = '20180101' value = '20180101' color = 'afd8f8'/>
<Set name = '20180101' value = '20180101' color = 'f6bd0f'/>
<Set name = '20180101' value = '20180101' color = '8bba00'/>
<Set name = '20180101' value = '20180101' color = 'ff8e46'/>
<Set name = '20180101' value = '20180101' color = '008e8e'/>
<Set name = '20180101' value = '20180101' color = 'd64646 '/>
<Set name = '20180101' value = '20180101' color = '8e468e '/>
<Set name = '20180101' value = '20180101' color = '20180101'/>
<Set name = '2013' value = '000000' color = 'b3aa00'/>
<Set name = '20180101' value = '20180101' color = '008ed6 '/>
<Set name = '20180101' value = '20180101' color = '9d080d'/>
<Set name = '20180101' value = '20180101' color = 'a186be'/>
</Graph>

(2) C # create an XML file and use the xmlhelper class

# Region creates its Child Nodes Based on the first node matching the XPath expression. (If the node already exists, a new node with the same name is appended.
/// <Summary>
/// Create a subnode based on the first node that matches the XPath expression. (If this node already exists, a new node with the same name will be appended.
/// </Summary>
/// <Param name = "xmlfilename"> complete XML file name (including physical path) </param>
/// <Param name = "XPath"> the XPath expression to be matched (for example, "// node name // child node name </param>
/// <Param name = "xmlnodename"> name of the node to match xmlnodename </param>
/// <Param name = "innertext"> node text value </param>
/// <Param name = "xmlattributename"> name of the attribute to match xmlattributename </param>
/// <Param name = "value"> attribute value </param>
/// <Returns> success returns true, failure returns false </returns>
Public static bool createxmlnodebyxpath (string xmlfilename, string XPath, string xmlnodename, string innertext, string xmlattributename, string value)
{
Bool issuccess = false;
Xmldocument xmldoc = new xmldocument ();
Try
{
Xmldoc. Load (xmlfilename); // load the XML document
Xmlnode = xmldoc. selectsinglenode (XPath );
If (xmlnode! = NULL)
{
// This node is created if it does not exist
Xmlelement subelement = xmldoc. createelement (xmlnodename );
Subelement. innerxml = innertext;

// If neither attribute nor value parameter is null, the attribute is added to the new node.
If (! String. isnullorempty (xmlattributename )&&! String. isnullorempty (value ))
{
Xmlattribute = xmldoc. createattribute (xmlattributename );
Xmlattribute. value = value;
Subelement. Attributes. append (xmlattribute );
}

Xmlnode. appendchild (subelement );
}
Xmldoc. Save (xmlfilename); // save it to the XML document
Issuccess = true;
}
Catch (exception ex)
{
Throw ex; // here you can define your own Exception Handling
}
Return issuccess;
}
# Endregion

This is just a method of this class. You can also write it yourself. This class will be introduced in later articles.

 

(3) output an XML string using the "ashx" File

/// <Summary>
/// Summary of pushxml
/// </Summary>
Public class pushxml: ihttphandler
{

Public void processrequest (httpcontext context)
{
Context. response. contenttype = "text/XML ";
Stringbuilder STR = new stringbuilder ();
Str. append ("<? XML version = '1. 0' encoding = 'utf-8'?> <Graph caption = 'xxxxxx statistics' subcaption = '(from 8/6/2009 to 8/12/2009) 'linethickness = '1' showvalues = '0' formatnumberscale = '0' anchorradius = '2' divlinealpha = '20' divlinecolor = 'cc3300' divlineisdashed = '1' labels = '1 'alternatehgridalpha = '5' alternatehgridcolor = 'cc3300 'shadowalpha = '40' labelstep = '1' numvdivlines = '5' chartrightmargin = '35' bgcolor = 'ffffffff, cc3300 'bgangle = '000000' bgalpha = '10, 10 'axisname = 'month' yaxisname = 'salesman' rotateyaxisname = '0' basefont = 'arial' basefontsize = '13'> ");
Str. append ("<categories> ");
Str. append ("<category label = '2014/1/123'/> ");
Str. append ("<category label = '2014/1/123'/> ");
Str. append ("<category label = '2014/1/123'/> ");
Str. append ("<category label = '2014/1/123'/> ");
Str. append ("<category label = '2014/1/123'/> ");
Str. append ("<category label = '2014/1/123'/> ");
Str. append ("<category label = '2014/1/123'/> ");
Str. append ("</Categories> ");
Str. append ("<dataset seriesname = 'test 1' color = '1d8bd1 'anchorbordercolor = '1d8bd1' anchorbgcolor = '1d8bd1 '> ");
Str. append ("<set value = '000000'/> ");
Str. append ("<set value = '000000'/> ");
Str. append ("<set value = '000000'/> ");
Str. append ("<set value = '000000'/> ");
Str. append ("<set value = '000000'/> ");
Str. append ("<set value = '000000'/> ");
Str. append ("<set value = '000000'/> ");
Str. append ("</dataset> ");
Str. append ("</graph> ");
Context. response. contentencoding = encoding. getencoding ("gb2312 ");
Context. response. Write (Str. tostring ());
}

Public bool isreusable
{
Get
{
Return false;
}
}
}

 

Ii. Introduce the FCF plug-in

(1) introduction of "object"

<Object classid = "CLSID: D27CDB6E-AE6D-11cf-96B8-444553540000" codebase = "http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width = "600" Height = "500" id = "pie3d">
<Param name = "movie" value = "fusioncharts/fcf_pie3d.swf"/>
<Param name = "flashvars" value = "& dataurl = data. xml & chartwidth = 600 & chartheight = 500"/>
<Param name = "quality" value = "high"/>
<Embed src = "fusioncharts/fcf_pie3d.swf" flashvars = "& dataurl = data. xml & chartwidth = 600 & chartheight = 500 "Quality =" high "width =" 600 "Height =" 500 "name =" column3d "type =" application/X-Shockwave-flash "pluginspage =" http://www.macromedia.com/go/getflashplayer "/>
</Object>

(2) JS Introduction

<Head>
<Title> multiple images </title>
<SCRIPT src = "fusioncharts/fusioncharts. js" type = "text/JavaScript"> </SCRIPT>
</Head>
<Body bgcolor = "# ffffff">
<Div id = "chartdiv1" align = "center">
First chart container pie 3D
</Div>
<SCRIPT type = "text/JavaScript">
VaR mychart1 = new fusioncharts ("fusioncharts/fcf_pie3d.swf", "mychartid1", "600", "400 ");
Mychart1.setdataurl ("data. xml ");
Mychart1.render ("chartdiv1 ");
</SCRIPT>

</Body>

 

 

(3) asynchronous jquery and Ajax requests

<Head runat = "server">
<Title> </title>
<SCRIPT src = "fusioncharts/fusioncharts. js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT src = "scripts/jquery-1.4.1.min.js" type = "text/JavaScript"> </SCRIPT>
<SCRIPT type = "text/JavaScript">

$. Ajax ({URL: "default. aspx", data: {'nocache': Math. Random ()}, timeout: 50000, success: function (text ){
VaR mychart1 = new fusioncharts ("fusioncharts/fcf_column3d.swf", "mychartid", "600", "350 ");

Mychart1.setdataxml (text );
Mychart1.render ("chartdiv ");
}
});
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Div id = "chartdiv" style = "text-align: Center"> </div>
</Div>

</Form>
</Body>
</Html>

 

(3) Associate XML with the plug-in

(1) setdataurl.

This situation is used when you know the XML Path. Of course, the "ashx" file path can also be used, because it also stores XML text, although dynamic.

 

<SCRIPT type = "text/JavaScript">
VaR MyChart = new fusioncharts ("fusioncharts/fcf_msline.swf", "mychartid", "800", "300 ");
MyChart. setdataurl ("pushxml. ashx ");
MyChart. Render ("chartdiv ");
</SCRIPT>

 

 

(2) setdataxml.

Specify the XML string directly:

<SCRIPT type = "text/JavaScript">
VaR MyChart = new fusioncharts ("fusioncharts/fcf_column3d.swf", "mychartid", "600", "500 ");
MyChart. setdataxml ("<graph caption = 'sales per month' xaxisname = 'month' yaxisname = 'unit' shownames = '1' decimalprecision = '0' formatnumberscale = '0'> <set name = '20180101' value = '20180101' color = 'afd8f8'/> <set name = '20180101' value = '20180101' color = 'f6bd0f'/> <set name = '20180101' value = '20180101' color = '8bba00'/> <set name = '20180101' value = '20180101' color = 'ff8e46'/> <set name = '20180101' 'value = '000000' color = '8e8e'/> <set name = '000000' value = '000000' color = 'd64646 '/> <set name = '000000' Value = '000000' color = '8e468e '/> <set name = '000000' value = '000000' color = '000000'/> <set name = '000000' value =' 376 'color = 'b3aa00'/> <set name = '20180101' value = '20180101' color = '008ed6 '/> <set name = '20180101' value = '20180101' color = '9d080d'/> <set name = '2013' value = '000000' color = 'a186be'/> </graph> ")
MyChart. Render ("chartdiv ");
</SCRIPT>

 

C # background output:

Protected void page_load (Object sender, eventargs E)
{
If (request ["nocache"]! = NULL)
{
Response. Clear ();
String DS = file. readalltext (server. mappath ("data. xml"), encoding. getencoding ("gb2312 "));
Response. Write (DS );
Response. End ();
}
}

 

 

In this section, the three steps for using CFC are described in detail, mainly in combination with Asp.net (C. The next section will introduce some parameter settings and precautions in fusioncharts. Are you worried about so many parameter configurations. For more information about the parameters and precautions of the next FC section, please refer to them.

For a whole space, click here and add a minute.