FusionCharts API-Methods: ready static

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 static ready() method -->
<div id="indicatorDiv">Method Name: <b>ready()</b>

    
    <p>This static method allows to register callback functions that are executed when the FusionCharts library is ready to be used.</p>
    <p>Now that the FusionCharts library has loaded, click <b>Render</b> to render the chart.</p>

    <p class="text-center">
    	<button id="render" hidden="true">Render</button>
    </p>
    <div id="chart-container">FusionCharts will render here</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;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#render {
    height: 25px;
    font-size: 13px;
}
#chart-container {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}

JavaScript

FusionCharts.ready(ready);
/**
     * @description
     * The static ready() method allows to register callback functions that are executed when the FusionCharts library is ready to be used. In general, the FusionCharts framework is ready after the DOMContentLoaded browser event has been triggered and all the initial dependent files/modules are available.

     * @param {Function} readyCallback: Callback function executed when the FusionCharts framework is ready.
     * @param {*} args: Argument to be passed to the callback function. Default: FusionCharts
     * @param {Function} context: To execute a function, passed using the fn parameter, in a different scope than the default FusionCharts scope, pass the appropriate class object here. Default: FusionCharts
     * usage: FusionCharts.ready(readyCallback,args,context)
     *         
     */
function ready() {
    var rend = document.getElementById("render");
    rend.hidden = false;
    rend.addEventListener("click", renderChart);

}

function renderChart() {
    var revenueChart = new FusionCharts({
        type: 'msstackedcolumn2d',
        renderAt: 'chart-container',
        width: '450',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Product-wise break-up of quarterly revenue in last year",
                    "subcaption": "Harry's SuperMart",
                    "xaxisname": "Quarter",
                    "yaxisname": "Sales (In USD)",
                    "theme": "fint",
                    "captionFontSize": "13",
                    "subCaptionFontSize": "12"
            },
                "categories": [{
                "category": [{
                    "label": "Q1"
                }, {
                    "label": "Q2"
                }, {
                    "label": "Q3"
                }, {
                    "label": "Q4"
                }]
            }],
                "dataset": [{
                "dataset": [{
...