Generate Graph using FusionChart

• Download demo project - 602 KB

Introduction

In this article, I would like to show you how to create a stunning Line, Bar, Doughnut, and Pie chart for your ASP.NET application.

Background

I assume you have a basic knowledge of ASP.NET and C#.NET, and so on. FusionCharts Free is an open-source Flash charting component that can be used to render data-driven and animated charts in your web applications, desktop applications and presentations. It is a cross-browser and cross-platform solution that can be used with PHP, ASP, ASP.NET, JSP, ColdFusion, Python, RoR, simple HTML pages or even PowerPoint Presentations.

What features does FusionCharts Free support?

FusionCharts Free cover all your basic charting needs with the necessary chart types and features. Some of the highlights are:

• 22 popular charts like Column, Line, Pie, Bar, Area, Stacked, Candlestick and Funnel Charts
• Animated charts that make your applications look “wow”
• Lots of interactive features like tooltips and drill-down
• ASP and PHP APIs have been provided as well for easy implementation
• All the charts can pull data from any database and are AJAX-enabled

What can FusionCharts Free be used for?

The use of FusionCharts Free is bound only by your imagination. It can give a lively face to your boring data pretty much anywhere, and is especially useful in:

• Business Monitoring and Reporting Applications, where charts and graphs are an integral part of the application.
• Digital Dashboards and Executive Information Systems, where charts represents various KPIs.
• Content and Knowledge Management systems, where statistical views are required.
• Network monitoring applications.
• Surveys and Polls.
• Scientific research and experiments, where data is to be visually represented PowerPoint presentations, where you need to visually depict the data ... and anywhere where you need slick charts to represent your data.

You can even RDL FusionCharts Free and distribute with your open or closed source applications free of charge. Take a look at our liberal licensing to know more. To prepare for a chart using this steps given below.

How to Configure

Step 1:

Download from FusionCharts.

Step 2:

Start a new web-site; give the name as FusionChartGraph. It will give you one Default.aspx and .cs file.

Step 3:

Download source code and copy the FusionCharts.dll file from the bin directory to some location. Now add a reference to this FusionCharts.dll file.

Step 4:

Copy FusionCharts folder with all contents in your application folder.

Step 5:

Add src="FusionCharts/FusionCharts.js".

Step 6:

Add a JavaScript function to view the value when user will click on data label.

function myJS(myVar){
    window.alert(myVar);
}

Using the code

Load initial data

DataTable dt = new DataTable("Chart");

private void LoadGraphData()
{
    // Preparing Data Source For Chart Control
    
    DataColumn dc = new DataColumn("Month", typeof(string ));
    DataColumn dc1 = new DataColumn("Qnty", typeof(int ));
    dt.Columns.Add(dc);
    dt.Columns.Add(dc1);
    DataRow dr1 = dt.NewRow();
    dr1[0] = "January";
    dr1[1] = 8465;
    dt.Rows.Add(dr1);
    DataRow dr2 = dt.NewRow();
    dr2[0] = "February";
    dr2[1] = 9113;
    dt.Rows.Add(dr2);
    DataRow dr3 = dt.NewRow();
    dr3[0] = "March";
    dr3[1] = 18305;
    dt.Rows.Add(dr3);
    DataRow dr4 = dt.NewRow();
    dr4[0] = "April";
    dr4[1] = 23839;
    dt.Rows.Add(dr4);
    DataRow dr5 = dt.NewRow();
    dr5[0] = "May";
    dr5[1] = 11167;
    dt.Rows.Add(dr5);
    DataRow dr6 = dt.NewRow();
    dr6[0] = "June";
    dr6[1] = 8838;
    dt.Rows.Add(dr6);
    DataRow dr7 = dt.NewRow();
    dr7[0] = "July";
    dr7[1] = 10800;
    dt.Rows.Add(dr7);
    DataRow dr8 = dt.NewRow();
    dr8[0] = "August";
    dr8[1] = 12115;
    dt.Rows.Add(dr8);
    DataRow dr9 = dt.NewRow();
    dr9[0] = "September";
    dr9[1] = 7298;
    dt.Rows.Add(dr9);
    DataRow dr10 = dt.NewRow();
    dr10[0] = "October";
    dr10[1] = 13186;
    dt.Rows.Add(dr10);
    DataRow dr11 = dt.NewRow();
    dr11[0] = "November";
    dr11[1] = 10460;
    dt.Rows.Add(dr11);
    DataRow dr12 = dt.NewRow();
    dr12[0] = "December";
    dr12[1] = 9964;
    dt.Rows.Add(dr12);
}

