Loading
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:
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"
}
]
}
]
}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:
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"
}
]
}
]
}An inverse y-axis multi-series line chart looks like this:
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.