<%
    def getChart
        chartData = {
                    "chart": {
                        "caption": "Countries With Most Oil Reserves [2017-18]",
                        "subCaption": "In MMbbl = One Million barrels",
                        "xAxisName": "Country",
                        "yAxisName": "Reserves (MMbbl)",
                        "numberSuffix": "K",
                        "theme": "fusion",
                    },
                    "data": [{
                        "label": "Venezuela",
                        "value": "290"
                    }, {
                        "label": "Saudi",
                        "value": "260"
                    }, {
                        "label": "Canada",
                        "value": "180"
                    }, {
                        "label": "Iran",
                        "value": "140"
                    }, {
                        "label": "Russia",
                        "value": "115"
                    }, {
                        "label": "UAE",
                        "value": "100"
                    }, {
                        "label": "US",
                        "value": "30"
                    }, {
                        "label": "China",
                        "value": "30"
                    }]
                }

        # Chart rendering 
        chart = Fusioncharts::Chart.new({
                width: "700",
                height: "400",
                type: "column2d",
                renderAt: "chartContainer",
                dataSource: chartData
            })

        chart.addEvent("renderComplete", "onRenderComplete");
        return chart
    end
%>

<script>
    function onRenderComplete(eventObj) {
        var formattedNumber = eventObj.sender.formatNumber(1234.5);
        document.getElementById("rendered").innerHTML = "Format (123.5): " + formattedNumber;
        
    }
</script>

<h3>Use of fusioncharts number module API</h3>
<div id="chartContainer"></div>
<%= getChart.render() %>
<br/>
   <div>
        <p id ="rendered">Formatted number will appear here</p>
    </div>
<br/>
<br/>

<a href="index">Go Back</a>
