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)zuneoceancarbon
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"
}
]
}<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 fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '700',
height: '400',
id: "rev-fc-chart",
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(evt, args) {
// creating div for theme controllers
var scriptElem, controllers = document.createElement('div'),
themeCollection = {
'fusion': 'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fusion.js',
'gammel': 'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.gammel.js',
'candy': 'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.candy.js',
'zune': 'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js',
'ocean': 'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.ocean.js',
'carbon': 'https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.carbon.js'
};
for (var theme in themeCollection) {
scriptElem = document.createElement('script');
scriptElem.setAttribute('type', 'text/javascript');
scriptElem.setAttribute('src', themeCollection[theme]);
scriptElem.async = false;
args.container.parentNode.insertBefore(scriptElem, args.container.nextSibling);
}
// form radio buttons inside div
controllers.innerHTML = '<label><input type="radio" name="theme-options" value="fusion"> Fusion</label><label><input type="radio" name="theme-options" value="gammel"> Gammel</label><label><input type="radio" name="theme-options" value="candy"> Candy</label><label><input type="radio" name="theme-options" id="fusion-chckbx" value="zune"> Zune</label><label><input type="radio" name="theme-options" value="ocean"> Ocean</label><label><input type="radio" name="theme-options" value="carbon"> Carbon</label><label><input type="button" value="Apply Theme" id="set-theme"></label>';
controllers.setAttribute('id', 'controllers');
// setting css styles for controllers div
controllers.style.cssText = "font-family:'Helvetica Neue', Arial; font-size:14px; margin-left:40px;";
// setting css styles for labels inside controllers div
var labels = controllers.getElementsByTagName('label');
for (i = 0; i < labels.length; i++) {
labels[i].style.cssText = 'padding: 0 5px !important;';
}
args.container.appendChild(controllers);
//Button click handler
document.getElementById("set-theme").onclick = function() {
//Get name of the selected theme from radio
var radios = document.getElementsByName("theme-options"),
len = radios && radios.length,
isSelected, radElem, i;
for (i = 0; i < len; i += 1) {
radElem = radios[i];
isSelected = radElem && radios[i].checked;
if (isSelected) {
//Update chart theme
FusionCharts.items["rev-fc-chart"].setChartAttribute('theme', radElem.value);
}
}
}
}
}
});
fusioncharts.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 and then the Apply Theme button, to see how the look and feel of the chart change with each theme.
Was this article helpful to you ?