Choose an item

Configuring your Chart using ASP.NET

FusionCharts.NET

We have released FusionCharts.NET which brings the seamless support of FusionCharts JavaScript charting library to Microsoft .NET Framework. Download it now to take advantage of the following powerful features:

  • Provide raw data and FusionCharts.NET automatically converts the data into JSON.
  • Dynamically slice and dice data to derive insights using the data engine.
  • All methods and properties are available in Visual Studio intellisense.
  • ...and many more. Get it now. Click here!

FusionCharts Suite XT includes advanced features that let you add more context to your chart and makes data visualization simpler. These features include updating chart data, annotations, trend-lines, and events.

This article focuses on how you can configure your charts using FusionCharts ASP.NET C# & VB wrapper to perform the following:

Update Chart Data

A chart, configured to update data values dynamically, is shown below:

FusionCharts will load here..
{
    "chart": {
        "caption": "Customer Satisfaction Score",
        "subcaption": "Los Angeles Topanga",
        "plotToolText": "Current Score: $value",
        "theme": "fusion",
        "chartBottomMargin": "50",
        "showValue": "1"
    },
    "colorRange": {
        "color": [
            {
                "minValue": "0",
                "maxValue": "90",
                "code": "#e44a00"
            },
            {
                "minValue": "90",
                "maxValue": "150",
                "code": "#f8bd19"
            },
            {
                "minValue": "150",
                "maxValue": "250",
                "code": "#6baa01"
            }
        ]
    },
    "dials": {
        "dial": [
            {
                "value": "70",
                "id": "dial1"
            }
        ]
    }
}

The consolidated code for the above chart is shown below:


using System;
using FusionCharts.Charts;

public partial class Pages_UpdateDataRuntime: System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
//json data in string format
string jsonData = "{ 'chart': { 'caption': 'Customer Satisfaction Score', 'subcaption': 'Los Angeles Topanga', 'plotToolText': 'Current Score: \$value', 'theme': 'fint', 'chartBottomMargin': '50', 'showValue': '1' }, 'colorRange': { 'color': [{ 'minValue': '0', 'maxValue': '45', 'code': '#e44a00' }, { 'minValue': '45', 'maxValue': '75', 'code': '#f8bd19' }, { 'minValue': '75', 'maxValue': '100', 'code': '#6baa01' }] }, 'dials': { 'dial': [{ 'value': '70', 'id': 'dial1' }] } }";
// create chart instance
// parameter
// chart type, chart id, chart width, chart height, data format, data source
Chart angulargauge = new Chart("angulargauge", "angular_gauge", "450", "250", "json", jsonData);

        //render chart
        Literal1.Text = angulargauge.Render();
    }

}




Imports FusionCharts.Charts
Partial Class Pages_UpdateDataRuntime
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
Dim jsonData As String = "{ 'chart': { 'caption': 'Customer Satisfaction Score', 'subcaption': 'Los Angeles Topanga', 'plotToolText': 'Current Score: $value', 'theme': 'fint', 'chartBottomMargin': '50', 'showValue': '1' }, 'colorRange': { 'color': [{ 'minValue': '0', 'maxValue': '45', 'code': '#e44a00' }, { 'minValue': '45', 'maxValue': '75', 'code': '#f8bd19' }, { 'minValue': '75', 'maxValue': '100', 'code': '#6baa01' }] }, 'dials': { 'dial': [{ 'value': '70', 'id': 'dial1' }] } }"
Dim angulargauge As Chart = New Chart("angulargauge", "angular_gauge", "450", "250", "json", jsonData)
Literal1.Text = angulargauge.Render()
End Sub
End Class

The HTML template for aspx file is shown below:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateDataRuntime.aspx.cs" Inherits="Pages_UpdateDataRuntime" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title>FusionCharts | update dial value at runtime</title>
</head>

<body style="font-family: Helvetica Neue, Arial; font-size: 16px;">
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script>
updateData = function () {
var value = document.getElementById("dial-val").value;
FusionCharts("angular_gauge").setDataForId("dial1",value);
}
</script>
<form id="form1" runat="server">
<h3>update dial value on runtime</h3>
<label for="dial-val">Input dial value</label>
<input name="dial-val" id="dial-val" type="number" /><input type="button" name="update dial" value="update dial" onclick="updateData()" />
<br />
<br />
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
<div><span>
<asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
</form>

</body>

</html>




<%@ Page Language="VB" AutoEventWireup="true" CodeFile="UpdateDataRuntime.aspx.vb" Inherits="Pages_UpdateDataRuntime" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title>FusionCharts | update dial value at runtime</title>
</head>

