JavaScript charts with ASP.NET (C#) using FusionCharts XT – Part 1

FusionCharts XT with ASP.NET is a new series in which we walk you through the fundamentals of creating a Javascript Interactive Graph with your.NET skills. FusionCharts is the industry’s most popular enterprise-grade JavaScript charting solution. Our enterprise customers have endorsed our products and services, and we are constantly adding newer products and features to our solution. FusionCharts Suite meets all of your charting needs, whether they are simple column or pie charts, gauges, advanced zoom and scroll charts, or specialized financial charts. All of the charts include interactive features such as tooltips, drill-downs, and exporting as an image, PDF, or CSV. We’re also iPhone and iPad ready! With FusionCharts XT, you can leverage your .NET skills to create JavaScript charts. We provide a .NET library that generates all the HTML and JavaScript required to create charts. If you’re looking for a ASP.NET plugin that comes with event support for mouse, keyboard, and more, enabling you to add charts in runtime during any lifecycle phase of the application. Try the ASP.NET Plugin for FusionCharts and download it for free!

Table of Contents

FusionCharts XT with ASP.NET

• Part 1 – Create JavaScript charts in ASP.NET (C#)
• Part 2 – Plot JavaScript charts using SQL Server data
• Part 3 – Create Drill-Down charts in ASP.NET(C#)
• Part 4 – Create LinkedCharts in ASP.NET(C#)

What we are going to visualize

The chart below shows data of Top 5 Employees of a fictitious company.

In this tutorial, we will create the same chart using the .NET library.

.NET library bundled with FusionCharts XT

FusionCharts XT is essentially a JavaScript library. In order to render a chart, certain amount of HTML and JavaScript is required, along with the chart data in XML or JSON. In order to automate this, we provide a .NET library with FusionCharts XT, which generates the HTML and JavaScript required. You can find this library in FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll. By referencing this library, rendering charts is just one line of code! Let us see how..

What we will need

• Visual Studio or Visual Web Developer
• The latest version of FusionCharts XT
• Sample chart data

Preparing the project

We will be using Visual Studio 2010 for this series. Visual Studio 2008 or Visual Web Developer will suit fine too.

• Create a blank ASP.NET (C#) web site and save it as FusionChartsXT_with_ASPNET.
• Right-click the project’s name in Solution Explorer > Add New Item > Web Form. Keep the name as Default.aspx.
• Copy the Charts folder from the FusionCharts Download Package and paste it in the Solution Explorer.
• Include the FusionCharts XT’s JavaScript file in Default.aspx:

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

• Copy the Sample Data folder and paste it in the Solution Explorer.
• Right-click the project’s name in Solution Explorer > Add Reference > Browse. Now browse to FusionCharts XT Download Package > Code > CS > Bin > FusionCharts.dll.
• In Default.aspx.cs, include the namespace of this library by writing

  using InfoSoftGlobal;

The above steps are necessary whenever you want to use FusionCharts XT in a .NET project. Next, there are 2 ways by which you can supply data to your charts – the Data URL method and the Data String method. Let us try each one of them.

Creating a JavaScript chart using Data URL method

In the Data URL method, you tell FusionCharts XT to load data from an XML or JSON file URL. This URL could also point to a virtual data provider, e.g., /path_to/data_provider.aspx, which will execute queries on the database, construct the XML data and output it to the stream, with content type set to text/xml. For this example, we will point FusionCharts XT to an XML file’s URL. Create a Literal tag in Default.aspx, and give it a unique ID. We will write the code required to generate a chart to this literal. Then, FusionCharts.js would process this code and show a chart instead. In Default.aspx.cs, within the Page_Load method, write the following code:

// Set the rendering mode to "javascript". (Default is "flash")
FusionCharts.SetRenderer("javascript");

literal_1.Text = FusionCharts.RenderChart("FusionChartsXT/Column2D.swf", "Data/Data.xml", "", "browser_share", "640", "340", false, true);

Save. Run the project (F5). This is the chart that you should see:

You were able to render a chart in your .NET app with just one single line!

Understanding the RenderChart() method

The RenderChart() method does all the heavy lifting of generating HTML and JavaScript required to render a chart in the browser. It takes parameters in the following order:

• Chart SWF name: The first parameter contains the Path and file name of the chart SWF file. We have to use the relative path to SWF file, which is recommended. When plotting charts in JavaScript, FusionCharts XT uses the SWF name to internally map to the chart’s JavaScript alias.
• URL to static XML file: If Data URL method is to be used. If you intend to use Data String method, leave this as blank.
• Variable containing XML data string: If Data String method is to be used. If you have specified data as a URL, leave this parameter as blank.
• ID of the chart: Each chart on the page needs a unique ID. This ID is different from the ID of the container DIV. As we will learn later, this ID is used to get a reference to the chart for manipulation using advanced JavaScript.
• Width and height in pixels: Each chart needs to be initialized with width and height, specified either in pixels (specified in numeric format, without appending px) or percentage. In this example, we have used pixels. You can also set it to percentage values. The FusionCharts JavaScript class will automatically convert the percentage dimensions to pixel dimensions, with respect to the parent container element in HTML, DIV in this case, and pass it to the chart.
• Boolean for Debug Mode: If you’re facing any issues while developing your charts, you can initialize them in debug mode by setting this parameter to true. The debug mode gives you behind-the-scenes information on where data is loaded from, errors etc. In our example, we are rendering the chart in normal mode, by setting this parameter to false.
• Boolean for Registering with JavaScript: In earlier versions of FusionCharts, the last parameter let you configure whether charts could be controlled using JavaScript. Now that FusionCharts is very tightly integrated with FusionCharts, this parameter is a mandatory true.

Creating a JavaScript chart using Data String method

In the Data String method, the XML or JSON data is embedded within the web page, along with the chart’s HTML and JavaScript code. This method doesn’t require a static data file or a virtual data provider. Moreover, once the chart has finished loading, the data is present locally within the page. Let us create a chart using the Data String method below the first chart. Create another Literal tag with ID as literal_2. In the code-behind, comment the line of the RenderChart() method, and write the following code after it:

// xmlStr contains the XML data required for the chart
String xmlStr = "";

// Set rendering mode to "javascript".        
FusionCharts.SetRenderer("javascript");
       
literal_2.Text = FusionCharts.RenderChart("FusionChartsXT/Column2D.swf", "", xmlStr, "browser_share_2", "640", "340", false, true);


Save. Run the project (F5). You should see the following chart:

Providing chart data in JSON

JSON is another format that FusionCharts XT supports. If you want to provide data in JSON, simply write the following line before the RenderChart() method:

FusionCharts.SetDataFormat("json");

We provide a tool to convert XML to JSON. You can find it in FusionCharts XT Download Package > Tools > FCDataConverter. The JSON data for the above chart is:

{
  "chart": {
    "caption": "Top 5 Employees for 2011",
    "palette": "3",
    "showvalues": "0",
    "numberprefix": "$",
    "useroundedges": "1"
  },
  "data": [
    {
      "label": "Leverling",
      "value": "100524"
    },
    {
      "label": "Fuller",
      "value": "87790"
    },
    {
      "label": "Davolio",
      "value": "81898"
    },
    {
      "label": "Peacock",
      "value": "76438"
    },
    {
      "label": "Callahan",
      "value": "55091"
    }
  ]
}

Download the project source

Next article in this series: Create a chart using data from SQL Server

In the next article, we will create a chart using data from a database. You can head over to our documentation and read on how to use FusionCharts XT to create charts using data from SQL Server. Stay tuned.