Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

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" } ] } ] }
{
    "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" } ] } ] }
{
    "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" } ] } ] }
{
    "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.

Top