Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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:

FusionCharts will load here..

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>
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="MultiSeriesJSON.aspx.vb" Inherits="Samples_ArrayExample_MultiSeriesJSON" %>

        <!DOCTYPE html>

        <html xmlns="http://www.w3.org/1999/xhtml">
        <head runat="server">
            <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();
      }
    }
Imports System.Collections
    Imports System.Configuration
    Imports System.Data
    Imports System.Web
    Imports System.Web.Security
    Imports System.Web.UI
    Imports System.Web.UI.HtmlControls
    Imports System.Web.UI.WebControls
    Imports System.Web.UI.WebControls.WebParts
    Imports System.Text
    ' Use FusionCharts.Charts name space
    Imports FusionCharts.Charts
    Partial Class Samples_ArrayExample_MultiSeriesJSON
        Inherits System.Web.UI.Page
        Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
            '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. 
            Dim arrData As Object(,) = New Object(5, 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 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) = 367300
            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 JSON. 
            'We convert using string concatenation.
            'jsonData - Stores the entire JSON string
            'categories - Stores pertial  for the <categories> and child <category> elements
            'currentYear - Stores XML for current year's sales
            'previousYear - Stores XML for previous year's sales
            Dim jsonData As New StringBuilder()
            Dim categories As New StringBuilder()
            Dim currentYear As New StringBuilder()
            Dim previousYear As New StringBuilder()

            'Initialize chart object of the JSON
            ' add chart level attrubutes
            jsonData.Append("{" + "'chart': {" + "'caption': 'Sales by Product'," + "'numberPrefix': '$'," + "'formatNumberScale': '1'," + "'placeValuesInside': '1'," + "'decimals': '0'" + "},")

            'Initial string part of categories element - necessary to generate a multi-series chart
            categories.Append("'categories': [" + "{" + "'category': [")

            'Initial string part of dataset elements
            ' dataset level attributes
            currentYear.Append("{" + "'seriesname': 'Current Year'," + "'data': [")
            ' dataset level attributes
            previousYear.Append("{" + "'seriesname': 'Previous Year'," + "'data': [")

            'Iterate through the data 
            For i As Integer = 0 To arrData.GetLength(0) - 1
                If i > 0 Then
                    categories.Append(",")
                    currentYear.Append(",")
                    previousYear.Append(",")
                End If
                'Append individual category to strCategories
                ' category level attributes
                categories.AppendFormat("{{" + "'label': '{0}'" + "}}", arrData(i, 0))
                'Add individual data to both the datasets
                ' data level attributes
                currentYear.AppendFormat("{{" + "'value': '{0}'" + "}}", arrData(i, 1))
                ' data level attributes
                previousYear.AppendFormat("{{" + "'value': '{0}'" + "}}", arrData(i, 2))
            Next

            'Closing part of the categories object
            categories.Append("]" + "}" + "],")

            '''/Closing part of individual dataset object
            currentYear.Append("]" + "},")
            previousYear.Append("]" + "}")

            'Assemble the entire XML now
            jsonData.Append(categories.ToString())
            jsonData.Append("'dataset': [")
            jsonData.Append(currentYear.ToString())
            jsonData.Append(previousYear.ToString())
            jsonData.Append("]" + "}")

            ' Initialize chart - Multi-series Line 2D Chart with data from Data/Data.json
            Dim sales As New Chart("msline", "myChart", "600", "350", "json", jsonData.ToString())
            ' Render the chart
            Literal1.Text = sales.Render()
        End Sub
    End Class

To know more about the attributes that you can configure for the multi-series line chart, visit this page.

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:

FusionCharts will load here..

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>
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="CombinationXML.aspx.vb" Inherits="Samples_ArrayExample_CombinationXML" %>

      <!DOCTYPE html>

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
          <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();
      }
    }
Imports System.Data
      Imports System.Configuration
      Imports System.Collections
      Imports System.Web
      Imports System.Web.Security
      Imports System.Web.UI
      Imports System.Web.UI.WebControls
      Imports System.Web.UI.WebControls.WebParts
      Imports System.Web.UI.HtmlControls
      Imports System.Text
      ' Use FusionCharts.Charts name space
      Imports FusionCharts.Charts
      Partial Class Samples_ArrayExample_CombinationXML
          Inherits System.Web.UI.Page
          Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
              'In this example, we plot a Combination chart from data contained
              'in an array. The array will have three columns - first one for Quarter Name
              'second one for sales figure and third one for quantity. 

              Dim arrData As Object(,) = New Object(3, 2) {}
              'Store Quarter Name
              arrData(0, 0) = "Quarter 1"
              arrData(1, 0) = "Quarter 2"
              arrData(2, 0) = "Quarter 3"
              arrData(3, 0) = "Quarter 4"
              'Store revenue data
              arrData(0, 1) = 576000
              arrData(1, 1) = 448000
              arrData(2, 1) = 956000
              arrData(3, 1) = 734000
              'Store Quantity
              arrData(0, 2) = 576
              arrData(1, 2) = 448
              arrData(2, 2) = 956
              arrData(3, 2) = 734

              'Now, we need to convert this data into combination XML. 
              'We convert using string concatenation.
              'strXML - Stores the entire XML
              'strCategories - Stores XML for the <categories> and child <category> elements
              'strDataRev - Stores XML for current year's sales
              'strDataQty - Stores XML for previous year's sales

              Dim strXML As New StringBuilder()
              Dim strCategories As New StringBuilder()
              Dim strDataRev As New StringBuilder()
              Dim strDataQty As New StringBuilder()

              'Initialize <chart> element
              strXML.Append("<chart palette='4' caption='Product A - Sales Details' PYAxisName='Revenue' SYAxisName='Quantity (in Units)' numberPrefix='$' formatNumberScale='0' showValues='0' decimals='0' >")

              'Initialize <categories> element - necessary to generate a multi-series chart
              strCategories.Append("<categories>")

              'Initiate <dataset> elements
              strDataRev.Append("<dataset seriesName='Revenue'>")
              strDataQty.Append("<dataset seriesName='Quantity' parentYAxis='S'>")

              'Iterate through the data 
              For i As Integer = 0 To arrData.GetLength(0) - 1
                  'Append <category name='...' /> to strCategories
                  strCategories.AppendFormat("<category name='{0}' />", arrData(i, 0))
                  'Add <set value='...' /> to both the datasets
                  strDataRev.AppendFormat("<set value='{0}' />", arrData(i, 1))
                  strDataQty.AppendFormat("<set value='{0}' />", arrData(i, 2))
              Next

              'Close <categories> element
              strCategories.Append("</categories>")

              'Close <dataset> elements
              strDataRev.Append("</dataset>")
              strDataQty.Append("</dataset>")

              'Assemble the entire XML now
              strXML.Append(strCategories.ToString())
              strXML.Append(strDataRev.ToString())
              strXML.Append(strDataQty.ToString())
              strXML.Append("</chart>")

              ' Initialize chart - Multi-series 2D Dual Y Combination Chart with data from Data/Data.json
              Dim sales As New Chart("mscombidy2d", "myChart", "600", "350", "xml", strXML.ToString())
              ' Render the chart
              Literal1.Text = sales.Render()
          End Sub
      End Class

To know more about the attributes that you can configure for the multi-series combination dual-y 2D chart, visit this page.

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:

FusionCharts will load here..

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>
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="JSON_URL.aspx.vb" Inherits="Samples_BasicExamples_JSON_URL" %>

      <!DOCTYPE html>

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
          <title>Basic FusionCharts population using JSON URL</title>
          <!-- FusionCharts script tag -->
          <script type="text/javascript" src="../../fusioncharts/fusioncharts.js"></script>
          <!-- End --> 
      </head>
      <body>
          Fusioncharts will render below
          <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();

      }

    }
Imports System.Collections
      Imports System.Configuration
      Imports System.Data
      Imports System.Web
      Imports System.Web.Security
      Imports System.Web.UI
      Imports System.Web.UI.HtmlControls
      Imports System.Web.UI.WebControls
      Imports System.Web.UI.WebControls.WebParts
      ' Use FusionCharts.Charts name space
      Imports FusionCharts.Charts
      Partial Class Samples_BasicExamples_JSON_URL
          Inherits System.Web.UI.Page
          Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
              ' This page demonstrates the ease of generating charts using FusionCharts.
              ' For this chart, we've used a pre-defined Data.json (contained in /Data/ folder)
              ' Ideally, you would NOT use a physical data file. Instead you'll have 
              ' your own ASP.NET scripts virtually relay the JSON / XML data document.
              ' For a head-start, we've kept this example very simple.

              ' Initialize chart - Column 3D Chart with data from Data/Data.json
              Dim sales As New Chart("column3d", "myChart", "600", "350", "jsonurl", "../../Data/Data.json")
              ' Render the chart
              Literal1.Text = sales.Render()
          End Sub

      End Class

To know more about the attributes that you can configure for the column 3D chart, visit this page.

Loading XML Data from a File

An angular gauge showing the customer satisfaction score at Los Angeles Topanga is shown below:

FusionCharts will load here..

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>
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="XML_URL.aspx.vb" Inherits="Samples_BasicExamples_XML_URL" %>

      <!DOCTYPE html>

      <html xmlns="http://www.w3.org/1999/xhtml">
      <head runat="server">
          <title>Basic FusionCharts population using XML URL</title>
          <!-- FusionCharts script tag -->
          <script type="text/javascript" src="../../fusioncharts/fusioncharts.js"></script>
          <!-- End --> 
      </head>
      <body>
          Fusioncharts will render below
          <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 = score.Render();
           }
      }
Imports System.Collections
      Imports System.Configuration
      Imports System.Data
      Imports System.Web
      Imports System.Web.Security
      Imports System.Web.UI
      Imports System.Web.UI.HtmlControls
      Imports System.Web.UI.WebControls
      Imports System.Web.UI.WebControls.WebParts
      ' Use FusionCharts.Charts name space
      Imports FusionCharts.Charts
      Partial Class Samples_BasicExamples_XML_URL
          Inherits System.Web.UI.Page
          Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
              ' This page demonstrates the ease of generating charts using FusionCharts.
              ' For this chart, we've used a pre-defined Data.xml (contained in /Data/ folder)
              ' Ideally, you would NOT use a physical data file. Instead you'll have 
              ' your own ASP.NET scripts virtually relay the JSON / XML data document.
              ' For a head-start, we've kept this example very simple.

              ' Initialize chart - Real-time Angular Chart with data from Data/Data.json
              Dim sales As New Chart("angulargauge", "myChart", "600", "350", "xmlurl", "../../Data/Data.xml")
              ' Render the chart
              Literal1.Text = sales.Render()
          End Sub
      End Class

To know more about the attributes that you can configure for the angular gauge, visit this page.

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

{ "chart": {}, "data": [ { "value": "Data value and label for data plot 1" }, { "value": "Data value and label for data plot 2" }, { "value": "Data value and label for data plot ..." }, { "value": "Data value and label for data plot n" } ] }
{
    "chart": {},
    "data": [
        {
            "value": "Data value and label for data plot 1"
        },
        {
            "value": "Data value and label for data plot 2"
        },
        {
            "value": "Data value and label for data plot ..."
        },
        {
            "value": "Data value and label for data plot n"
        }
    ]
}

For an example, click here.

Multi-series Chart

{ "chart": {}, "categories": [ { "category": [ { "label": "Label for category 1 " }, { "label": "Label for category 2 " }, { "label": "Label for category ... " }, { "label": "Label for category n " } ] } ], "dataset": [ { "data": [ { "value": "Value for category 1 series 1" }, { "value": "Value for category 2 series 1" }, { "value": "Value for category ... series 1" }, { "value": "Value for category n series 1" } ] }, { "data": [ { "value": "Value for category 1 series 2" }, { "value": "Value for category 2 series 2" }, { "value": "Value for category ... series 2" }, { "value": "Value for category n series 2" } ] }, { "data": [ { "value": "Value for category 1 series ..." }, { "value": "Value for category 2 series ..." }, { "value": "Value for category ... series ..." }, { "value": "Value for category n series ..." } ] }, { "data": [ { "value": "Value for category 1 series n" }, { "value": "Value for category 2 series n" }, { "value": "Value for category ... series n" }, { "value": "Value for category n series n" } ] } ] }
{
    "chart": {},
    "categories": [
        {
            "category": [
                {
                    "label": "Label for category 1 "
                },
                {
                    "label": "Label for category 2 "
                },
                {
                    "label": "Label for category ... "
                },
                {
                    "label": "Label for category n "
                }
            ]
        }
    ],
    "dataset": [
        {
            "data": [
                {
                    "value": "Value for category 1 series 1"
                },
                {
                    "value": "Value for category 2 series 1"
                },
                {
                    "value": "Value for category ... series 1"
                },
                {
                    "value": "Value for category n series 1"
                }
            ]
        },
        {
            "data": [
                {
                    "value": "Value for category 1 series 2"
                },
                {
                    "value": "Value for category 2 series 2"
                },
                {
                    "value": "Value for category ... series 2"
                },
                {
                    "value": "Value for category n series 2"
                }
            ]
        },
        {
            "data": [
                {
                    "value": "Value for category 1 series ..."
                },
                {
                    "value": "Value for category 2 series ..."
                },
                {
                    "value": "Value for category ... series ..."
                },
                {
                    "value": "Value for category n series ..."
                }
            ]
        },
        {
            "data": [
                {
                    "value": "Value for category 1 series n"
                },
                {
                    "value": "Value for category 2 series n"
                },
                {
                    "value": "Value for category ... series n"
                },
                {
                    "value": "Value for category n series n"
                }
            ]
        }
    ]
}

For an example, click here.

  • 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.

Top