FusionCharts API-Methods: render (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 usage of the static render() method -->
<div id="indicatorDiv">Method Name: <strong>render()</strong> (static)    
   <p>Uses a one-line argument parameter to render FusionCharts directly into the container specified in the arguments.</p>
   <p>Click <strong>Render</strong> to render the chart.</p>
    
   <div class="text-center">
   	 <button id="render">Render the chart</button>    
   	<div id="chart-container" class="container_text">FusionCharts will render here</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;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#render {
    font-size: 13px;
    padding: 10px;
    margin: 10px;
}
.container_text {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var chart_options = {
        type: 'doughnut2d',
        renderAt: 'chart-container',
        width: '500',
        height: '300',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Revenue by Product Categories",
                    "subCaption": "2014",
                    "numberPrefix": "$",
                    "theme": "fint",
                    "defaultCenterLabel": "Total revenue: $64.08K",
                    "centerLabel": "Revenue from $label: $value",
                    "centerLabelBold": "1",
                    "showTooltip": "0",
                    "decimals": "0",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12",
                    "subcaptionFontBold": "0"
            },
                "data": [{
                "label": "Food",
                    "value": "28504"
            }, {
                "label": "Apparels",
                    "value": "14633"
            }, {
                "label": "Electronics",
                    "value": "10507"
            }, {
                "label": "Household",
                    "value": "4910"
            }]
        }
    };

    /**
     * @description
     * The render() method uses a one-line argument parameter to render FusionCharts directly into the container specified in the arguments.
     *
     * @param {Object} options: Chart configuration options required to create a chart. The options must include the renderAt parameter for the chart to render instantly.
     *
     * @param {Function} callback: Callback function executed when the chart is successfully rendered.
     * usage: FusionCharts.render(options);
     *         FusionCharts.render(options,callback);

     */
    function render_chart() {
        //msg.innerHTML = "";
        var revenueChart = new FusionCharts.render(chart_options);

    }

   ...