In this article I’m going to explain how to create Fusion multi series Column chart from database in ASP.NET.

         Fusion Charts are made up of one or more series. Normally, each series would be a single line or column etc. The design of the charting system is very flexible, so a custom series can basically be anything it wants to be. In order to be this flexible, the chart looks at the series definitions to help determine the axis details and range. Then it goes through the defined series and has them draw themselves. 

You can download Fusion charts by following the link given below or you can download source code which has been attached along with this article.

http://sourceforge.net/projects/fusioncharts/

Fusion Charts:

          FusionCharts Free is an open-source FREE flash charting component that can be used to render data-driven animated charts.

          If you are not aware of Fusion charts and how to install or configure this, please you could refer these articles

          Getting started with Fusion Charts

            How to install or configure Fusion Charts in ASP.NET

How Fusion Charts works.?

            As you must already be aware by now, FusionCharts accepts only XML data to plot the charts. You can either provide physical XML data files or dynamically relay XML data using server-side scripts to FusionCharts. Here, we explore the various methods using which you can provide XML data to FusionCharts.

There are 3 ways using which you can provide XML data to FusionCharts:

  1. dataURL method - In this method, you only provide the URL of XML Data Document to FusionCharts. The chart now sends a request for XML data to the specified URL, reads it, parses it and then renders the charts accordingly.
  2. dataXML method - Here, you send the XML data along with the HTML Content and chart SWF file to the browser. The SWF loads, reads this data (present in same HTML page) and then renders the chart.
  3. JavaScript method using updateChartXML - In this method, you provide the XML data to FusionCharts using JavaScript functions (present on the same page in which chart is present).

For more details

          Here I’ll show you how to create Fusion multi series Column chart from SQL Server database. First we have to create table. Table design and sample data given below.   

Table design:

Column name

Data type

id

int

year

varchar(50)

sales

varchar(10)

expences

varchar(10)

   

Sample data: 

id

year

sales

expences

1

2000

150000

50000

2

2001

100000

30000

3

2002

200000

100000

4

2003

180000

80000

5

2004

200000

90000

6

2005

250000

200000

 

Here we’ve to use following code to load Fusion Chart

<script type="text/javascript" language="JavaScript" src="FusionCharts/FusionCharts.js"> </script>

 

Designer source code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

        <script type="text/javascript" language="JavaScript" src="FusionCharts/FusionCharts.js"></script>

      <script type="text/javascript" language="JavaScript">

          function myJS(myVar) {

              window.alert(myVar);

          }     

      </script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

      <asp:Literal ID="FCLiteral1" runat="server"></asp:Literal>

    </div>

    </form>

</body>

</html>

 

Note:

          Here we have to use following namespace 

using InfoSoftGlobal; 

 

C# code:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Data;

using System.Data.SqlClient;

using InfoSoftGlobal;

 

public partial class _Default : System.Web.UI.Page

{

    DataTable dt = new DataTable("Chart");

    string GraphWidth = "650";

    string GraphHeight = "420";

    string[] color = new string[12];

    //Get connection string from web.config

    SqlConnection conn = new SqlConnection("Data source=localhost; Initial catalog=Demo; Integrated Security=True");

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {   

            LoadGraphData();

            CreateBarGraph();

        }

    }

 

    private DataTable LoadGraphData()

    {

        conn.Open();

        string cmd = "select year,sales,expences from Sales";

        SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);

        adp.Fill(dt);

        conn.Close();

        return dt;

    }

 

    private void CreateBarGraph()

    {

        try

        {

            string xmlData, categories, currentYear, previousYear;

            //Initialize <chart> element

            xmlData = @"<graph caption='Year wise Sales report' numberPrefix='$' formatNumberScale='1' rotateValues='1' placeValuesInside='1' decimals='0' >"; 

            //Initialize <categories> element - necessary to generate a multi-series chart

            categories = "<categories>"; 

            //Initiate <dataset> elements

            currentYear = "<dataset seriesName='Sales' color='#8BBA00'>";

            previousYear = "<dataset seriesName='Purchase' color='#FF8E46'>";

            //Iterate through the data

            int i = 0;

            foreach (DataRow DR in dt.Rows)

            {

                //Append <category name='...' /> to strCategories

                categories += "<category name='" + DR["year"].ToString() + "' />";

                               

                //Add <set value='...' /> to both the datasets

                currentYear += "<set value='" + DR["sales"].ToString() + "' />";

                previousYear += "<set value='" + DR["expences"].ToString() + "' />";

                i++;

            } 

            //Close <categories> element

            categories += "</categories>";

 

            //Close <dataset> elements

            currentYear += "</dataset>";

            previousYear += "</dataset>";

 

            //Assemble the entire XML now

            xmlData += categories + currentYear + previousYear + "</graph>";

 

            //Create the chart - MS Column 3D Chart with data contained in xmlData

            //  return FusionCharts.RenderChart("../../FusionCharts/MSColumn3D.swf", "", xmlData, "productSales", "600", "300", false, false);

 

            FCLiteral1.Text = FusionCharts.RenderChartHTML(

                "FusionCharts/FCF_MSColumn3D.swf", // Path to chart's SWF

                "",                              // Leave blank when using Data String method

                xmlData,                          // xmlStr contains the chart data

                "productSales",                      // Unique chart ID

                GraphWidth, GraphHeight,                   // Width & Height of chart

                false

                );

        }

        catch (Exception ex)

        { }   

    }        

}



