JavaScript Charts in ASP.NET

Using the FusionCharts ASP wrapper, you can create interactive JavaScript charts, gauges and maps for your ASP.NET applications. Choose from 90+ charts or gauges and 1000+ maps based on your specific needs.

FusionCharts Suite XT is essentially a JavaScript library which combines HTML and JavaScript for chart rendering and accepts data in XML or JSON formats.

Download ASP.NET(C#) Wrapper OR View it on Github

Download ASP.NET(VB.NET) Wrapper OR View it on Github

*You will need FusionCharts Suite XT to create charts using this wrapper. If you haven’t downloaded it already, get it here.

Along with ASP.NET plugin, you will also need FusionCharts core JavaScript files which you can get from download page. Download FusionCharts JavaScript Files

Getting Started

Get started with creating charts in ASP.NET using the simple code samples below. To view the detailed documentation and more examples click here.

Example 1: Creating a 3D column chart with XML URL

View HTML Code View ASP.NET(C#) Code View ASP.NET(VB.NET) Code View Chart 
 
 <div style="text-align:center">
  <asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>                

 
 // This will go in C# file
using System;
using System.Collections;
using System.Configuration;
using System.Data;

using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

// Use FusionCharts.Charts name space
using FusionCharts.Charts;

public partial class BasicExample_BasicChart : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{
		// This page demonstrates the ease of generating charts using FusionCharts.
		// For this chart, we've used a pre-defined Data.xml (contained in /Data/ folder)
		// Ideally, you would NOT use a physical data file. Instead you'll have 
		// your own ASP.NET scripts virtually relay the XML data document. 
		// FusionCharts supports various data format, please comment the code for 
		// current data format (Chart.DataFormat.xmlurl) and uncomment the required format to view respective examples. 
		// For a head-start, we've kept this example very simple.

		// Create the chart - Column 3D Chart with data from Data/Data.xml
		Chart sales = new Chart();

		// Setting chart id
		sales.SetChartParameter(Chart.ChartParameter.chartId, "myChart");

		// Setting chart type to Column 3D chart
		sales.SetChartParameter(Chart.ChartParameter.chartType, "column3d");

		// Setting chart width to 600px
		sales.SetChartParameter(Chart.ChartParameter.chartWidth, "600");

		// Setting chart height to 350px
		sales.SetChartParameter(Chart.ChartParameter.chartHeight, "350");

		// Setting chart data as XML URL
		sales.SetData("Data/Data.xml", Chart.DataFormat.xmlurl);

		Literal1.Text = sales.Render();
	}
}                

 ' This will go in vb file  
Imports System.Collections
Imports System.Configuration
Imports System.Data

Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts

' Use FusionCharts.Charts name space
Imports FusionCharts.Charts

Partial Class Samples_sample_for_fusioncharts_com_3d_column_chart_using_xml_url
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' This page demonstrates the ease of generating charts using FusionCharts.
        ' For this chart, we've used a pre-defined Data.xml (contained in /Data/ folder)
        ' Ideally, you would NOT use a physical data file. Instead you'll have 
        ' your own ASP.NET scripts virtually relay the XML data document. 
        ' FusionCharts supports various data format, please comment the code for 
        ' current data format (Chart.DataFormat.xmlurl) and uncomment the required format to view respective examples. 
        ' For a head-start, we've kept this example very simple.

        ' Create the chart
        Dim sales As New Chart()

        ' Setting chart id
        sales.SetChartParameter(Chart.ChartParameter.chartId, "myChart")

        ' Setting chart type to Column 3D chart
        sales.SetChartParameter(Chart.ChartParameter.chartType, "column3d")

        ' Setting chart width to 600px
        sales.SetChartParameter(Chart.ChartParameter.chartWidth, "600")

        ' Setting chart height to 400px
        sales.SetChartParameter(Chart.ChartParameter.chartHeight, "400")

        ' Setting chart data as XML URL
        sales.SetData("Data/data.xml", Chart.DataFormat.xmlurl)
        ' Render the chart
        Literal1.Text = sales.Render()

    End Sub

End Class

Example 2: Creating a 3D column chart with XML String

View HTML Code View ASP.NET(C#) Code View ASP.NET(VB.NET) Code View Chart
<div style="text-align:center">
	<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>

                  
 // This will go in C# file
using System;
using System.Collections;
using System.Configuration;
using System.Data;

using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

// Use FusionCharts.Charts name space
using FusionCharts.Charts;

public partial class BasicExample_BasicChart : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{
		// This page demonstrates the ease of generating charts using FusionCharts.
		// For this chart, we've used a pre-defined Data.xml (contained in /Data/ folder)
		// Ideally, you would NOT use a physical data file. Instead you'll have 
		// your own ASP.NET scripts virtually relay the XML data document. 
		// FusionCharts supports various data format, please comment the code for 
		// current data format (Chart.DataFormat.xmlurl) and uncomment the required format to view respective examples. 
		// For a head-start, we've kept this example very simple.

		// Create the chart - Column 3D Chart with data from Data/Data.xml
		Chart sales = new Chart();

		// Setting chart id
		sales.SetChartParameter(Chart.ChartParameter.chartId, "myChart");

		// Setting chart type to Column 3D chart
		sales.SetChartParameter(Chart.ChartParameter.chartType, "column3d");

		// Setting chart width to 600px
		sales.SetChartParameter(Chart.ChartParameter.chartWidth, "600");

		// Setting chart height to 350px
		sales.SetChartParameter(Chart.ChartParameter.chartHeight, "350");

		// Setting chart data as XML String 
		sales.SetData("<chart caption='Monthly' xaxisname='Month' yaxisname='Revenue' numberprefix='$' showvalues='1' animation='0'> <set label='Jan' value='420000' /> <set label='Feb' value='910000' /> <set label='Mar' value='720000' /> <set label='Apr' value='550000' /> <set label='May' value='810000' /> <set label='Jun' value='510000' /> <set label='Jul' value='680000' /> <set label='Aug' value='620000' /> <set label='Sep' value='610000' /> <set label='Oct' value='490000' /> <set label='Nov' value='530000' /> <set label='Dec' value='330000' /> <trendlines> <line startvalue='700000' istrendzone='1' valueonright='1' tooltext='AYAN' endvalue='900000' color='009933' displayvalue='Target' showontop='1' thickness='5' /> </trendlines> &lt;styles&gt; <definition> &lt;style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /&gt; </definition> <application> <apply toobject='Canvas' styles='CanvasAnim' /> </application> &lt;/styles&gt; </chart>", Chart.DataFormat.xml);

		Literal1.Text = sales.Render();
	}
}

 ' This will go in vb file
Imports System.Collections
Imports System.Configuration
Imports System.Data

Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts

' Use FusionCharts.Charts name space
Imports FusionCharts.Charts

Partial Class Samples_sample_for_fusioncharts_com_3D_column_chart_using_XML_string
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' This page demonstrates the ease of generating charts using FusionCharts.
        ' For this chart, we've used a XML String
        ' FusionCharts supports various data format, please comment the code for 
        ' current data format (Chart.DataFormat.xml) and uncomment the required format to view respective examples. 
        ' For a head-start, we've kept this example very simple.

        ' Create the chart - Column 3D Chart
        Dim sales As New Chart()

        ' Setting chart id
        sales.SetChartParameter(Chart.ChartParameter.chartId, "myChart")

        ' Setting chart type to Column 3D chart
        sales.SetChartParameter(Chart.ChartParameter.chartType, "column3d")

        ' Setting chart width to 600px
        sales.SetChartParameter(Chart.ChartParameter.chartWidth, "600")

        ' Setting chart height to 350px
        sales.SetChartParameter(Chart.ChartParameter.chartHeight, "350")

        ' Setting chart data as XML String 
        sales.SetData("<chart caption='Monthly' xaxisname='Month' yaxisname='Revenue' numberprefix='$' showvalues='1' animation='0'> <set label='Jan' value='420000' /> <set label='Feb' value='910000' /> <set label='Mar' value='720000' /> <set label='Apr' value='550000' /> <set label='May' value='810000' /> <set label='Jun' value='510000' /> <set label='Jul' value='680000' /> <set label='Aug' value='620000' /> <set label='Sep' value='610000' /> <set label='Oct' value='490000' /> <set label='Nov' value='530000' /> <set label='Dec' value='330000' /> <trendlines> <line startvalue='700000' istrendzone='1' valueonright='1' tooltext='AYAN' endvalue='900000' color='009933' displayvalue='Target' showontop='1' thickness='5' /> </trendlines> &lt;styles&gt; <definition> &lt;style name='CanvasAnim' type='animation' param='_xScale' start='0' duration='1' /&gt; </definition> <application> <apply toobject='Canvas' styles='CanvasAnim' /> </application> &lt;/styles&gt; </chart>", Chart.DataFormat.xml)

        Literal1.Text = sales.Render()

    End Sub
End Class

Example 3: Creating a 3D column chart with JSON String

View HTML Code View ASP.NET(C#) Code View ASP.NET(VB.NET) Code View Chart 
<div style="text-align:center">
  <asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>                

 // This will go in C# file
using System;
using System.Collections;
using System.Configuration;
using System.Data;

using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;

// Use FusionCharts.Charts name space
using FusionCharts.Charts;

public partial class BasicExample_BasicChart : System.Web.UI.Page
{
	protected void Page_Load(object sender, EventArgs e)
	{
		// This page demonstrates the ease of generating charts using FusionCharts.
		// For this chart, we've used a pre-defined Data.xml (contained in /Data/ folder)
		// Ideally, you would NOT use a physical data file. Instead you'll have 
		// your own ASP.NET scripts virtually relay the XML data document. 
		// FusionCharts supports various data format, please comment the code for 
		// current data format (Chart.DataFormat.xmlurl) and uncomment the required format to view respective examples. 
		// For a head-start, we've kept this example very simple.

		// Create the chart - Column 3D Chart with data from Data/Data.xml
		Chart sales = new Chart();

		// Setting chart id
		sales.SetChartParameter(Chart.ChartParameter.chartId, "myChart");

		// Setting chart type to Column 3D chart
		sales.SetChartParameter(Chart.ChartParameter.chartType, "column3d");

		// Setting chart width to 600px
		sales.SetChartParameter(Chart.ChartParameter.chartWidth, "600");

		// Setting chart height to 350px
		sales.SetChartParameter(Chart.ChartParameter.chartHeight, "350");

		// Setting chart data as JSON String (Uncomment below line  
		sales.SetData("{\"chart\":{\"caption\":\"Monthly\",\"xaxisname\":\"Month\",\"yaxisname\":\"Revenue\",\"numberprefix\":\"$\",\"showvalues\":\"1\",\"animation\":\"0\"},\"data\":[{\"label\":\"Jan\",\"value\":\"420000\"},{\"label\":\"Feb\",\"value\":\"910000\"},{\"label\":\"Mar\",\"value\":\"720000\"},{\"label\":\"Apr\",\"value\":\"550000\"},{\"label\":\"May\",\"value\":\"810000\"},{\"label\":\"Jun\",\"value\":\"510000\"},{\"label\":\"Jul\",\"value\":\"680000\"},{\"label\":\"Aug\",\"value\":\"620000\"},{\"label\":\"Sep\",\"value\":\"610000\"},{\"label\":\"Oct\",\"value\":\"490000\"},{\"label\":\"Nov\",\"value\":\"530000\"},{\"label\":\"Dec\",\"value\":\"330000\"}],\"trendlines\":[{\"line\":[{\"startvalue\":\"700000\",\"istrendzone\":\"1\",\"valueonright\":\"1\",\"tooltext\":\"AYAN\",\"endvalue\":\"900000\",\"color\":\"009933\",\"displayvalue\":\"Target\",\"showontop\":\"1\",\"thickness\":\"5\"}]}],\"styles\":{\"definition\":[{\"name\":\"CanvasAnim\",\"type\":\"animation\",\"param\":\"_xScale\",\"start\":\"0\",\"duration\":\"1\"}],\"application\":[{\"toobject\":\"Canvas\",\"styles\":\"CanvasAnim\"}]}}", Chart.DataFormat.json);

		Literal1.Text = sales.Render();
	}
}
                

 ' This will go in vb file  
Imports System.Collections
Imports System.Configuration
Imports System.Data

Imports System.Web
Imports System.Web.Security
Imports System.Web.UI
Imports System.Web.UI.HtmlControls
Imports System.Web.UI.WebControls
Imports System.Web.UI.WebControls.WebParts

' Use FusionCharts.Charts name space
Imports FusionCharts.Charts
Partial Class Samples_sample_for_fusioncharts_com_3D_column_chart_using_JSON_String
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles MyBase.Load
        ' This page demonstrates the ease of generating charts using FusionCharts.
        ' For this chart, we've used a JSON String
        ' FusionCharts supports various data format, please comment the code for 
        ' current data format (Chart.DataFormat.json) and uncomment the required format to view respective examples. 
        ' For a head-start, we've kept this example very simple.

        ' Create the chart
        Dim sales As New Chart()

        ' Setting chart id
        sales.SetChartParameter(Chart.ChartParameter.chartId, "myChart")

        ' Setting chart type to Column 3D chart
        sales.SetChartParameter(Chart.ChartParameter.chartType, "column3d")

        ' Setting chart width to 500px
        sales.SetChartParameter(Chart.ChartParameter.chartWidth, "600")

        ' Setting chart height to 400px
        sales.SetChartParameter(Chart.ChartParameter.chartHeight, "350")

        ' Setting chart data as JSON String 
        sales.SetData("{'chart':{'caption':'Monthly','xaxisname':'Month','yaxisname':'Revenue','numberprefix':'$','showvalues':'1','animation':'0'},'data':[{'label':'Jan','value':'420000'},{'label':'Feb','value':'910000'},{'label':'Mar','value':'720000'},{'label':'Apr','value':'550000'},{'label':'May','value':'810000'},{'label':'Jun','value':'510000'},{'label':'Jul','value':'680000'},{'label':'Aug','value':'620000'},{'label':'Sep','value':'610000'},{'label':'Oct','value':'490000'},{'label':'Nov','value':'530000'},{'label':'Dec','value':'330000'}],'trendlines':[{'line':[{'startvalue':'700000','istrendzone':'1','valueonright':'1','tooltext':'AYAN','endvalue':'900000','color':'009933','displayvalue':'Target','showontop':'1','thickness':'5'}]}],'styles':{'definition':[{'name':'CanvasAnim','type':'animation','param':'_xScale','start':'0','duration':'1'}],'application':[{'toobject':'Canvas','styles':'CanvasAnim'}]}}", Chart.DataFormat.json)

        Literal1.Text = sales.Render()

    End Sub
End Class