Default visual configuration

string[] color = new string[12]; 

private void ConfigureColors()
{
    color[0] = "AFD8F8";
    color[1] = "F6BD0F";
    color[2] = "8BBA00";
    color[3] = "FF8E46";
    color[4] = "008E8E";
    color[5] = "D64646";
    color[6] = "8E468E";
    color[7] = "588526";
    color[8] = "B3AA00";
    color[9] = "008ED6";
    color[10] = "9D080D";
    color[11] = "A186BE";
}

Generate 3D pie graph

private void CreatePieGraph()
{
    string strCaption = "Month wise Product Distribution";
    string strSubCaption = "For the year 2010";
    string xAxis = "Month";
    string yAxis = "Qnty";

    //strXML will be used to store the entire XML document generated
    string strXML = null;

    //Generate the graph element
    strXML = @"<graph caption='" + strCaption + @"' subCaption='" + strSubCaption + @"' decimalPrecision='0' 
                      pieSliceDepth='30' formatNumberScale='0'
                      xAxisName='" + xAxis + @"' yAxisName='" + yAxis + @"' rotateNames='1'
                >";

    int i = 0;

    foreach (DataRow dr2 in dt.Rows)
    {
        strXML += "<set name='" + dr2[0].ToString() + "' value='" + dr2[1].ToString() + 
           "' color='" + color[i] + @"'  link="JavaScript:myJS('" + 
           dr2["Month"].ToString() + ", " + dr2["Qnty"].ToString() + "'); "/>";
        i++;
    }

    //Finally, close <graph> element
    strXML += "</graph>";

    FCLiteral3.Text = FusionCharts.RenderChartHTML(
        "FusionCharts/FCF_Pie3D.swf", // Path to chart's SWF
        "",                              // Leave blank when using Data String method
        strXML,                          // xmlStr contains the chart data
        "mygraph1",                      // Unique chart ID
        GraphWidth, GraphHeight,                   // Width & Height of chart
        false
        );
}

Generate bar graph

private void CreateBarGraph()
{
    string strCaption = "Month wise Product Distribution";
    string strSubCaption = "For the year 2010";
    string xAxis = "Month";
    string yAxis = "Qnty";

    //strXML will be used to store the entire XML document generated
    string strXML = null;

    //Generate the graph element
    strXML = @"<graph caption='" + strCaption + @"' subCaption='" + strSubCaption + @"' decimalPrecision='0' 
                      pieSliceDepth='30' formatNumberScale='0'
                      xAxisName='" + xAxis + @"' yAxisName='" + yAxis + @"' rotateNames='1'
                >";

    int i = 0;

    foreach (DataRow dr2 in dt.Rows)
    {
        strXML += "<set name='" + dr2[0].ToString() + "' value='" + dr2[1].ToString() + 
          "' color='" + color[i] + @"'  link="JavaScript:myJS('" + 
          dr2["Month"].ToString() + ", " + dr2["Qnty"].ToString() + "'); "/>";
        i++;
    }

    //Finally, close <graph> element
    strXML += "</graph>";

    FCLiteral2.Text = FusionCharts.RenderChartHTML(
        "FusionCharts/FCF_Column3D.swf", // Path to chart's SWF
        "",                              // Leave blank when using Data String method
        strXML,                          // xmlStr contains the chart data
        "mygraph1",                      // Unique chart ID
        GraphWidth, GraphHeight,                   // Width & Height of chart
        false
        );
}

Generate line graph

private void CreateLineGraph()
{
    string strCaption = "Month wise Product Distribution";
    string strSubCaption = "For the year 2010";
    string xAxis = "Month";
    string yAxis = "Qnty";

    //strXML will be used to store the entire XML document generated
    string strXML = null;

    //Generate the graph element
    strXML = @"
        <graph caption='" + strCaption + @"' 
        subcaption='" + strSubCaption + @"'
        hovercapbg='FFECAA' hovercapborder='F47E00' formatNumberScale='0' decimalPrecision='2' 
        showvalues='0' numdivlines='3' numVdivlines='0' yaxisminvalue='80.00' yaxismaxvalue='80.00'  
        rotateNames='1'
        showAlternateHGridColor='1' AlternateHGridColor='ff5904' divLineColor='ff5904' 
        divLineAlpha='20' alternateHGridAlpha='5' 
        xAxisName='" + xAxis + @"' yAxisName='" + yAxis + @"' 
        >        
        ";

    string tmp = null;

    tmp = @"<categories font='Arial' fontSize='11' fontColor='000000'>";
    foreach (DataRow dr2 in dt.Rows)
    {
        tmp += @"<category name='" + dr2["Month"].ToString().Trim() + @"' />";
    }
    tmp += @"</categories>";

    strXML += tmp;

    tmp = @"<dataset seriesName='2010' color='1D8BD1' anchorBorderColor='1D8BD1' anchorBgColor='1D8BD1'>";
    foreach (DataRow dr2 in dt.Rows)
    {
        tmp += @"<set value='" + dr2["Qnty"].ToString().Trim() + 
          @"'  link="JavaScript:myJS('" + dr2["Month"].ToString() + 
          ", " + dr2["Qnty"].ToString() + "'); " />";
    }

    tmp += @"</dataset>";

    strXML += tmp;


    strXML += "</graph>";

    FCLiteral1.Text = FusionCharts.RenderChartHTML(
        "FusionCharts/FCF_MSLine.swf",   // Path to chart's SWF
        "",                              // Leave blank when using Data String method
        strXML,                          // xmlStr contains the chart data
        "mygraph4",                      // Unique chart ID
        GraphWidth, GraphHeight,         // Width & Height of chart
        false
        );
}

Generate doughnut graph

private void CreateDoughnutGraph()
{
    string strCaption = "Month wise Product Distribution";
    string strSubCaption = "For the year 2010";
    string xAxis = "Month";
    string yAxis = "Qnty";

    //strXML will be used to store the entire XML document generated
    string strXML = null;

    //Generate the graph element
    strXML = @"<graph caption='" + strCaption + @"' subCaption='" + strSubCaption + @"' decimalPrecision='0' 
                      pieSliceDepth='30' formatNumberScale='0'
                      xAxisName='" + xAxis + @"' yAxisName='" + yAxis + @"' rotateNames='1'
                >";

    int i = 0;

    foreach (DataRow dr2 in dt.Rows)
    {
        strXML += "<set name='" + dr2[0].ToString() + "' value='" + dr2[1].ToString() + 
          "' color='" + color[i] + @"'  link="JavaScript:myJS('" + 
          dr2["Month"].ToString() + ", " + dr2["Qnty"].ToString() + "'); "/>";
        i++;
    }

    //Finally, close <graph> element
    strXML += "</graph>";

    FCLiteral4.Text = FusionCharts.RenderChartHTML(
        "FusionCharts/FCF_Doughnut2D.swf", // Path to chart's SWF
        "",                              // Leave blank when using Data String method
        strXML,                          // xmlStr contains the chart data
        "mygraph1",                      // Unique chart ID
        GraphWidth, GraphHeight,                   // Width & Height of chart
        false
        );
}

References

• http://docs.fusioncharts.com/free/

Conclusion

FusionCharts Free is an open-source free Flash charting component that can be used to render data-driven animated charts. Made in Macromedia Flash MX, FusionCharts can be used with any web scripting language like PHP, ASP, .NET, JSP, ColdFusion, JavaScript, Ruby on Rails 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, interactive and visually-arresting charts.

Conclusion

I will show some more graph examples like Candlestick, Gantt, etc., in my upcoming tutorial.

History

None so far.