FusionCharts API-Methods: render with callBack

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the render() method -->
<div id="indicatorDiv">Method Name: <strong>render()</strong>
    
    <p>Renders a chart inside a container element on a page. If the chart is already rendered, it can be re-rendered inside the same container DOM element or a different element.</p>
    <p>Click <strong>Render</strong> to render the chart. The message shown below the chart is rendered using a callback function - a function that is executed when the chart is rendered.</p>
    
   <div class="text-center"> 
	   	<button id="render">Render</button>
	   	<div id="chart-container">FusionCharts will render here</div> 
      <div id="message"><i>The message from the callback function is rendered here.</i></div>            
   	</div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}
#chart-container {
    text-align: center;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#render {
    font-size: 13px;
    padding: 10px;
    margin: 10px ;
}
#message {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
    margin: 10px;
}

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '400',
        height: '200',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                    "subCaption": "2014",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12",
                    "subcaptionFontBold": "0",
                    "showValues": "0"
            },
                "data": [{
                "label": "Food",
                    "value": "28504"
            }, {
                "label": "Apparels",
                    "value": "14633"
            }, {
                "label": "Electronics",
                    "value": "10507"
            }, {
                "label": "Household",
                    "value": "4910"
            }]
        }
    });


    /**
     * @description
     * The render() method returns the DOMElement created inside the chart container by FusionCharts. This is equivalent to accessing the DOMElement using the ref property.    
     *
     * @param {String} containerElement: Reference or ID of the DOM element inside which the chart is to be rendered. If this argument is not provided, it is assumed that the renderAt attribute is provided during chart creation.
     *
     *  @param {FusionCharts~DOMInsertModes} insertMode: Method for inserting the chart’s DOM element within the containerElement. there are 3 modes replace, append, prepend. and default is replace
     *
     * @param {Function} callback  Callback function executed after the chart is successfully rendered.
     *
     * usage: chartObj.render();
     *         chartObj.render(containerElement);
     *         chartObj.render(containerElement,insertMode);
     *        ...