FusionCharts API-Methods: setXMLData

Created using FusionCharts Suite XT - www.fusioncharts.com

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- This sample shows the usage of the setXMLData() method. -->
<div id="indicatorDiv">Method Name: <b>setXMLData()</b>

    <br>
        <br>Sets chart data in the XML data format. Click <a href="http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setXMLData" target="_blank">here</a> to read more about the <b>setXMLData()</b> method.</br>
    <br>For this implementation, the XML chart data changes according to the year selected.</br>
        <br>Select a year from the drop-down given below.<br> Click <b>Set XML Data</b>.<br>The chart is re-rendered to reflect the data for the selected year.</br>
    <br> <center> <label id="label">Select a year:
                <select id="year">
                    <option value="2013">2013</option>
                    <option value="2014">2014</option>
                </select>
            </label> </br>
    <br>
        <button id="set_xml_data"><b>Set XML Data</b></button>
    </br>
    </center> 

</div>
    <br><div id="chart-container">FusionCharts will render here</div></br>

CSS

body {
    padding: 5px;
    margin: 0 auto;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#year {
    height: 25px;
    font-size: 12px;
}
#set_xml_data {
    height: 25px;
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var data_2013 = '<chart caption="Half Yearly Revenue Analysis of 2013" yaxisname="Revenue" numberprefix="$" yaxismaxvalue="250000" showborder="0" theme="fint"><set label="Jul" value="150000" tooltext="Occupancy: 67%{br}Revenue:$150k{br}3 conferences hosted!" /><set label="Aug" value="130000" tooltext="Occupancy: 64%{br}Revenue:$130k{br}Lean summer period!" /><set label="Sep" tooltext="Occupancy: 44%{br}Revenue: $80k{br}Reason: Renovating the Lobby" value="95000" /><set label="Oct" value="170000" tooltext="Occupancy: 73%{br}Revenue:$170k{br}Anniversary Discount: 25%" /><set label="Nov" value="155000" tooltext="Occupancy: 70%{br}Revenue:$155k{br}2 conferences cancelled!" /><set label="Dec" value="230000" tooltext="Occupancy: 95%{br}Revenue:$230k{br}Crossed last year record!" /></chart>';
    
    var data_2014 = '<chart caption="Half Yearly Revenue Analysis of 2014" yaxisname="Revenue" numberprefix="$" yaxismaxvalue="2500" showborder="0" theme="fint"><set label="Jul" value="250000" color="#00ff00" tooltext="Occupancy: 67%{br}Revenue:$150k{br}3 conferences hosted!" /><set label="Aug" value="300000" tooltext="Occupancy: 64%{br}Revenue:$130k{br}Lean summer period!" /><set label="Sep" tooltext="Occupancy: 44%{br}Revenue: $80k{br}Reason: Renovating the Lobby" value="50000" /><set label="Oct" value="270000" tooltext="Occupancy: 73%{br}Revenue:$170k{br}Anniversary Discount: 25%" /><set label="Nov" value="55000" tooltext="Occupancy: 70%{br}Revenue:$155k{br}2 conferences cancelled!" /><set label="Dec" value="330000" tooltext="Occupancy: 95%{br}Revenue:$230k{br}Crossed last year record!" /></chart>';
    var revenueChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '450',
        height: '250',
        dataFormat: 'xml',
        dataSource: data_2013
    });
    revenueChart.render();
     /**
     * @description
     * The setXMLData() method sets chart data in the XML data format....