FusionCharts API-Event: ready

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 event parameters, and their values, when ready event is triggered-->
<div id="indicatorDiv">Event name: <strong> ready </strong> 
<p>Triggered when the FusionCharts library is ready to be used.</p>
<p>All events, when triggered, will provide two parameters for the handler - <strong> eventObj </strong> (object containing information generic to all events) and <strong> dataObj </strong> (object containing information specific to an event)</p>
<p>Scroll down to the table rendered below the chart to view information contained in the dataObj object. To view information contained in the eventObj object, open the console.</p>
    
</div>
<div id="chart-container">FusionCharts will render here</div>
<div>
    <div>
        <div id="header">
            <div class="parameter-name">Parameter Name</div>
            <div class="parameter-value">Parameter Value</div>
        </div>
        <div id="attrs-table"></div>
    </div>
</div>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}

strong {
  font-weight: bold;
}

#chart-container  {
  margin: 10px 0;
}
#header {
    display: none;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
p {
    margin-top: 20px;
    margin-bottom: 20px;
}
#attrs-table {
    text-align: center;
    width: 500px;
}
.parameter-name, .parameter-value {
    width: 250px;
    font-weight: bold;
    text-align: center;
    float: left;
}
.title, .value {
    float:left;
    width: 230px;
    height: 20px;
    background: #fff;
    padding: 5px 10px;
}
.title {
    clear: left;
}
.title:nth-child(4n+1), .value:nth-child(4n+2) {
    background: rgb(0, 117, 194);
    color: #fff;
}
.value {
    word-wrap: break-word;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

JavaScript

/**
 * @description
 * Triggered when the FusionCharts library is ready to be used.
 *
 * @param {Object} eventObj: An object containing all the details related to this event like eventId, sender, etc.
 * @param {Object} dataObj: An object containing all the details related to chart data such as the x and y position of the label, label text, etc.
 */
FusionCharts.addEventListener('ready', function (eventObj, dataObj) {
    console.log(eventObj);
    var header = document.getElementById('header');
    header.style.display = 'block';

    var tempDiv = document.createElement('div');
    var attrsTable = document.getElementById('attrs-table');
    var titleDiv, valueDiv;
    for (prop in dataObj) {
        titleDiv = document.createElement('div');
        titleDiv.className = 'title';
        titleDiv.innerHTML = prop;

        valueDiv = document.createElement('div');
        valueDiv.className = 'value';
        // Version information will be in array.Hence joining the version with the character '.'
        if(dataObj[prop].join) {
            valueDiv.innerHTML = (dataObj[prop]).join('.');
        } else {
            valueDiv.innerHTML = (dataObj[prop]);
        }

        tempDiv.appendChild(titleDiv);
        tempDiv.appendChild(valueDiv);
    }

    attrsTable.innerHTML = '';
    attrsTable.appendChild(tempDiv);
    var ageGroupChart = new FusionCharts({
        type: 'pie2d',
        renderAt: 'chart-container',
        width: '450',
        height: '250',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of visitors by age group",
                    "subCaption": "Last year",
                    "enableSmartLabels": "0",
                    "showPercentValues": "1",
                    "showTooltip": "0",
                    "decimals": "1",
                    "theme": "fint"
            },
                "data": [{
                "label": "Teenage",
                    "value": "1250400"
        ...