Lifecycle Events using ASP.NET

Events are signals that let you execute specific actions — such as sending data to the server, and so on — using JavaScript, in response to any interactions/updates for a chart.

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 and events.

The sample in this article lists the basic lifecycle events at the time of rendering the chart using FusionCharts ASP.NET C# & 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" } ] } 
{
    "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_ProductLifeCycleEvent : 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("dataLoaded", "onDataLoaded");
        //render chart
        Literal1.Text = column2d.Render();
    }
}


Imports FusionCharts.Charts
Partial Class Pages_ProductLifeCycleEvent
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("dataLoaded", "onDataLoaded")
Literal1.Text = column2d.Render()
End Sub
End Class

The HTML template for aspx file is shown below:


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

<!DOCTYPE html>

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

<head runat="server">
    <link href="../Styles/SampleStyleSheet.css" rel="stylesheet" />
    <title>FusionCharts | sample to showcase one product life cycle event attachment</title>
</head>

<body>
    <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>
        function onDataLoaded() {
            document.getElementById("dataLoaded").innerHTML = "chart data is loaded successfully";

        }
    </script>
    <form id="form1" runat="server">
        <h3>sample to showcase one product life cycle event attachment</h3>
        <div>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
        <div>
            <p id="dataLoaded"></p>
        </div>
        <div><span>
                <asp:HyperLink id="hyperlink1" NavigateUrl="../Default.aspx" Text="Go Back" runat="server" /></span></div>
    </form>


</body>

</html>


<%@ Page Language="VB" AutoEventWireup="false" CodeFile="ProductLifeCycleEvent.aspx.vb" Inherits="Pages_ProductLifeCycleEvent" %>

<!DOCTYPE html>

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

<head runat="server">
    <link href="../Styles/SampleStyleSheet.css" rel="stylesheet" />
    <title>FusionCharts | sample to showcase one product life cycle event attachment</title>
</head>

<body>
    <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>
        function onDataLoaded() {
            document.getElementById("dataLoaded").innerHTML = "chart data is loaded successfully";

        }
    </script>
    <form id="form1" runat="server">
        <h3>sample to showcase one product life cycle event attachment</h3>
        <div>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
        <div>
            <p id="dataLoaded"></p>
        </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_ProductLifeCycleEvent inherited from System.Web.UI.Page. Correspondingly, in the .aspx file, Pages_ProductLifeCycleEvent is inherited.

  3. Within the class Pages_ProductLifeCycleEvent, 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 .
    • Add the events you want to add to your chart, using the onDataLoaded() method. In this case, those methods are defined as JavaScript functions in the corresponding .aspx file.
    • Render the chart using the onDataLoaded() 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.

Was this article helpful to you ?
Where do you think this article needs improvement?