<body style="font-family: Helvetica Neue, Arial; font-size: 16px;">
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script>
updateData = function () {
var value = document.getElementById("dial-val").value;
FusionCharts("angular_gauge").setDataForId("dial1",value);
}
</script>
<form id="form1" runat="server">
<h3>update dial value on runtime</h3>
<label for="dial-val">Input dial value</label>
<input name="dial-val" id="dial-val" type="number" /><input type="button" name="update dial" value="update dial" onclick="updateData()" />
<br />
<br />
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
<div><span>
<asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
</form>

</body>

</html>

Apart from the usual boilerplate, the sample code provided above corresponds to the following tasks:

  1. Import and resolve the dependencies like System, and FusionCharts.Charts.

  2. Define a class Pages_UpdateDataRuntime inherited from System.Web.UI.Page. Correspondingly, in the .aspx file, Pages_UpdateDataRuntime is inherited.

  3. Within the class Pages_UpdateDataRuntime, define Page_Load():

    • Declare a string jsonData and use it to assign the chart configuration as a JSON string.

    • Create an instance of Chart (defined within FusionCharts.Charts), and assign it the necessary attributes of an Angular Gauge. See the source code comments for the attributes used. Of particular importance is the attribute chartType, which in this case is angulargauge. Find the complete list of chart types with their respective alias here.

    • Render the chart using the [instanceName].Render() method. Correspondingly, in the .aspx file, include the necessary chart and theme libraries modules using the <script> tags, like fusioncharts.js, fusioncharts.theme.fusion.js, followed by some JavaScript functions and buttons, and finally within a <form><div> render the chart.

Refer to Angular Gauge for more information on the configuration and data for this chart type.

Update Chart Attributes

A chart configured to update the chart caption, sub-caption alignment, and chart background dynamically is shown below.

FusionCharts will load here..
{
    "chart": {
        "caption": "Countries With Most Oil Reserves [2017-18]",
        "subCaption": "In MMbbl = One Million barrels",
        "xAxisName": "Country",
        "yAxisName": "Reserves (MMbbl)",
        "numberSuffix": "K",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Venezuela",
            "value": "290"
        },
        {
            "label": "Saudi",
            "value": "260"
        },
        {
            "label": "Canada",
            "value": "180"
        },
        {
            "label": "Iran",
            "value": "140"
        },
        {
            "label": "Russia",
            "value": "115"
        },
        {
            "label": "UAE",
            "value": "100"
        },
        {
            "label": "US",
            "value": "30"
        },
        {
            "label": "China",
            "value": "30"
        }
    ]
}

The consolidated code for the above chart is shown below:


using System;
using FusionCharts.Charts;

public partial class Pages_UpdateChartAttributesRuntime: System.Web.UI.Page {
protected void Page_Load(object sender, EventArgs e) {
//json data in string format
string jsonData = "{'chart':{'caption':'Countries With Most Oil Reserves [2017-18]','subCaption':'In MMbbl = One Million barrels','xAxisName':'Country','yAxisName':'Reserves (MMbbl)','numberSuffix':'K','theme':'fusion'},'data':[{'label':'Venezuela','value':'290'},{'label':'Saudi','value':'260'},{'label':'Canada','value':'180'},{'label':'Iran','value':'140'},{'label':'Russia','value':'115'},{'label':'UAE','value':'100'},{'label':'US','value':'30'},{'label':'China','value':'30'}]}";
// create chart instance
// parameter
// chart type, chart id, chart width, chart height, data format, data source
Chart column2d = new Chart("column2d", "column_chart", "700", "400", "json", jsonData);
//render chart
Literal1.Text = column2d.Render();
}
}




Imports FusionCharts.Charts
Partial Class Pages_UpdateChartAttributesRuntime
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles MyBase.Load
Dim jsonData As String = "{{'chart':{'caption':'Countries With Most Oil Reserves [2017-18]','subCaption':'In MMbbl = One Million barrels','xAxisName':'Country','yAxisName':'Reserves (MMbbl)','numberSuffix':'K','theme':'fusion'},'data':[{'label':'Venezuela','value':'290'},{'label':'Saudi','value':'260'},{'label':'Canada','value':'180'},{'label':'Iran','value':'140'},{'label':'Russia','value':'115'},{'label':'UAE','value':'100'},{'label':'US','value':'30'},{'label':'China','value':'30'}]}"
Dim column2d As Chart = New Chart("column2d", "column_chart", "700", "400", "json", jsonData)
Literal1.Text = column2d.Render()
End Sub
End Class

