Fusioncharts Simple Demo for (Html+js, Aps.net Webform, MVC)

Do GIS or other internal data statistics project should not be too unfamiliar to fusioncharts, easy to use has no need to say anything, but sometimes the framework is different, the implementation of a little difference

The reference DLL calls the static method of the Fusioncharts class rendercharthtml returns an HTML binding that is more compliant with WebForm on the data control;

Using the JS code new Fusioncharts object, calling the object's Setdataxml or Setdataurl method is more consistent with MVC

1, Html+js

<!--html-->
 2, ASP. Webform 
 
 <!-------------aspx----------------><form id= "Form1" runat= "Server" > <div> <table id= "TBL" Border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td> <asp  :D ropdownlist id= "DropDownList1" runat= "Server" autopostback= "true" > <asp:listitem text= "Histogram"                    Value= "0" ></asp:ListItem> <asp:listitem text= "pie chart" value= "1" ></asp:ListItem>                </asp:DropDownList> </td> </tr> <tr>                 <td> <asp:panel id= "Panel1" runat= "Server" > </asp:Panel> </td> </tr> </table> </div> </form> <!----------- --code behind---------------->protected void Page_Load (object sender, EventArgs e) {panel1.controls.            Clear (); Dictionary<string, int> data = new dictionary<string, int> () {{"Banana", 12}, {"Orange", 55            }, {"Apple", 23}, {"Ginseng fruit", 20}};        PANEL1.CONTROLS.ADD (Shownewchart (data, Dropdownlist1.selectedvalue, "Quantity"));        }///<summary>///binding graphic data///</summary>//<param name= "dic" > Data </param>        <param name= "type" > Graphic type </param>//<param name= "Yaxisname" > histogram display title </param> <returns></returns> Private LiteralControl Shownewchart (dictionary<string, int> dic, string            Type, String yaxisname) {StringBuilder sb = new StringBuilder (); Sb. Append ("<chart rotateyaxisname= ' 0 ' basefont= ' Microsoft Jas Black ' basefontsize= ' ' caption= '" xaxisname= "+            Yaxisname + "' bgcolor= ' FFFFFF ' bgalpha= ' showvalues= ' 1 ' formatnumberscale= ' 0 ' showborder= ' 0 ' >"); foreach (String keY in DiC. Keys) {sb.            AppendFormat ("<set label= ' {0} ' value= ' {1} '/>", key, Dic[key]); } sb.            AppendFormat ("</chart>");            String types = "";            if (Type = = "1") {//Pie chart swf path types = "package/fusioncharts/charts/pie3d.swf"; } else if (Type = = "0") {//Histogram types = "Package/fusionchart            S/charts/2column3d.swf "; } return new LiteralControl (fusioncharts.rendercharthtml (types, "", SB.)        ToString (), "Chart1", "650", "+", False, false)); }
 3, ASP. NET MVC 
 
--------------------------View----------------------------------<script src= "@Url. Content (" ~/package/ Fusioncharts/charts/fusioncharts.js ")" Type= "Text/javascript" ></script><script type= "Text/javascript        "> $ (function () {initchars (' @Url. Content (" ~/package/fusioncharts/charts/2column3d.swf ");    Bindslmaptypechange (); })//Initialize chart function Initchars (fusionchartspath) {var chart = new Fusioncharts (Fusionchartspath, "Chartid", "        600 "," 350 ");        Chart.setdataxml ("@ (new mvchtmlstring (Viewdata.model))");    Chart.render ("ShowData"); }//Bind chart type Select button Event function Bindslmaptypechange () {$ (' #slMapType '). Change (function () {if ($ ()            . val () = = "1") {Initchars (' @Url. Content ("~/package/fusioncharts/charts/2column3d.swf");            } else {initchars (' @Url. Content ("~/package/fusioncharts/charts/pie3d.swf"); }})}</script><table border= "0" cellpadding= "0" cellspacing= "0" > <tr> <td> Graphic Type: <select id= "Slmaptype" ><opti        On value= "1" > Column chart </option> <option value= "2" > Pie chart </option> </select> </td> </tr> <tr> <td id= "ShowData" > </td> </tr></table& gt;//--------------------------Action----------------------------------public ActionResult Index () {Di ctionary<string, int> data = new dictionary<string, int> () {{"Banana", 12}, {"Orange",            55}, {"Apple", 23}, {"Ginseng fruit", 20}};            Viewdata.model = getchartxml (data, "number of fruits");        return View (); }///<summary>///binding graphic data///</summary>//<param name= "dic" > Data </param >//<param name= "type" > Graphic type </param>//<param name= "Yaxisname" > Histogram display superscriptTitle </param>///<returns></returns> private string Getchartxml (Dictionary<string, int>            DIC, String yaxisname) {StringBuilder sb = new StringBuilder (); Sb. Append ("<chart rotateyaxisname= ' 0 ' basefont= ' Microsoft Jas Black ' basefontsize= ' ' caption= '" xaxisname= "+            Yaxisname + "' bgcolor= ' FFFFFF ' bgalpha= ' showvalues= ' 1 ' formatnumberscale= ' 0 ' showborder= ' 0 ' >"); foreach (String key in DiC. Keys) {sb.            AppendFormat ("<set name= ' {0} ' value= ' {1} '/>", key, Dic[key]); } sb.            AppendFormat ("</chart>"); Return SB.        ToString (); }
　　
Source: Http://files.cnblogs.com/NotAnEmpty/FusionCharts.rar
Fusioncharts Simple Demo for (Html+js, Aps.net Webform, MVC)