FusionCharts.Visualization 0.9.0-beta

Overview

FusionCharts.NET is a charting library for ASP.NET MVC and ASP.NET WebForms, which uses FusionCharts JavaScript (HTML5) library internally to render interactive charts.

FusionCharts.NET abstracts you from writing messy JavaScript and JSON code within your ASP.NET code, by providing an object-oriented paradigm in which you can render charts using C# or VB. It provides two modules:

• FusionCharts Data Engine

• FusionCharts.NET Visualization

You load your data in Data Engine, transform your data and perform operations on data to make to chart-ready, and then provide to the Visualization engine, which plots the charts.

Supported Framework

.NET Framework 3.5 or higher

Supported template

ASP.NET MVC

ASP.NET WebForms

Download

Nuget download:

Install-Package FusionCharts.Visualization -Version 0.9.0-beta

Once installed from Nuget, it'll add some assemblies to your web project, and those assemblies will be automatically referenced to your project. It'll also add FusionCharts JavaScript libraries to your project under Scripts/FusionCharts/ folder.

API Reference

Include namespace in your project:

//include data engine
using FusionCharts.DataEngine;
//include visualizations
Using FusionCharts.Visualization;|

Add FusionCharts JavaScript library to your master file or ASPX page

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

Create your first chart

// Adding DataTable
DataTable ChartData = new DataTable();
ChartData.Columns.Add("Country", typeof(System.String));
ChartData.Columns.Add("Population", typeof(System.Double));
ChartData.Rows.Add("China", 1415045928);
ChartData.Rows.Add("India", 1354051854);
ChartData.Rows.Add("United states", 326766748);
ChartData.Rows.Add("Indonesia", 266794980);
ChartData.Rows.Add("Brazil", 210867954);
ChartData.Rows.Add("Pakistan", 200813818);
ChartData.Rows.Add("Nigeria", 195875237);
ChartData.Rows.Add("Bangladesh", 166368149);
ChartData.Rows.Add("Russia", 143964709);
ChartData.Rows.Add("Mexico", 130759074);

// Input Datatable to StaticSource
StaticSource source = new StaticSource(ChartData);

// Creates DataModel object
DataModel model = new DataModel();

// Add DataSource to the DataModel
model.DataSources.Add(source);

// Instantiate Column Chart
Charts.ColumnChart columnChart = new Charts.ColumnChart("first_column_chart");

// Set Chart's width and height
columnChart.Width = "700";
columnChart.Height = "400";

// Configure Export Settings to allow users to download as image
columnChart.Export.HandlerPath = "/FusionChartsExportHandler/FCExporter";
columnChart.Export.Mode = BaseExportObject.ExportMode.SERVER;
columnChart.Export.Enabled = true;
columnChart.Export.Action = BaseExportObject.ExportAction.DOWNLOAD;

// Set DataModel instance as the data source of the chart
columnChart.Data.Source = model;

// Category field for the chart
columnChart.Data.CategoryField("Country");

// Series field(s) for the chart
columnChart.Data.SeriesFields("Population");

// Set Chart Title
columnChart.Caption.Text = "World top 10 populated countries";

// Render the chart to 'ColumnChartLiteral' literal control
ColumnChartLiteral.Text = columnChart.Render();|

Configuring Export Handler:

FusionCharts export handler, which allows users to download JavaScript charts as images, gets automatically installed once we install FusionCharts.Visualization nuget package. However, in order to use it, you need to configure the following:

1. Make sure the PresentationCore and WindowsBase assemblies are referenced in your web project. These assemblies are automatically referenced when you install the nuget package, but in case if they are not, then you'll have to manually add them.

2. Add these dependencies into web.config:

 <compilation targetFramework="4.5" >
	<assemblies>
		<add assembly="WindowsBase, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
		<add assembly="PresentationCore, Version=3.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" />
	</assemblies>
</compilation>

3. Add the following line under <system.web> in web.config:

<httpRuntime targetFramework="4.5" requestValidationMode="2.0" />