The HTML template for aspx file is shown below:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="UpdateChartAttributesRuntime.aspx.cs" Inherits="Pages_UpdateChartAttributesRuntime" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
<title>FusionCharts | update chart attributes at runtime</title>
<style>
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}
</style>
</head>

<body style="font-family: Helvetica Neue, Arial; font-size: 16px;">
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script>
changeBackground = function(){
FusionCharts("column_chart").setChartAttribute('bgColor', '#efefef');
};
changeCaption = function(){
FusionCharts("column_chart").setChartAttribute('captionAlignment', 'left');
};
reset = function(){
FusionCharts("column_chart").setChartAttribute('captionAlignment', 'center');
FusionCharts("column_chart").setChartAttribute('bgColor', '#ffffff');
};
</script>
<form id="form1" runat="server">
<h3>update chart attributes at runtime</h3>
<div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
<input type="button" class="button" onClick="changeBackground()" value='Change Chart Background' />
<input type="button" class="button" onClick="changeCaption()" value='Make Caption Text Left Aligned' />
<input type="button" class="button" onClick="reset()" value='Reset Attributes' />
</div>
<br />
<br />
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
<div><span>
<asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
</form>

</body>

</html>




<%@ Page Language="VB" AutoEventWireup="true" CodeFile="UpdateChartAttributesRuntime.aspx.vb" Inherits="Pages_UpdateChartAttributesRuntime" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>FusionCharts | update chart attributes at runtime</title>
<style>
input[type=radio], input[type=checkbox] {
display:none;
}
input[type=radio] + label, input[type=checkbox] + label {
display:inline-block;
margin:-2px;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
color: #333;
text-align: center;
text-shadow: 0 1px 1px rgba(255,255,255,0.75);
vertical-align: middle;
cursor: pointer;
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top,#fff,#e6e6e6);
background-image: -webkit-gradient(linear,0 0,0 100%,from(#fff),to(#e6e6e6));
background-image: -webkit-linear-gradient(top,#fff,#e6e6e6);
background-image: -o-linear-gradient(top,#fff,#e6e6e6);
background-image: linear-gradient(to bottom,#fff,#e6e6e6);
background-repeat: repeat-x;
border: 1px solid #ccc;
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);
border-bottom-color: #b3b3b3;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff',endColorstr='#ffe6e6e6',GradientType=0);
filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
input[type=radio]:checked + label, input[type=checkbox]:checked + label{
background-image: none;
outline: 0;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);
background-color:#e0e0e0;
}
</style>
</head>
<body style="font-family: Helvetica Neue, Arial; font-size: 16px;">
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script>
changeBackground = function(){
FusionCharts("column_chart").setChartAttribute('bgColor', '#efefef');
};
changeCaption = function(){
FusionCharts("column_chart").setChartAttribute('captionAlignment', 'left');
};
reset = function(){
FusionCharts("column_chart").setChartAttribute('captionAlignment', 'center');
FusionCharts("column_chart").setChartAttribute('bgColor', '#ffffff');
};
</script>
<form id="form1" runat="server">
<h3>update chart attributes at runtime</h3>
<div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
<input type="button" class="button" onClick="changeBackground()" value='Change Chart Background'/>
<input type="button" class="button" onClick="changeCaption()" value='Make Caption Text Left Aligned'/>
<input type="button" class="button" onClick="reset()" value='Reset Attributes'/>
</div>
<br />
<br />
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
 </div>
<div><span><asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server"/></span></div>
</form>

</body>
</html>

Apart from the usual boilerplate, the sample C#/VB code provided above corresponds to the following tasks:

  1. Import and resolve the dependencies like System, and FusionCharts.Charts.

  2. Define a class Pages_UpdateChartAttributesRuntime inherited from System.Web.UI.Page. Correspondingly, in the .aspx file, Pages_UpdateChartAttributesRuntime is inherited.

  3. Within the class Pages_UpdateChartAttributesRuntime, define Page_Load():

    • Declare a string jsonData and use it to assign the chart configuration as a JSON string.

    • Create an instance of Chart (defined within FusionCharts.Charts), and assign it the necessary attributes of a Column 2D chart. See the source code comments for the attributes used. Of particular importance is the attribute chartType, which in this case is column2d. Find the complete list of chart types with their respective alias here.

    • Render the chart using the [instanceName].Render() method. Correspondingly, in the .aspx file, include the necessary chart and theme libraries modules using the <script> tags, like fusioncharts.js, fusioncharts.theme.fusion.js, followed by some JavaScript functions and buttons, and finally within a <form><div> render the chart.

Refer to Column 2D chart for more information on the configuration and data for this chart type.