In this section, we'll show you how to use FusionCharts and C# (ASP.NET) to plot charts from data contained in ASP.NET arrays. We'll cover the following examples here:
- Creating a single series chart from data contained in arrays
- Creating a multi-series chart from data contained in arrays
Before you go further with this page, we recommend you to please see the previous section "Basic Examples" as we start off from concepts explained in that page.
The code examples contained in this page are present in Download Package > Code > CS > ArrayExample folder. To view the solution you need to create a blank solution using your ASP.NET editor, copy or import all files to the solution and run it from there.
<%@ Page Language="C#" AutoEventWireup="false" CodeFile="SingleSeries.aspx.cs" Inherits="ArrayExample_SingleSeries" %> <HTML> <HEAD> <TITLE>FusionCharts - Array Example using Single Series Column 3D Chart</TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT> </HEAD> <body> <form id='form1' name='form1' method='post' runat="server"> <asp:Literal ID="Literal1" runat="server"></asp:Literal> </form> </body> </HTML>
In the above code, we first include FusionCharts.js file to enable us embed the chart using JavaScript.
And, the Page_Load event in code behind file SingleSeries.aspx.cs can be listed as under:
protected void Page_Load(object sender, EventArgs e)
{
//In this example, we plot a single series chart from data contained
//in an array. The array will have two columns - first one for data label
//and the next one for data values.
//Let's store the sales data for 6 products in our array). We also store
//the name of products.
object[,] arrData = new object[6, 2];
//Store Name of Products
arrData[0, 0] = "Product A";
arrData[1, 0] = "Product B";
arrData[2, 0] = "Product C";
arrData[3, 0] = "Product D";
arrData[4, 0] = "Product E";
arrData[5, 0] = "Product F";
//Store sales data
arrData[0, 1] = 567500;
arrData[1, 1] = 815300;
arrData[2, 1] = 556800;
arrData[3, 1] = 734500;
arrData[4, 1] = 676800;
arrData[5, 1] = 648500;
//Now, we need to convert this data into XML. We convert using StringBuilder concatenation.
StringBuilder xmlData=new StringBuilder();
//Initialize <chart> element
xmlData.Append("<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='0'>");
//Convert data to XML and append
for (int i = 0; i < arrData.GetLength(0); i++)
{
xmlData.AppendFormat("<set label='{0}' value='{1}' />",arrData[i, 0],arrData[i, 1]);
}
//Close <chart> element
xmlData.Append("</chart>");
//Create the chart - Column 3D Chart with data contained in xmlData
Literal1.Text = FusionCharts.RenderChart("../FusionCharts/Column3D.swf", "", xmlData.ToString(), "productSales", "600", "300", false, true);
}In this method, we define an array arrData to store sales data for 6 different products. The array has two columns - first one for data label and the next one for data values.
We define a variable xmlData to store the entire XML data. To build the XML, we iterate through the array and using string concatenation. Finally, we render the chart using InfoSoftGlobal.FusionCharts.RenderChart() function and pass xmlData as dataXML.
When you view the chart, you'll see a chart as under:
<%@ Page Language="C#" AutoEventWireup="false" CodeFile="MultiSeries.aspx.cs" Inherits="MultiSeries" %> <HTML> <HEAD> <TITLE>FusionCharts - Array Example using Multi Series Column 3D Chart </TITLE> <SCRIPT LANGUAGE="Javascript" SRC="../FusionCharts/FusionCharts.js"></SCRIPT> </HEAD> <body> <form id='form1' name='form1' method='post' runat="server"> <asp:Literal ID="Literal1" runat="server"></asp:Literal> </form> </body> </HTML>
Again, we first include FusionCharts.js file to enable us embed the chart using JavaScript.
The Page_Load event in code behind page can be listed as under:
protected void Page_Load(object sender, EventArgs e)
{
//In this example, we plot a multi series chart from data contained
//in an array. The array will have three columns - first one for data label (product)
//and the next two for data values. The first data value column would store sales information
//for current year and the second one for previous year.
//Let//s store the sales data for 6 products in our array. We also store
//the name of products.
object[,] arrData = new object[6, 3];
//Store Name of Products
arrData[0, 0] = "Product A";
arrData[1, 0] = "Product B";
arrData[2, 0] = "Product C";
arrData[3, 0] = "Product D";
arrData[4, 0] = "Product E";
arrData[5, 0] = "Product F";
//Store sales data for current year
arrData[0, 1] = 567500;
arrData[1, 1] = 815300;
arrData[2, 1] = 556800;
arrData[3, 1] = 734500;
arrData[4, 1] = 676800;
arrData[5, 1] = 648500;
//Store sales data for previous year
arrData[0, 2] = 547300;
arrData[1, 2] = 584500;
arrData[2, 2] = 754000;
arrData[3, 2] = 456300;
arrData[4, 2] = 754500;
arrData[5, 2] = 437600;
//Now, we need to convert this data into multi-series XML.
//We convert using string concatenation.
//xmlData - Stores the entire XML
//categories - Stores XML for the <categories> and child <category> elements
//currentYear - Stores XML for current year's sales
//previousYear - Stores XML for previous year's sales
StringBuilder xmlData = new StringBuilder();
StringBuilder categories=new StringBuilder();
StringBuilder currentYear= new StringBuilder();
StringBuilder previousYear= new StringBuilder();
//Initialize <chart> element
xmlData.Append("<chart caption='Sales by Product' numberPrefix='$' formatNumberScale='1' rotateValues='1' placeValuesInside='1' decimals='0' >");
//Initialize <categories> element - necessary to generate a multi-series chart
categories.Append("<categories>");
//Initiate <dataset> elements
currentYear.Append("<dataset seriesName='Current Year'>");
previousYear.Append("<dataset seriesName='Previous Year'>");
//Iterate through the data
for (int i = 0; i < arrData.GetLength(0); i++)
{
//Append <category label='...' /> to strCategories
categories.AppendFormat("<category label='{0}' />",arrData[i, 0]);
//Add <set value='...' /> to both the datasets
currentYear.AppendFormat("<set value='{0}' />",arrData[i, 1]);
previousYear.AppendFormat("<set value='{0}' />",arrData[i, 2]);
}
//Close <categories> element
categories.Append("</categories>");
//Close <dataset> elements
currentYear.Append("</dataset>");
previousYear.Append("</dataset>");
//Assemble the entire XML now
xmlData.Append(categories.ToString());
xmlData.Append(currentYear.ToString());
xmlData.Append(previousYear.ToString());
xmlData.Append("</chart>");
//Create the chart - MS Column 3D Chart with data contained in xmlData
Literal1.Text = FusionCharts.RenderChart("../FusionCharts/MSColumn3D.swf", "", xmlData.ToString(), "productSales", "600", "300", false, true);
}In this method, we define an array arrData to store sales data for 6 different products. The array has three columns - first one for data label (product) and the next two for data values. The first data value column would store sales information for current year and the second one for previous year.
We define a variable xmlData to store the entire XML data. We also define categories, currentYear, previousYear variables to store XML data for categories elements, current year's dataset and previous year's dataset respectively. To build the XML, we iterate through the array and using string concatenation. We concatenate the entire XML finally in xmlData.
Finally, we render the chart using FusionCharts.RenderChart() function and pass xmlData as dataXML.
When you view the chart, you'll see a chart as under:
