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

FusionCharts XT with ASP.NET is a new series where we walk you through the basics of creating interactive JavaScript charts, using your .NET skills. FusionCharts Suite is the leading enterprise-grade JavaScript charting solution. Our enterprise customers have vouched for our products and support, and we keep adding newer products and features to our solution. Be it a simple column or pie chart, gauges, advanced zoom and scroll charts, or specialized financial charts, FusionCharts Suite covers all your charting requirements. All the charts support interactive options like tooltips, drill-down, exporting as image, PDF, or CSV. We’re iPhone and iPad ready, too!

With FusionCharts XT, you can leverage your .NET skills to create JavaScript charts. We provide a .NET library which generates all the HTML and JavaScript required to create charts.

FusionCharts XT with ASP.NET

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

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:

  • 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

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:

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:

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:

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:

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.

  • Rohit patel February 19, 2013, 2:02 pm

    Not working …=

    • Swarnam February 22, 2013, 8:53 pm

      Can you please let us know the issue faced?

  • Raghu November 9, 2013, 10:15 am

    I’ve downloaded your source code and ran it. But chart isn’t displaying. Within the code there is a methoda FusionCharts.RenderChart(“FusionChartsXT/Column2D.swf) but the swf file is not there in the folder

    • Swarnam December 9, 2013, 1:27 pm

      Hi Raghu,

      The charts SWF files and JavaScript files are not uploaded to the FusionCharts XT folder. As per your requirement, paste the contents of the Charts folder obtained while downloading the package.

      Download link:http://www.fusioncharts.com/download/trials/

  • Tarun March 8, 2014, 11:17 am

    Hi. i have all the file that are needed, but its not giving output…
    its only showing message — ” Loading chart. Please wait ”

    With out this line ” FusionCharts.SetRenderer(“javascript”);” i’m getting output normally. but i need to render in javascript which is very important. please help me on this issue.

    • Swarnam March 17, 2014, 10:21 am

      Hi Tarun,

      To render a Javascript charts, please ensure FusionCharts.HC.js, FusionCharts.HC.Charts.js and jquery.min.js are present in the same folder as FusionCharts.js.

Leave a Comment