Showing posts with label fusionchart. Show all posts
Showing posts with label fusionchart. Show all posts

Sunday, September 18, 2016

FusionChart with C#,Linq,EntiyFramework,Asp .NET,Xml Best Way.



Step1:

-------------------------------------------Page Html-------------------------------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>FusionChart Test</title
    <script src="FusionChart/fusioncharts.js" type="text/javascript"></script>
    <script src="FusionChart/fusioncharts.charts.js" type="text/javascript"></script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
   
        <asp:Literal ID="Literal1" runat="server"></asp:Literal>
   
    </div>
    </form>
</body>
</html>


-------------------------------------------------------------------------------------

Step2:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Text;
using InfoSoftGlobal;

public partial class FusionChartTest : System.Web.UI.Page
{
  
    Entities ctx = new Entities();

    protected void Page_Load(object sender, EventArgs e)
    {

---------------Getting the required result and save into class-----------------------

        var model = ctx.Table
           
            .Where(o=>o.DateTime.Value.Year==DateTime.Now.Year)

            .GroupBy(o => new
            {
                Month =(int) o.DateTime.Value.Month,
                Year = o.DateTime.Value.Year
            })
            .Select(g => new SomeClass
            {
                Month = g.Key.Month,
                Year = g.Key.Year,
                Value = g.Count()
            })
            .OrderByDescending(a => a.Year)
            .ThenByDescending(a => a.Month)
            .ToList();

         List<SomeClass> list=new List<SomeClass>(model);
-------------------------------------------------------------------------------------



--------------------------Forming the xml to display as chart------------------------

         StringBuilder xmlData = new StringBuilder();

         xmlData.Append("<chart caption='Monthly Unit Sales' xAxisName='Month' yAxisName='Units' showValues='0' formatNumberScale='0' showBorder='1'>");
     
        foreach (var item in list)
       {
         xmlData.AppendFormat("<set label='{0}' value='{1}' />", item.Month + "," + item.Year, item.Value);
       }

        xmlData.Append ( "</chart>"); 
       
        Literal1.Text = InfoSoftGlobal.FusionCharts.RenderChart("FusionChart/Charts/line.swf", "", xmlData.ToString(), "browser_share", "640", "340", false, true);
    }
-------------------------------------------------------------------------------------
  

}

--------------------------------Custom Class to Save the Result----------------------

public class SomeClass
{
    public int Month { get; set; }
    public int Year { get; set; }
    public int Value { get; set; }
}
-------------------------------------------------------------------------------------


Sunday, November 2, 2014

How to Bind FusionCharts with C# ?





FusionChart only accept data as XML and Json format so steps for binding dynamic data to FusionChart is

  •                     Query to database and get data in C# object (List<> or Datatable)
  •                     Convert List<> to Json Data by given Function


public string output;         // make the result as public to access it in .aspx

protected void Page_PreRender(object sender, EventArgs e)
    {

   List<Students> ll = (List< Students >)Function();

JavaScriptSerializer jss = new JavaScriptSerializer();

output = jss.Serialize(ll);
}

Now the data is converted to json and saved inside output.


  
  •          Add javascript to .aspx


<script src="FusionCharts/fusionwidgets-xt-enterprise-plus/js/fusioncharts.js"   type="text/javascript"></script>

  
  •            Now Write Code in .aspx


<script type="text/javascript">

            var jsonData = <%=output%>;

            FusionCharts.ready(function () {
               var revenueChart = new FusionCharts({
                    "type": "column3d",
                    "renderAt": "chartContainer",
                    "width": "500",
                    "height": "300",
                    "dataFormat": "json",
                    "dataSource": {
                        "chart": {
                            "caption": "Monthly revenue for last year",
                            "subCaption": "Harry's SuperMart",
                            "xAxisName": "Month",
                            "yAxisName": "Revenues (In USD)",
                            "theme": "fint"
                        },
                        "data": jsonData
                    }
                });

                revenueChart.render();
            })
    </script>

    <div id="chartContainer">FusionCharts XT will load here!</div>

Secure you Asp .NET by Web.config & Global.ascx?

Add to Global.ascx protected void Application_BeginRequest(object sender,EventArgs e)     {         //to remove x frame         Resp...