Render Thumbnail Versions of Charts
FusionCharts Suite XT gives you an option to render your charts as thumbnail versions, which is useful when space is a limitation. It may be required at times to show only thumbnail versions of charts. These thumbnails when clicked will expand to render a chart.
Shown below is an example with chart thumbnails that enlarge on click.
Chart thumbnails are characterised by the following:
Only plots are rendered while all other chart elements are hidden
- Interactivity is disabled
- Animation is disabled
- Generic features are disabled
In a nutshell, a chart thumbnail is like a static image with an associated link accessible via click/touch. Lets discuss the characteristic features and how to implement them using FusionCharts.
In this section, you will learn how to:
- Render plots shedding all other charts elements
- Disable all Charting Interactivities
- Present a static chart
Render Plots shedding all other Chart elements
A chart is composed of a host of elements. The general elements and how to hide them is tabulated as below.
| Chart elements | Attributes and values | Description |
|---|---|---|
| Captions | caption: ""
subcaption: ""
|
Hide caption and subcaption |
| Canvas | showCanvasBorder: "0"
numDivLines: "0"
showAxisLimitGridLines: "0"
|
Hide canvas along with grid lines |
| Background | bgAlpha: "0"
showBorder: "0"
|
Possibly hide chart background and border |
| Axes | showXAxisLine: "0"
showYAxisLine: "0"
|
Do not show axes |
| Axis Names | xAxisName: ""
yAxisName: ""
|
Hide axis names |
| Axis labels | showLabels: "0"
showYAxisValues: "0"
|
Hide x-axis labels and y-axis values |
| Data values | showValues: "0"
|
Hide data value labels with the plots |
| Legend | showLegend: "0"
|
Hide legend |
| Plot | showShadow: "0"
showPlotBorder: "0"
drawAnchors: "0"
|
Remove extra cosmetics from the plots like border and shadow. You may not render anchors in line / area charts. |
| Logo | logoURL: "" |
Remove link to logo image if any |
Disable all Charting Interactivities
Charts have varying interactive feature. However some of these interactivities are common across the suite. The following table summarise the common ones.
| Attribute | Value | Description |
|---|---|---|
showTooltip |
0 |
Disable tooltext on plot hover |
showHoverEffect |
0 |
Deactivate plot hover effects |
clickURL |
"" |
Remove link associated to chart if any |
Static Presentation of Chart
An image type presentation makes it necessary to be visually static. Some of the required measures in this context are given below.
| Attribute | Value | Description |
|---|---|---|
animation |
0 |
Disable initial animation |
The JavaScript code to show the above effect is given below:
FusionCharts.ready(function() {
// write a function which creates a thumbnail of the required dimensions but turning off some of the properties which are not required in a thumbnail, for some other charts there might be a few more additional properties that need to be turned off.
var createThumbNail = function(chartId, width, height, divId) {
// we clone the chart first and then set new width and height
var chartRef = FusionCharts(chartId),
clonedChart = chartRef.clone({
"width": width,
"height": height
});
// turn off properties which are not required
clonedChart.setChartAttribute({
"showValues": "0",
"showLabels": "0",
"animation": "0",
"exportEnabled": "0",
"showTooltip": "0",
"showHoverEffect": "0",
"showYAxisValues": "0",
"caption": "",
"subCaption": "",
"xAxisName": "",
"yAxisName": "",
"showXAxisLine": "0",
"showYAxisLine": "0",
"numDivLines": "0",
"enableSlicing": "0",
"enableRotation": "0"
});
// listen for the chartClick event to render the detailed chart
clonedChart.addEventListener('chartClick', function() {
FusionCharts(chartId).render('chart-container');
});
// create the thumbnail
clonedChart.render(divId, 'append');
};
// since data is common for all three charts, we store it in a common variable
var chartData = {
"chart": {
"caption": "Harry's SuperMart",
"subCaption": "Monthly revenue for last year",
"xAxisName": "Month",
"yAxisName": "Amount",
"numberPrefix": "$",
"theme": "fusion",
"rotateValues": "1",
"exportEnabled": "1"
},
"data": [{
"label": "Jan",
"value": "420000"
}, {
"label": "Feb",
"value": "810000"
}, {
"label": "Mar",
"value": "720000"
}, {
"label": "Apr",
"value": "550000"
}, {
"label": "May",
"value": "910000",
"anchorRadius": "10",
"anchorBorderColor": "0372AB",
"anchorBgColor": "E1f5ff"
}, {
"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"
}]
};
// create all the three chart instances of column, pie, bar
var revenueChartColumn = new FusionCharts({
type: 'column2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
id: 'revenue-chart-column',
dataSource: chartData
});
var revenueChartPie = new FusionCharts({
type: 'pie2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
id: 'revenue-chart-pie',
dataSource: chartData
});
var revenueChartBar = new FusionCharts({
type: 'bar2d',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
id: 'revenue-chart-bar',
dataSource: chartData
});
// create thumbnails for all the three charts
createThumbNail('revenue-chart-column', 100, 100, 'thumbnail-column');
createThumbNail('revenue-chart-pie', 100, 100, 'thumbnail-pie');
createThumbNail('revenue-chart-bar', 100, 100, 'thumbnail-bar');
// render column chart by default
revenueChartColumn.render();
});