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!
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.
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.
View Comments
Not working ...=
Can you please let us know the issue faced?
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
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/
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.
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.
Hi, I was able to get the XML example working as expected, but when following the steps for the json example, the chart does not render.
I changed the dataUrl from Data/Data.xml to Data/Data.json and set the FusionCharts.SetDataFormat("json") before calling the FusionCharts.RenderChart method. Does something else need to be done?