Theme Manager
When working with a large number of charts, its a good practice to maintain a consistent design across charts. However, it can become cumbersome quickly if you have to do this per chart. It requires a significant manual effort if you want to change cosmetic properties (e.g. color ) across these charts when both the chart data and configuration is specified in the same XML file or JSON object.
Theme Manager allows you to separate the data and the cosmetic properties into different files - the data file and the theme file. The theme file can be reused for multiple charts in your application. FusionCharts Suite XT allows you to define multiple theme files for each chart. This can be useful when you have a base theme for the entire application, but wish to override a few attributes for a subset of charts.
Themes let you centralize the following aspects for a chart, gauge or map:
-
Visual appearance e.g., colors, fonts, plot cosmetics
-
Behavior e.g., hover effects
-
Intelligence e.g., conditional colors for negative and positive data points
FusionCharts Suite XT ships with 3 themes - zune, ocean and carbon. You can find them in your fusioncharts/themes/ folder.
In many of the examples in this documentation, we have used the fint (FusionCharts internal) theme.
Applying themes to your charts
Including a theme file for application to your chart is very similar to including the core FusionCharts Suite XT Library. You can use the <script> tag as shown here to include themes.
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.ocean.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.carbon.js"></script>
<script type="text/javascript" src="fusioncharts/themes/fusioncharts.theme.zune.js"></script>Using a theme in a chart
Shown below is a simple column 2D chart that lets you switch between each of the packaged themes.
{
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)"
},
"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="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script type="text/javascript" src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js?cacheBust=56"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var fusioncharts = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '500',
height: '300',
id: "rev-fc-chart",
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)"
},
"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 = {
'zune': 'http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js',
'ocean': 'http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.ocean.js',
'carbon': 'http://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" id="fint-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:90px;";
// 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>Using a theme in a chart is simple, you only need to specify the theme you wish to use at the chart level as an attribute.
Overriding attributes specified in themes
Themes as part of FusionCharts Suite XT follow an inheritance chain, by default when you specify a theme all the properties defined in the theme for the chart are applied to the chart. If you specify the same property with a different value in the chart object the theme setting is overridden.
<script type="text/javascript">
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"baseFont": "Helvetica",
"baseFontSize": "11",
"baseFontColor": "#F6F6F6",
"theme": "zune"
},
"data": [
// data goes here
]
}
});
})
</script>In the above code snippet the baseFont , baseFontSize and baseFontColor attributes specified at the chart level will override font attributes from the zune theme.
Multiple themes in a single chart
FusionCharts Suite XT also lets you use multiple themes for a single chart. This is very useful if you have a base theme and are overriding only a few attributes for a subset of charts.
The attributes specified in the theme on the extreme right are given precedence over the ones on the left.
<script type="text/javascript">
FusionCharts.ready(function() {
var revenueChart = new FusionCharts({
"type": "column2d",
"renderAt": "chartContainer",
"width": "500",
"height": "300",
"dataFormat": "json",
"dataSource": {
"chart": {
"caption": "Monthly revenue for last year",
"subCaption": "Harry's SuperMart",
"xAxisName": "Month",
"yAxisName": "Revenues (In USD)",
"theme": "zune,ocean"
},
"data": [
// data goes here
]
}
});
})
</script>Here any attribute specified in the ocean theme will override the same attribute if specified, as part of the zune theme.