FusionCharts API-Methods: chartType
Created using FusionCharts Suite XT - www.fusioncharts.com
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>
<div>
<select id="type" class="mb-20">
<option value="pie2d">Pie 2D Chart</option>
<option value="stackedcolumn2d">Stacked Column Chart</option>
</select>
<div id="message"></div>
<div id="chart-container1">FusionCharts will render here</div>
</div>
CSS
body {
padding: 5px;
margin: 0 auto;
}
strong {
font-weight: bold;
}
.text-center {
text-align: center;
}
.mb-20 {
margin-bottom: 20px;
}
p {
margin: 10px auto;
}
#indicatorDiv {
width: 500px;
font-family: 'Arial', 'Helvetica';
font-size: 13px;
}
#type {
height: 25px;
font-size: 13px;
}
#message {
width: 500px;
font-family: 'Arial', 'Helvetica';
font-size: 13px;
}
JavaScript
var stackdata = {
"chart": {
"theme": "fint",
"caption": "Revenue split by product category",
"subCaption": "For current year",
"xAxisname": "Quarter",
"yAxisName": "Revenues (In USD)",
//Showing the Cumulative Sum of stacked data
"showSum": "1",
"numberPrefix": "$"
},
"categories": [{
"category": [{
"label": "Q1"
}, {
"label": "Q2"
}, {
"label": "Q3"
}, {
"label": "Q4"
}]
}],
"dataset": [{
"seriesname": "Food Products",
"data": [{
"value": "11000"
}, {
"value": "15000"
}, {
"value": "13500"
}, {
"value": "15000"
}]
}, {
"seriesname": "Non-Food Products",
"data": [{
"value": "11400"
}, {
"value": "14800"
}, {
"value": "8300"
}, {
"value": "11800"
}]
}]
};
var piedata = {
"chart": {
"caption": "Split of revenue by product categories",
"subCaption": "Last year",
"numberPrefix": "$",
"showPercentInTooltip": "0",
"decimals": "1",
//Theme
"theme": "fint"
},
"data": [
{
"label": "Food",
"value": "285040"
},
{
"label": "Apparels",
"value": "146330"
},
{
"label": "Electronics",
"value": "105070"
},
{
"label": "Household",
"value": "49100"
}
]
};
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
type: 'pie2d',
renderAt: 'chart-container1',
width: '500',
height: '250',
dataFormat: 'json',
dataSource: piedata
}).render();
var select = document.getElementById("type");
function change()...