Inverse Y-axis Chart
The inverse y-axis charts are similar to the normal FusionCharts Suite XT charts, except that the y-axis in these charts is inversed; the lower limit and upper limit value positions are swapped in an inverse y-axis chart.
The chart below shows you the difference between a normal and an inverse y-axis chart:
FusionCharts will load here..
{
"chart": {
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"showBorder": "0",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
"placeValuesInside": "0",
"valueFontColor": "#333333",
"rotateValues": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Loading Time",
"allowDrag": "0",
"data": [
{
"value": "6"
},
{
"value": "5.8"
},
{
"value": "5"
},
{
"value": "4.3"
},
{
"value": "4.1"
},
{
"value": "3.8"
},
{
"value": "3.2"
}
]
}
]
}<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: 'InverseMSColumn2D',
id: 'time-chart',
dataFormat: 'json',
renderAt: 'chart-container',
width: '500',
height: '300',
dataSource: {
"chart": {
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"showBorder": "0",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
"placeValuesInside": "0",
"valueFontColor": "#333333",
"rotateValues": "0",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Loading Time",
"allowDrag": "0",
"data": [{
"value": "6"
}, {
"value": "5.8"
}, {
"value": "5"
}, {
"value": "4.3"
}, {
"value": "4.1"
}, {
"value": "3.8"
}, {
"value": "3.2"
}]
}]
},
events: {
'beforeRender': function(evt, args) {
// creating div for controllers
var controllers = document.createElement('div'),
gaugeRef = evt.sender;
controllers.setAttribute('id', 'controllers');
// Create radio buttons inside div
controllers.innerHTML = "<input name='btnGrp' id='inversemscolumn2d' type='radio' value='inversemscolumn2d' checked> Inverse Column 2D Chart</input><input name='btnGrp' id='mscolumn2d' type='radio' value='mscolumn2d'>Column 2D Chart</input>";
args.container.appendChild(controllers);
// set css style for controllers div
controllers.style.cssText = 'width:500px;text-align: center';
// set css styles for "input" elements in controls div
var input = controllers.getElementsByTagName('input');
for (i = 0; i < input.length; i++) {
if (input[i].getAttribute('type') == 'text') input[i].style.cssText = 'max-width: 50px;';
}
// select radio-button according to current type
document.getElementById(FusionCharts.items['time-chart'].chartType()).setAttribute('checked', 'true');
},
'renderComplete': function() {
var radio = document.getElementsByTagName('input'),
timeChart = FusionCharts.items['time-chart'],
radElem, val;
for (var i = 0; i < radio.length; i++) {
radElem = radio[i];
if (radElem.type === 'radio') {
radElem.onclick = function() {
val = this.getAttribute('value');
val && timeChart.chartType(val);
};
}
}
}
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>The chart is rendered with two radio buttons: Inverse Column 2D Chart and Column 2D Chart. When the first radio button is selected, the chart is rendered with an inverse y-axis; when the second one is selected, the chart is rendered with a normal y-axis. Observe that when you render the inverse y-axis chart, the lower limit value is rendered at the top and the upper limit value is rendered at the bottom - inverse of how it is rendered for a normal y-axis chart.
The FusionCharts Suite XT includes the following three types of inverse axis charts:
-
Inverse Y-axis Column Chart
-
Inverse Y-axis Area Chart
-
Inverse Y-axis Line Chart
You have seen how an inverse y-axis column chart looks.
An inverse y-axis multi-series area chart looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Daily bounce rate",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Percentage",
"numberSuffix": "%",
"showBorder": "0",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
"usePlotGradientColor": "0",
"plotFillAlpha": "50",
"showCanvasBorder": "0",
"LegendShadow": "0",
"legendBorderAlpha": "0",
"showXAxisLine": "1",
"axisLineAlpha": "40",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showAlternateHgridColor": "0",
"showValues": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "food.hsm.com",
"data": [
{
"value": "27"
},
{
"value": "22"
},
{
"value": "25"
},
{
"value": "27"
},
{
"value": "21"
},
{
"value": "29"
},
{
"value": "22"
}
]
},
{
"seriesname": "cloth.hsm.com",
"data": [
{
"value": "42"
},
{
"value": "38"
},
{
"value": "39"
},
{
"value": "36"
},
{
"value": "43"
},
{
"value": "44"
},
{
"value": "35"
}
]
}
]
}<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: 'inversemsarea',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Daily bounce rate",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Percentage",
"numberSuffix": "%",
"showBorder": "0",
"paletteColors": "#0075c2,#1aaf5d",
"bgColor": "#ffffff",
'usePlotGradientColor': "0",
"plotFillAlpha": "50",
"showCanvasBorder": "0",
"LegendShadow": "0",
"legendBorderAlpha": "0",
"showXAxisLine": "1",
"axisLineAlpha": "40",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showAlternateHgridColor": "0",
"showValues": "0",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5",
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "food.hsm.com",
"data": [{
"value": "27"
}, {
"value": "22"
}, {
"value": "25"
}, {
"value": "27"
}, {
"value": "21"
}, {
"value": "29"
}, {
"value": "22"
}]
}, {
"seriesname": "cloth.hsm.com",
"data": [{
"value": "42"
}, {
"value": "38"
}, {
"value": "39"
}, {
"value": "36"
}, {
"value": "43"
}, {
"value": "44"
}, {
"value": "35"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>An inverse y-axis multi-series line chart looks like this:
FusionCharts will load here..
{
"chart": {
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"showBorder": "0",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
"lineThickness": "2",
"paletteColors": "#008ee4,#6baa01",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"showLegend": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Loading Time",
"allowDrag": "0",
"data": [
{
"value": "6"
},
{
"value": "5.8"
},
{
"value": "5"
},
{
"value": "4.3"
},
{
"value": "4.1"
},
{
"value": "3.8"
},
{
"value": "3.2"
}
]
}
]
}<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: 'inversemsline',
dataFormat: 'json',
renderAt: 'chart-container',
width: '500',
height: '300',
dataSource: {
"chart": {
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"showBorder": "0",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
//Cosmetics
"lineThickness": "2",
"paletteColors": "#008ee4,#6baa01",
"baseFontColor": "#333333",
"baseFont": "Helvetica Neue,Arial",
"captionFontSize": "14",
"subcaptionFontSize": "14",
"subcaptionFontBold": "0",
"showBorder": "0",
"bgColor": "#ffffff",
"showShadow": "0",
"showLegend": "0",
"canvasBgColor": "#ffffff",
"canvasBorderAlpha": "0",
"divlineAlpha": "100",
"divlineColor": "#999999",
"divlineThickness": "1",
"divLineIsDashed": "1",
"divLineDashLen": "1",
"divLineGapLen": "1",
"showXAxisLine": "1",
"xAxisLineThickness": "1",
"xAxisLineColor": "#999999",
"showAlternateHGridColor": "0",
"toolTipColor": "#ffffff",
"toolTipBorderThickness": "0",
"toolTipBgColor": "#000000",
"toolTipBgAlpha": "80",
"toolTipBorderRadius": "2",
"toolTipPadding": "5"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Loading Time",
"allowDrag": "0",
"data": [{
"value": "6"
}, {
"value": "5.8"
}, {
"value": "5"
}, {
"value": "4.3"
}, {
"value": "4.1"
}, {
"value": "3.8"
}, {
"value": "3.2"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>To render an inverse y-axis multi-series line chart, set the value of the type attribute to inversemsline.