Slice Data Plot using API

FusionCharts Suite XT includes advanced features that offers a wide range of APIs that you can use for different stages in the ife cycle of a chart or when you interact with a chart. These features include completion of rendering of the chart, handling the radio button at runtime, etc.

This article focuses on how you can slice out the data plots of a Pie 2D chart using chart specific custom API. The chart will be rendered using FusionCharts ASP.NET wrapper.

A chart configured to slice out the data plots of a pie2d chart, is shown below:

FusionCharts will load here..
{ "chart": { "caption": "Market Share of Web Servers", "plottooltext": "$percentValue of web servers run on $label servers", "showPercentValues": "1", "useDataPlotColorForLabels": "1", "enableMultiSlicing": "0", "showlegend": "0", "theme": "fusion" }, "data": [ { "label": "Apache", "value": "32647479" }, { "label": "Microsoft", "value": "22100932" }, { "label": "Zeus", "value": "14376" }, { "label": "Other", "value": "18674221" } ] } 
{
    "chart": {
        "caption": "Market Share of Web Servers",
        "plottooltext": "<b>$percentValue</b> of web servers run on $label servers",
        "showPercentValues": "1",
        "useDataPlotColorForLabels": "1",
        "enableMultiSlicing": "0",
        "showlegend": "0",
        "theme": "fusion"
    },
    "data": [
        {
            "label": "Apache",
            "value": "32647479"
        },
        {
            "label": "Microsoft",
            "value": "22100932"
        },
        {
            "label": "Zeus",
            "value": "14376"
        },
        {
            "label": "Other",
            "value": "18674221"
        }
    ]
}

The consolidated code for the above chart is shown below:


using System;
using FusionCharts.Charts;

public partial class Pages_SpecialChartTypeAPI: System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
        //json data in string format
        string jsonData = "{ 'chart': { 'caption': 'Market Share of Web Servers', 'plottooltext': '$percentValue of web servers run on $label servers', 'showLegend': '0', 'enableMultiSlicing': '0', 'showPercentValues': '1', 'legendPosition': 'bottom', 'useDataPlotColorForLabels': '1', 'theme': 'fusion', }, 'data': [{ 'label': 'Apache', 'value': '32647479' }, { 'label': 'Microsoft', 'value': '22100932' }, { 'label': 'Zeus', 'value': '14376' }, { 'label': 'Other', 'value': '18674221' }] }";
        // create chart instance
        // parameter
        // chart type, chart id, chart width, chart height, data format, data source
        Chart column2d = new Chart("pie2d", "first_chart", "450", "250", "json", jsonData);
        //attach event 
        column2d.AddEvent("dataplotClick", "plotClickHandler");
        //render chart
        Literal1.Text = column2d.Render();
    }
}


Imports FusionCharts.Charts
Partial Class Pages_SpecialChartTypeAPI
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': 'Market Share of Web Servers', 'plottooltext': '$percentValue of web servers run on $label servers', 'showLegend': '0', 'enableMultiSlicing': '0', 'showPercentValues': '1', 'legendPosition': 'bottom', 'useDataPlotColorForLabels': '1', 'theme': 'fusion', }, 'data': [{ 'label': 'Apache', 'value': '32647479' }, { 'label': 'Microsoft', 'value': '22100932' }, { 'label': 'Zeus', 'value': '14376' }, { 'label': 'Other', 'value': '18674221' }] }"
Dim column2d As Chart = New Chart("pie2d", "first_chart", "450", "250", "json", jsonData)
column2d.AddEvent("dataplotClick", "plotClickHandler")
Literal1.Text = column2d.Render()
End Sub
End Class

The HTML template for aspx file is shown below:


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

<!DOCTYPE html>

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

<head runat="server">
    <link href="../Styles/SampleStyleSheet.css" rel="stylesheet" />
    <title>FusionCharts | showcasing use special chart type API</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>
        plotClickHandler = function(event){
            clickedPlot = (event.data.categoryLabel).toLowerCase();
              if (selectedItem !== clickedPlot) {
                    selectedItem = clickedPlot;
              } else{
                    selectedItem = 'none';
              }
        };
        selectedItem = "none";
        noneChecked = function(){
            FusionCharts("first_chart").slicePlotItem(0,false);
            FusionCharts("first_chart").slicePlotItem(1,false);
            FusionCharts("first_chart").slicePlotItem(2,false);
            FusionCharts("first_chart").slicePlotItem(3,false);
        }
        apacheChecked = function(){
            FusionCharts("first_chart").slicePlotItem(0,true);
        }
        microsoftChecked = function(){
            FusionCharts("first_chart").slicePlotItem(1,true);
        }
        zeusChecked = function(){
            FusionCharts("first_chart").slicePlotItem(2,true);
        }
        otherChecked = function(){
            FusionCharts("first_chart").slicePlotItem(3,true);
        }
    </script>
    <form id="form1" runat="server">
        <h3>showcasing use special chart type API</h3>
        <div>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
        <div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" checked="checked" onclick="noneChecked()" /> None
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="apacheChecked()" /> Apache
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="microsoftChecked()" /> Microsoft
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="zeusChecked()" /> Zeus
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="otherChecked()" /> Other
            </label>
        </div>
        <br />
        <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="SpecialChartTypeAPI.aspx.vb" Inherits="Pages_SpecialChartTypeAPI" %>

<!DOCTYPE html>

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

<head runat="server">
    <link href="../Styles/SampleStyleSheet.css" rel="stylesheet" />
    <title>FusionCharts | showcasing use special chart type API</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>
        plotClickHandler = function(event){
            clickedPlot = (event.data.categoryLabel).toLowerCase();
              if (selectedItem !== clickedPlot) {
                    selectedItem = clickedPlot;
              } else{
                    selectedItem = 'none';
              }
        };
        selectedItem = "none";
        noneChecked = function(){
            FusionCharts("first_chart").slicePlotItem(0,false);
            FusionCharts("first_chart").slicePlotItem(1,false);
            FusionCharts("first_chart").slicePlotItem(2,false);
            FusionCharts("first_chart").slicePlotItem(3,false);
        }
        apacheChecked = function(){
            FusionCharts("first_chart").slicePlotItem(0,true);
        }
        microsoftChecked = function(){
            FusionCharts("first_chart").slicePlotItem(1,true);
        }
        zeusChecked = function(){
            FusionCharts("first_chart").slicePlotItem(2,true);
        }
        otherChecked = function(){
            FusionCharts("first_chart").slicePlotItem(3,true);
        }
    </script>
    <form id="form1" runat="server">
        <h3>showcasing use special chart type API</h3>
        <div>
            <asp:Literal ID="Literal1" runat="server"></asp:Literal>
        </div>
        <div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" checked="checked" onclick="noneChecked()" /> None
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="apacheChecked()" /> Apache
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="microsoftChecked()" /> Microsoft
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="zeusChecked()" /> Zeus
            </label>
            <label style="padding: 0px 5px !important;">
                <input type="radio" name="rdGrp-options" onclick="otherChecked()" /> Other
            </label>
        </div>
        <br />
        <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_DynamicChartType inherited from System.Web.UI.Page. Correspondingly, in the .aspx file, Pages_DynamicChartType is inherited.

  3. Within the class Pages_DynamicChartType, 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 Pie 2D chart. See the source code comments for the attributes used. Of particular importance is the attribute chartType, which in this case is pie2d. 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 radio buttons for different charts, and finally within a <form><div> render the chart.

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