Dynamically Add Chart Event Listener using ASP.NET
FusionCharts Suite XT includes advanced features that let you add more context to your chart and make data visualization simpler. These features include chart updates, add events at runtime, and remove events at runtime.
Events are signals that let you execute specific actions—such as manipulating the DOM, sending data to the server, and so on — using JavaScript, in response to any interactions/updates for a chart. Events can be used to trigger action(s) when:
- A chart renders successfully
- Data completes loading
- A data plot is clicked
- The mouse pointer is hovered over a data plot, etc.
This article focuses on how you can dynamically add/remove event listener to the data plots in the chart using FusionCharts ASP.NET C# or VB wrapper. A chart 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_InteractiveEvent: 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", "first_chart", "700", "400", "json", jsonData);
//attach event
column2d.addEvent("track", "track");
column2d.addEvent("clickHandler", "clickHandler");
column2d.addEvent("reset", "reset");
//render chart
Literal1.Text = column2d.Render();
}
}
Imports FusionCharts.Charts
Partial Class Pages_InteractiveEvent
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", "first_chart", "700", "400", "json", jsonData)
column2d.addEvent("track", "track")
column2d.addEvent("clickHandler", "clickHandler")
column2d.addEvent("reset", "reset")
Literal1.Text = column2d.Render()
End Sub
End Class
The HTML template for aspx file is shown below:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="InteractiveEvent.aspx.cs" Inherits="Pages_InteractiveEvent" %>
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>FusionCharts | Show data plot value on click</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>
track = function(){
FusionCharts.addEventListener("dataplotclick", clickHandler);
document.getElementById("message").innerHTML = "Click on the plot to see the value along with the label";
};
clickHandler = function(e){
document.getElementById("message").innerHTML = "You have clicked on plot <b>"+ e.data.categoryLabel + "</b> whose value is <b>" + e.data.displayValue + "</b>";
};
reset = function(){
FusionCharts.removeEventListener("dataplotclick", clickHandler);
document.getElementById("message").innerHTML = "Click the below buttons to add an event dynamically to the chart";
}
</script>
<form id="form1" runat="server">
<h3>Dynamically add chart event listener</h3>
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
<div>
<p id="message"></p>
</div>
<div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
<input type="radio" id="radio1" name="radios" onClick="track()">
<label for="radio1">ADD/LISTEN TO DATAPLOTCLICK EVENT</label>
<input type="radio" id="radio2" name="radios" value="false" onClick="reset()">
<label for="radio2">REMOVE DATAPLOTCLICK EVENT</label>
</div>
<div><span>
<asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
</form>
</body>
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="InteractiveEvent.aspx.vb" Inherits="Pages_InteractiveEvent" %>
<!DOCTYPE html>
<html xmlns=" http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>FusionCharts | Show data plot value on click</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>
track = function(){
FusionCharts.addEventListener("dataplotclick", clickHandler);
document.getElementById("message").innerHTML = "Click on the plot to see the value along with the label";
};
clickHandler = function(e){
document.getElementById("message").innerHTML = "You have clicked on plot <b>"+ e.data.categoryLabel + "</b> whose value is <b>" + e.data.displayValue + "</b>";
};
reset = function(){
FusionCharts.removeEventListener("dataplotclick", clickHandler);
document.getElementById("message").innerHTML = "Click the below buttons to add an event dynamically to the chart";
}
</script>
<form id="form1" runat="server">
<h3>Dynamically add chart event listener</h3>
<div>
<asp:Literal ID="Literal1" runat="server"></asp:Literal>
</div>
<div>
<p id="message"></p>
</div>
<div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
<input type="radio" id="radio1" name="radios" onClick="track()">
<label for="radio1">ADD/LISTEN TO DATAPLOTCLICK EVENT</label>
<input type="radio" id="radio2" name="radios" value="false" onClick="reset()">
<label for="radio2">REMOVE DATAPLOTCLICK EVENT</label>
</div>
<div><span>
<asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
</form>
</body>
Apart from the usual boilerplate, the sample C#/VB code provided above corresponds to the following tasks:
Import and resolve the dependencies like
System, andFusionCharts.Charts.Define a class
Pages_InteractiveEventinherited fromSystem.Web.UI.Page. Correspondingly, in the.aspxfile,Pages_InteractiveEventis inherited.Within the class
Pages_InteractiveEvent, definePage_Load():- Declare a string
jsonDataand use it to assign the chart configuration as a JSON string. - Create an instance of
Chart(defined withinFusionCharts.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 attributechartType, which in this case iscolumn2d. Find the complete list of chart types with their respective alias here . - Add the events you want to add to your chart, using the
[chart_instance].AddEvent()method. In this case, those methods are defined as JavaScript functions in the corresponding.aspxfile. - Render the chart using the
[instanceName].Render()method. Correspondingly, in the.aspxfile, include the necessary chart and theme libraries modules using the<script>tags, likefusioncharts.js,fusioncharts.theme.fusion.js, followed by some JavaScript functions and buttons, and finally within a<form><div>render the chart.
- Declare a string
Refer to Column 2D chart for more information on the configuration and data for this chart type.
Was this article helpful to you ?