FusionCharts - Column 2D Chart in JavaScript
Created using FusionCharts Suite XT - www.fusioncharts.com
by sanjuktamukherjee
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>
<div id="chart-container">FusionCharts will render here</div>
JavaScript
FusionCharts.ready(function () {
var revenueChart = new FusionCharts({
type: 'world',
renderAt: 'chart-container',
width: '600',
height: '400',
dataFormat: 'json',
dataSource: {
"map": {
"bordercolor": "005879",
"fillcolor": "D7F4FF",
"numbersuffix": "M",
"includevalueinlabels": "1",
"labelsepchar": ":",
"basefontsize": "9"
},
"colorrange": {
"gradient": "1",
"minvalue": "30",
"code": "CC0001",
"startlabel": "Bad",
"endlabel": "Very Good",
"color": [
{
"maxvalue": "50",
"displayvalue": "Poor",
"code": "FF0000"
},
{
"maxvalue": "80",
"displayvalue": "Average",
"code": "FFCC33"
},
{
"maxvalue": "100",
"code": "069F06"
}
]
},
"data": [
{
"id": "NA",
"value": "51"
},
{
"id": "SA",
"value": "37"
},
{
"id": "AS",
"value": "92"
},
{
"id": "EU",
"value": "72"
},
{
"id": "AF",
"value": "98"
},
{
"id": "AU",
"value": "32"
}
]
}
});
revenueChart.render();
});