FusionCharts ASP.NET Wrapper can be downloaded from here.
The FusionCharts ASP.NET wrapper lets you load data for a chart using:
a JSON string generated from a 2D array
an XML string generated from a 2D array
JSON URL of a file that contains chart data
XML URL of a file that contains chart data
In this section, you will be shown how the ASP.NET wrapper uses each of these methods to generate charts.
Before you begin, make sure that you have copied the FusionCharts.dll file in the Bin folder of your web application.
Loading Data from a 2D Array
Using a JSON String
A multi-series line chart that shows the sales data for six products for the previous and the current year is shown below:
As an example, we will look at how you can create this chart by generating a JSON string from the chart data contained in a 2D array.
The data structure that goes into the ../ArrayExample/MultiSeriesJSON.aspx file is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="MultiSeriesJSON.aspx.cs" Inherits="ArrayExample_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts - Simple</title>
<!-- FusionCharts script tag -->
<script type="text/javascript" src="../fusioncharts/fusioncharts.js"></script>
<!-- End -->
</head>
<body>
<div style="text-align:center">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</body>
</html>
The data structure that goes into the code behind ../ArrayExample/MultiSeriesJSON.aspx.cs file is given below:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Text;
// Use the `FusionCharts.Charts` namespace to be able to use classes and methods required to // create charts.
using FusionCharts.Charts;
public partial class ArrayExample_Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//The data to plot the sample multi-series chart is contained in the `arrData` array
// having six rows and three columns.
// Each row stores the sales data for each product.
// The first column stores the data labels for the products, and the second and
// third columns store the current year and previous year sales figures, respectively.
object[,] arrData = new object[6, 3];
//Store product labels in the first column.
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 the current year in the second column.
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 in the third column.
arrData[0, 2] = 367300;
arrData[1, 2] = 584500;
arrData[2, 2] = 754000;
arrData[3, 2] = 456300;
arrData[4, 2] = 754500;
arrData[5, 2] = 437600;
// To render a chart from the above data, you will have to convert this data into
// JSON data for the chart.
// You can do this using string concatenation.
//Create objects of the `StringBuilder` class to store the converted JSON strings.
// Define the `jsonData` object to store the entire chart data as a JSON string.
StringBuilder jsonData = new StringBuilder();
// Define the `categories` object to store the product labels converted to
// JSON strings.
StringBuilder categories = new StringBuilder();
//Define the `currentYear` and `previousYear` objects to store
// the converted current and previous years sales data, respectively.
StringBuilder currentYear = new StringBuilder();
StringBuilder previousYear = new StringBuilder();
//Initialize the chart object. Define the chart-level attributes and
// append them as strings to the chart data in the `jsonData` object
// using the `Append` method.
jsonData.Append("{" +
//Initialize the chart object with the chart-level attributes..
"'chart': {"+
"'caption': 'Sales by Product'," +
"'numberPrefix': '$',"+
"'formatNumberScale': '1'," +
"'placeValuesInside': '1'," +
"'decimals': '0'" +
"},");
//Initialize the `categories` and `category` object arrays.
//Using the `Append ` method, append the initial part of array definition as
// string to the `categories` StringBuilder object.
categories.Append("'categories': [" +
"{" +
"'category': [");
//Using the `Append` method, append the dataset level attributes and the initial part of
// the `data` object array definition to the
// `currentYear` StringBuilder object.
currentYear.Append("{" +
// dataset level attributes
"'seriesname': 'Current Year'," +
"'data': [");
//Using the `Append` method, append the dataset level attributes and the initial part of
// the `data` object array definition to the
// `previousYear` StringBuilder object.
previousYear.Append("{" +
// dataset level attributes
"'seriesname': 'Previous Year'," +
"'data': [");
//Iterate through the data contained in the `arrData` array.
for (int i = 0; i < arrData.GetLength(0); i++)
{
if (i > 0)
{
categories.Append(",");
currentYear.Append(",");
previousYear.Append(",");
}
//Append individual category-level data to the `categories` object.
categories.AppendFormat("{{" +
// category level attributes
"'label': '{0}'" +
"}}", arrData[i, 0]);
//Append current year’s sales data for each product to the `currentYear` object.
currentYear.AppendFormat("{{" +
// data level attributes
"'value': '{0}'" +
"}}", arrData[i, 1]);
//Append previous year’s sales data for each product to the `currentYear` object.
previousYear.AppendFormat("{{" +
// data level attributes
"'value': '{0}'" +
"}}", arrData[i, 2]);
}
//Append as strings the closing part of the array definition of the
// `categories` object array.
categories.Append("]" +
"}" +
"],");
//Append as strings the closing part of the array definition of the `data` object array to the `currentYear` and `previousYear` objects.
currentYear.Append("]" +
"},");
previousYear.Append("]" +
"}");
//Append the complete chart data converted to a string to the `jsonData` object.
jsonData.Append(categories.ToString());
jsonData.Append("'dataset': [");
jsonData.Append(currentYear.ToString());
jsonData.Append(previousYear.ToString());
jsonData.Append("]" +
"}");
// Initialize the chart.
Chart sales = new Chart("msline", "myChart", "600", "350", "json", jsonData.ToString());
// Render the chart.
Literal1.Text = sales.Render();
}
}
To know more about the attributes that you can configure for the multi-series line chart, visit http://docs.fusioncharts.com/tutorial-attr-msline.html.
Using a XML String
A combination chart that shows the quarterly sales details—the revenue generated and the units sold—for product A is shown below:
We will look at how you can create this chart using an XML string generated from data contained in a 2D array.
The data structure that goes into the ../ArrayExample/CombinationXML.aspx file is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CombinationXML.aspx.cs" Inherits="ArrayExample_Combination" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts - Simple</title>
<!-- FusionCharts script tag -->
<script type="text/javascript" src="../fusioncharts/fusioncharts.js"></script>
<!-- End -->
</head>
<body>
<div style="text-align:center">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</body>
</html>
The data structure that goes into the code behind ../ArrayExample/CombinationXML.aspx.cs file is given below:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Text;
// Use the `FusionCharts.Charts` namespace to be able to use classes and methods required to // create charts.
using FusionCharts.Charts;
public partial class ArrayExample_Combination : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// The data to plot the sample dual-y combination chart is contained in the
// `arrData` 2D array having six rows and three columns.
// Each row contains the sales data for product A for each quarter.
// The first column stores the labels to be rendered for each quarter,
// the second column stores the revenue generated, and
// the third column stores the no. of units sold in each quarter.
object[,] arrData = new object[4, 3];
//Store the labels for each quarter.
arrData[0, 0] = "Quarter 1";
arrData[1, 0] = "Quarter 2";
arrData[2, 0] = "Quarter 3";
arrData[3, 0] = "Quarter 4";
//Store revenue data for each quarter.
arrData[0, 1] = 576000;
arrData[1, 1] = 448000;
arrData[2, 1] = 956000;
arrData[3, 1] = 734000;
//Store quantity details for each quarter.
arrData[0, 2] = 576;
arrData[1, 2] = 448;
arrData[2, 2] = 956;
arrData[3, 2] = 734;
// Use string concatenation to convert the data in the `arrData` array into XML data for the
// combination chart.
//Create objects of the `StringBuilder` class are created to
//store the converted XML strings.
// Define the the `strXML` object
//to store the entire chart data as an XML string.
StringBuilder strXML=new StringBuilder();
// Define the `strCategories` object
//to store the labels for each quarter, converted to XML strings.
StringBuilder strCategories = new StringBuilder();
//Define the `strDataRev` and the `strDataQty` objects
// to store the revenue and quantity data, respectively, for product A.
StringBuilder strDataRev=new StringBuilder();
StringBuilder strDataQty=new StringBuilder();
//Initialize the <chart> element. Define the chart-level attributes and
// append them as strings to the `strXML` object.
strXML.Append("<chart palette='4' caption='Product A - Sales Details' PYAxisName='Revenue' SYAxisName='Quantity (in Units)' numberPrefix='$' formatNumberScale='0' showValues='0' decimals='0' >");
//Initialize the <categories> element.
strCategories.Append("<categories>");
//Initiate the <dataset> elements for the revenue and quantity data.
strDataRev.Append("<dataset seriesName='Revenue'>");
strDataQty.Append("<dataset seriesName='Quantity' parentYAxis='S'>");
//Iterate through the data in the `arrData` array
for (int i = 0; i < arrData.GetLength(0); i++)
{
//Append <category name='...' /> to `strCategories`
strCategories.AppendFormat("<category name='{0}' />",arrData[i, 0]);
//AppendAdd <set value='...' /> to both the datasets.
strDataRev.AppendFormat("<set value='{0}' />",arrData[i, 1]);
strDataQty.AppendFormat("<set value='{0}' />",arrData[i, 2]);
}
//Close the `<categories>` element..
strCategories.Append("</categories>");
//Close the `<dataset>` element for the revenue and quantity datasets.
strDataRev.Append("</dataset>");
strDataQty.Append("</dataset>");
//Append the complete chart data converted to a string to the the `strXML` object.
strXML.Append(strCategories.ToString());
strXML.Append(strDataRev.ToString());
strXML.Append(strDataQty.ToString());
strXML.Append("</chart>");
// Initialize the chart.
Chart sales = new Chart("mscombidy2d", "myChart", "600", "350", "xml", strXML.ToString());
// Render the chart.
Literal1.Text = sales.Render();
}
}
To know more about the attributes that you can configure for the multi-series combination dual-y 2D chart, visit http://docs.fusioncharts.com/tutorial-attr-combi2ddy.html.
Loading Chart Data from a File
Loading JSON Data from a File
A column 3D chart that shows the monthly revenue for the last year at Harry’s SuperMart is shown below:
We will look at how you can create this gauge by loading data from a .json file.
The data structure that goes into the ../BasicExample/JSONURL.aspx file is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JSONUrl.aspx.cs" Inherits="BasicExample_BasicChart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts - Simple</title>
<!-- FusionCharts script tag -->
<script type="text/javascript" src="../fusioncharts/fusioncharts.js"></script>
<!-- End -->
</head>
<body>
<div style="text-align:center">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</body>
</html>
The data structure that goes into the code behind ../BasicExample/JSONURL.aspx.cs file is given below:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
// Use the `FusionCharts.Charts` namespace to be able to use classes and methods
// required to create charts.
using FusionCharts.Charts;
public partial class BasicExample_BasicChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// The data for the sample chart is stored in the `Data.json` file
// (contained in the `Data` folder)
//Initialize the chart.
Chart sales = new Chart("column3d", "myChart", "600", "350", "jsonurl", "../Data/Data.json");
// Render the chart
Literal1.Text = sales.Render();
}
}
To know more about the attributes that you can configure for the column 3D chart, visit http://docs.fusioncharts.com/tutorial-attr-column3d.html.
Loading XML Data from a File
An angular gauge showing the customer satisfaction score at Los Angeles Topanga is shown below:
We will look at how you can create this gauge by loading data from a .xml file.
The data structure that goes into the ../BasicExample/XMLURL.aspx file is given below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="XMLUrl.aspx.cs" Inherits="BasicExample_BasicChart" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>FusionCharts - Simple</title>
<!-- FusionCharts script tag -->
<script type="text/javascript" src="../fusioncharts/fusioncharts.js"></script>
<!-- End -->
</head>
<body>
<div style="text-align:center">
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
</body>
</html>
The data structure that goes into the code behind ../BasicExample/XMLURL.aspx.cs file is given below:
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
// Use the `FusionCharts.Charts` namespace to be able to use classes and methods
// required to create charts.
using FusionCharts.Charts;
public partial class BasicExample_BasicChart : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// The data for the sample chart is stored in the `Data.xml` file
// (contained in the `Data` folder)
// Initialize the chart.
// The URL of the `.xml` file is passed as the value for the data source parameter of
// the `Chart` class constructor.
Chart score= new Chart("angulargauge", "myChart", "600", "350", "xmlurl", "../Data/Data.xml");
// Render the chart.
Literal1.Text = sales.Render();
}
}
To know more about the attributes that you can configure for the angular gauge, visit http://docs.fusioncharts.com/tutorial-attr-angular.html.
Important Tips for Developers
Given below are a few tips that, although applicable while using FusionCharts, need to be specifically paid attention to here:
- The structure of chart data is different based on whether you are rendering a single-series chart or a multi-series chart. The table below shows the difference:
| Single-series Chart | Multi-series Chart |
|---|---|
|
...
|
...
|
Make sure that the XML strings are escaped properly, especially for instances where the data for the chart is enclosed in quotation marks. Also make sure that the entire string is enclosed in single quotes, while the attributes and corresponding values are enclosed in double quotes. Doing otherwise will break the code.
The chart ID should be unique for all charts rendered on the same page. Otherwise, it will result in a JavaScript error.
There! You have now seen how you can use the FusionCharts ASP.NET wrapper to load chart data.