Introduction to Themes
You can use FusionCharts Suite XT to create web applications that include multiple instances of the various charts, gauges, and maps. However, if you need to maintain a consistent look and feel across the web apps, then you can do that using themes.
You can manually set the cosmetic and functional attributes for each chart in the corresponding JSON/XML file. This can work if you deal with only a small number of charts. As the number of charts increases so does your hassles. That is where the Theme Manager shipped with FusionCharts Suite XT comes in. You can use the Theme Manager to create centralized theme files (similar to CSS files) and then apply those themes to any number of charts.
In a theme file, you can centralize the following aspects of a chart, gauge, or map:
- Visual appearance (data plot color, font color, font size, etc.)
- Behavior (hover effects for data plots)
- Intelligence (applying different colors to the positive and negative data plots in all column 2D charts that use the theme)
FusionCharts Suite XT ships with the following predefined themes:
fusion(since v3.13.0)gammel(since v3.13.0)candy(since v3.13.0)zuneoceancarbonumber(since v3.13.5)
A Column 2D chart showcasing the 6 themes mentioned above is given below:
FusionCharts will load here..
{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue",
"theme": "fusion"
},
"data": [
{
"label": "Jan",
"value": "420000"
},
{
"label": "Feb",
"value": "810000"
},
{
"label": "Mar",
"value": "720000"
},
{
"label": "Apr",
"value": "550000"
},
{
"label": "May",
"value": "910000"
},
{
"label": "Jun",
"value": "510000"
},
{
"label": "Jul",
"value": "680000"
},
{
"label": "Aug",
"value": "620000"
},
{
"label": "Sep",
"value": "610000"
},
{
"label": "Oct",
"value": "490000"
},
{
"label": "Nov",
"value": "900000"
},
{
"label": "Dec",
"value": "730000"
}
]
}<chart caption="Monthly revenue for last year" subcaption="Harry's SuperMart" xaxisname="Month" yaxisname="Revenue" theme="fusion">
<set label="Jan" value="420000" />
<set label="Feb" value="810000" />
<set label="Mar" value="720000" />
<set label="Apr" value="550000" />
<set label="May" value="910000" />
<set label="Jun" value="510000" />
<set label="Jul" value="680000" />
<set label="Aug" value="620000" />
<set label="Sep" value="610000" />
<set label="Oct" value="490000" />
<set label="Nov" value="900000" />
<set label="Dec" value="730000" />
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '700',
height: '400',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenue",
"theme": "fusion"
},
"data": [{
"label": "Jan",
"value": "420000"
}, {
"label": "Feb",
"value": "810000"
}, {
"label": "Mar",
"value": "720000"
}, {
"label": "Apr",
"value": "550000"
}, {
"label": "May",
"value": "910000"
}, {
"label": "Jun",
"value": "510000"
}, {
"label": "Jul",
"value": "680000"
}, {
"label": "Aug",
"value": "620000"
}, {
"label": "Sep",
"value": "610000"
}, {
"label": "Oct",
"value": "490000"
}, {
"label": "Nov",
"value": "900000"
}, {
"label": "Dec",
"value": "730000"
}]
},
events: {
'beforeRender': function(eventObj, args) {
var options = {
'fusion': 'Fusion',
'gammel': 'Gammel',
'candy': 'Candy',
'zune': 'Zune',
'ocean': 'Ocean',
'carbon': 'Carbon',
'umber': 'Umber'
},
themeSelected = 'fusion',
chartRef = eventObj.sender;
var container = args.container;
var radioContainer = document.createElement('div');
radioContainer.style.cssText = "text-align: center; width: 100%;"
var spanLabel = document.createElement('span');
spanLabel.innerText = "Choose a theme: ";
var upadateTheme = function (event) {
var theme = event.target.value;
chartRef.setChartAttribute('theme', theme);
}
function radioWrapper(value, label, selected = false) {
const div = document.createElement('div');
const input = document.createElement('input');
const labelElement = document.createElement('label');
div.style.cssText = "display: inline-block; margin:10px 5px;";
labelElement.style.cssText = "margin-right: 5px;";
labelElement.innerText = label;
labelElement.setAttribute('for', value)
input.id = value;
input.type = 'radio';
input.name = "theme"
input.value = value
input.onchange = upadateTheme;
selected && input.setAttribute('checked', '');
div.appendChild(labelElement);
div.appendChild(input);
return div;
}
for (const key in options) {
var label = options[key];
var selected = themeSelected === key;
var radioOption = radioWrapper(key, label, selected);
radioContainer.appendChild(radioOption);
}
container.appendChild(radioContainer);
}
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above chart.
In the above chart, click any radio button, to see how the look and feel of the chart change with each theme.