View demo Download
http://www.dotnetfox.com/Document/1074/0Demo1.gif

If you enjoyed this article, get email updates (it's free).


Related Articles
  • How to create dynamic Google chart in ASP.NET using C#In this article I’m going to explain how to create dynamic Google chart in ASP.NET using C#. I got a requirement that I should make graphical representation for statistics data. So I’ve preferred to create Pie Chart. Already we’ve standard web control for Pie Chart in ASP.NET and AjaxControl Toolkit provides controls for Pie Chart. Google provides functionality to create Pie Chart in ASP.NET. Here...
  • How to create dynamic Ajax Pie Chart in ASP.NET using C# In this article I’m going to explain how to create dynamic Ajax pie chart in ASP.NET using C#. Ajax Control toolkit provides a ways to create Pie Chart that would be display the statistics data in graphical representation. The PieChart control enables you to render a pie chart from one or more PieChartValues. I already wrote some articles related to Chart
  • How to create dynamic Ajax Bar Chart in ASP.NET using C#In this article I’m going to explain how to create dynamic Ajax Bar Chart in ASP.NET using C#. Ajax Control toolkit provides a ways to create Bar Chart that would be display the statistics data in graphical representation. The BarChart control enables you to render a bar chart from one or more series of values. I already wrote some articles related to ASP.NET Chart
  • How to create dynamic Ajax Area Chart in ASP.NET using C#In this article I’m going to explain how to create dynamic Ajax Area Chart in ASP.NET using C#. Ajax Control toolkit provides a ways to create Area Chart that would be display the statistics data in graphical representation. The AreaChart control enables you to render area chart from one or more series of values. I already wrote some articles related to ASP.NET Chart.
  • Bind ASP.NET chart control from database using C# In this article I’m going to explain how to bind chart control from database in ASP.NET using C#. The Chart controls enable you to create ASP.NET pages with simple, intuitive, and visually compelling charts for complex statistical or financial analysis Here I’ll show you how to bind chart from SQL Server database.
  • Export Chart control to PDF document in ASP.NET using iTextSharp and C#In this article I’m going to explain how to export ASP.NET chart control to PDF using C#. I have already written an article about bind ASP.NET Chart control from database. You could refer this article by following this below link. Bind ASP.NET chart control from database using C#. If you are not aware to include iTextSharp.dll in ASP.NET project you could read this article How to create PDF docume...
  • Create google Geochart with region mode in ASP.NETIn this article I’m going to explain how to create google Geomap with region mode in ASP.NET. A Geochart is a map of a country, a continent, or a region with two modes: The region mode colorizes whole regions, such as countries, provinces, or states. The marker mode marks designated regions using bubbles that are scaled according to a value that you specify. A Geochart is rendered within the brows...
  • Create google Geochart with Marker mode in ASP.NETIn this article I’m going to explain how to create google Geomap with marker mode in ASP.NET. A Geochart is a map of a country, a continent, or a region with two modes: The region mode colorizes whole regions, such as countries, provinces, or states. The marker mode marks designated regions using bubbles that are scaled according to a value that you specify. A Geochart is rendered within the brows...
  • Create multi column or multi series bar chart from database in ASP.NET In this article I’m going to explain how to create multi column or multi series bar chart from database in ASP.NET using C#. The Chart controls enable you to create ASP.NET pages with simple, intuitive, and visually compelling charts for complex statistical or financial analysis. If you want to create multi series bar chart you could follow the steps given below. Step-1: First drag and drop Chart...
  • How to install or configure Fusion Charts in ASP.NETFusionCharts Free can effectively be used within ASP.NET applications. For the sake of better understanding, we have developed few sample applications using ASP.NET C#, where we have shown how easily FusionCharts can be integrated with ASP.NET. You can download Fusion charts by following the link given below or you can download source code which has been attached along with this article.

Comments
comments powered by Disqus

Thanks for downloading..!!

×
Subscribe via Email
    
message to display in fancybox