Create a Column Chart Using FusionCharts and ASP.NET Framework
You can understand the basic architecture of FusionCharts.NET at a glance from the diagram given below:
As you can see, FusionCharts.NET is structured into two major modules - the Data Engine and the Visualization Engine. The first one deals with the data, while the second takes care of the rendering process and displays the chart on the browser.
The Data Engine of FusionCharts.NET lets you store data and perform various operations on it. That way, you get plenty of options to optimize and transform the data to suit your requirements, before you send it to the Visualization Engine. The Data Engine consists of the following:
Data Sources, which receives the raw data and creates an object to provide the data to the DataModel.
Data Operations, which you can apply to a DataModel, to create another optimized DataModel. You can send any of these DataModels to the Visualization Engine.
DataModel, which receives and stores optimized data. The Visualization Engine of FusionCharts.NET can only accept data in the form of a DataModel to render a chart.
The Visualization Engine of FusionCharts.NET renders the chart using the data you send to it through the DataModel. You can also configure functional and cosmetic attributes in the data that comes from the data engine. The final chart will include those configurations.
Overview of Column Charts
One of the most ubiquitous types of charts, column charts consist of vertical bars placed along a horizontal axis and help you quickly compare various data values.
Before you can build charts with FusionCharts.NET, you need to configure your system to have these loaded:
Visual Studio IDE and .NET Framework v3.5 (or later)
FusionCharts Suite XT, which you can download from here.
FusionCharts.NET assembly, which you can get here.
FusionCharts.NET supports many different types of charts. You can find them all listed here. In this blog, you will see how to create a column chart with FusionCharts .NET and ASP.NET.
Create a web application in Visual Studio. Open Visual Studio and follow the steps mentioned below:
Click on Create a New Project → ASP.NET Web Application (.NET Framework)
Type the project name.
Click on Create.
Click on Empty (as shown in the screenshot below).
Click on Create.
Now, add Fusioncharts JS files to this project. To do so:
Right click on the name of the solution.
Click on Add → New Folder
Name the new folder Script.
Right click on the Script folder
Click Add Existing Item.
Now, add a web form, inside which FusionCharts.NET will render the chart. To add the form:
Right click on the solution
Click Add → Web Form
Name the web form ColumnChart
Add reference of FusionCharts JS and theme files file in the .aspx page of your solution. Navigate to the ColumnChart.aspx page. Within the code, add the following lines inside
Now, add a Literal control in ColumnChart.aspx page. Copy and paste the code given below:
<form id="form1" runat="server"> <div> <asp:Literal ID="Literal1" runat="server"></asp:Literal> </div> </form>
Add reference of FusionCharts.NET in this application. To do so:
Right click on References
Click on Add Reference
From the Reference Manager window, browse to the FusionCharts.Visualization.dll and FusionCharts.DataEngine.dll files. Add both to the application (as shown in the screenshot below).
Use references to both FusionCharts.DataEngine and FusionCharts.Visualization. Navigate to the ColumnChart.aspx.cs page and add the following lines at the top of the code:
using FusionCharts.DataEngine; using FusionCharts.Visualization;
Insert the code given below within the PageLoad() event of the ColumnChart.aspx.cs page, to render the Column chart. In this example, you will fetch data from DataTable. However, you can also fetch data from SQL Server, a JSON file, or a CSV file.
The rendered chart will look as shown below:
Click here to edit the column chart.
Render Column Chart with Multiple Series
If the DataModel has more than one value column, the Visualization Engine will automatically render a Multi Series Column Chart.
Click here to edit a column chart with multiple value fields.
Render 3D Column Chart
If you set the ThreeD property to true (using the code shown below), the Visualization Engine will render a 3D column chart.
column.ThreeD = true;
Click here to edit a ThreeD column chart.
Render Overlapped Column Chart
If the DataModel has two or more value columns and you set the Overlapped property to true, then the Visualization Engine will render an overlapped column chart.
column.Overlapped = true;
Click here to edit an overlapped column chart.
Render Scrollable Column Chart
If you set the Scrollable property to true (using the code shown below), the Visualization Engine will render a Scrollable Column chart.
column.Scrollable = true;
Click here to edit a scrollable column chart.