Demos

Beginner's Guide

Charts / Gauges / Maps Guide

Customizing Charts

API

Integrating With Your Stack

Help

Loading

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..

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 data structure needed to render this chart is given below:

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

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..

The data structure needed to render an inverse y-axis multi-series area chart is given below:

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

An inverse y-axis multi-series line chart looks like this:

FusionCharts will load here..

To render an inverse y-axis multi-series line chart, set the value of the type attribute to inversemsline

There! You have now seen how you can create inverse y-axis charts.

Top