Introduction to the FusionCharts ASP.NET Wrapper

FusionCharts ASP.NET Wrapper can be downloaded from here.

FusionCharts Suite XT includes the FusionCharts server-side ASP.NET wrapper that lets you create interactive, data-driven charts. FusionCharts uses JavaScript and HTML code to generate charts in the browser. Using the ASP.NET wrapper you can create charts in your ASP.NET website without having to write any JavaScript code. The required JavaScript and HTML code is generated as a string in the server and inserted in the web page for generating charts.

In this section, you will be shown how you can create a simple chart using the FusionCharts ASP.NET wrapper.

The FusionCharts ASP.NET server-side wrapper requires a .NET Framework 3.5 or higher.

Before you begin, make sure that you have copied the FusionCharts.dll file in the Bin folder of your application.

Creating a Simple Chart using the FusionCharts ASP.NET Wrapper

A column 3D chart that shows the monthly revenue for the last year at Harry’s SuperMart is shown below:

FusionCharts will load here..

As an example, we will try to create this chart using the ASP.NET wrapper.

Create two files named JSONURL.aspx and JSONURL.aspx.cs.

The data structure that goes into the 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 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)
          {
              // 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 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

The FusionCharts Chart class is used to initialize an object to create the chart. The Render() method is used to generate the HTML code required to render the chart. The parameters of the Chart class and the Render() method are explained in detail below.

The FusionCharts Chart Class

Constructor Parameters

The syntax of the Chart class constructor used to initialize the chart object is:

Chart <object name> = new Chart (chartType, chartId, chartWidth, chartHeight, dataFormat, dataSource, bgColor, bgOpacity)

Given below is a brief description of the constructor parameters:

Parameter	Type	Description
`chartType`	String	It is used to specify the type of chart to be rendered.
`chartId`	String	It is used to specify a unique identifier for the chart. If multiple charts are rendered on the same HTML page, each chart is referred to using its unique ID.
`chartWidth`	String	It is used to specify the width of the chart, in pixels.
`chartHeight`	String	It is used to specify the height of the chart, in pixels.
`dataFormat`	String	It is used to specify the type of data that will be passed to the chart. This attribute takes the following values: `json`, `xml`, `jsonurl`, `xmlurl`.
`dataSource`	String	It specifies the source from where the data will be fetched, depending on the value passed to the `dataFormat` attribute.
`bgColor`	String	It is used to specify the hex code for the background color of the chart.
`bgOpacity`	String	It is used to specify the background opacity for the chart. This attribute takes values between 0 (transparent) and 100 (opaque).

It is not necessary that you assign values for all parameters during initialization. The order of parameters, however, needs to be preserved. Also, you need to make sure that all of these parameters have been assigned values using the constructor, the Chart class methods, or the Render() method before you run the application. If not, either the chart will not render at all or it will not render the way you want it to.

Methods under the Chart Class

Given below is a brief description of the methods in the Chart class:

Method Name Description

Method Name	Description
`SetChartParameter`	It is used to set or modify the values for chart parameters like `chartType`, `chartWidth`, `chartHeight`, etc. This method takes the following parameters: `param`: Type: enum Description: It is used to specify the name of the chart parameter that you want to set/modify. For example, `Chart.ChartParameter.chartType` `value`: Type: String Description: It is used to specify the value for the chart parameter. For example, `column2d`.
`GetChartParameter`	It is used to get the value of any chart parameter. This method takes the following parameters: `param`: Type: enum Description: It is used to specify the name of the chart parameter whose value you want to get. For example, `Chart.ChartParameter.chartType`
`SetData`	It is used to set the data source for the chart. This method takes the following parameters: `dataSource`: Type: String Description: It is used to specify the data for the chart. For example, `data/data.xml`. `format`: Type: enum Description: It is used to specify the format of the data source. This is an optional parameter.

SetChartParameter

It is used to set or modify the values for chart parameters like chartType, chartWidth, chartHeight, etc. This method takes the following parameters:

param:
Type: enum
Description: It is used to specify the name of the chart parameter that you want to set/modify. For example, Chart.ChartParameter.chartType

value:
Type: String
Description: It is used to specify the value for the chart parameter. For example, column2d.

GetChartParameter

It is used to get the value of any chart parameter. This method takes the following parameters:

param:
Type: enum
Description: It is used to specify the name of the chart parameter whose value you want to get. For example, Chart.ChartParameter.chartType

SetData

It is used to set the data source for the chart. This method takes the following parameters:

dataSource:
Type: String
Description: It is used to specify the data for the chart. For example, data/data.xml.

format:
Type: enum
Description: It is used to specify the format of the data source. This is an optional parameter.

The Render() Method

Given below is a brief description of the parameters that can be passed using this method:

Parameter	Type	Description
`chartType`	String	It is used to specify the type of chart to be rendered.
`chartId`	String	It is used to specify a unique identifier for the chart. If multiple charts are rendered on the same HTML page, each chart is referred to using its unique ID.
`chartWidth`	String	It is used to specify the width of the chart, in pixels.
`chartHeight`	String	It is used to specify the height of the chart, in pixels.
`dataFormat`	String	It is used to specify the type of data that will be passed to the chart. This attribute takes the following values: `json`, `xml`, `jsonurl`, and `xmlurl`.
`dataSource`	String	It specifies the source from where the data will be fetched, depending on the value passed to the `dataFormat` attribute.
`bgColor`	String	It is used to specify the hex code for the background color of the chart.
`bgOpacity`	String	It is used to specify the background opacity for the chart. This attribute takes values between 0 (transparent) and 100 (opaque).

For a working sample, you can use the asp-net-wrapper.zip included in the download package.