FusionCharts XT with ASP.NET
- 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
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.
- 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.
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.
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:
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
- 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.
- 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.
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 = "";
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:
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:
"caption": "Top 5 Employees for 2011",
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.