Inverse Y-axis Chart
These chart types belong to PowerCharts XT.
The inverse y-axis charts are similar to the normal column charts, except that the y-axis and the data plots (column and area) in these charts are inverted. The lower limit and upper limit value positions are swapped in the inverse y-axis chart.
The inverse data plots (column and area) will be applicable to the charts with positive y-axis range (> = 0).
The FusionCharts Suite XT includes the following three types of inverse y-axis charts:
Inverse Y-axis Column Chart
Inverse Y-axis Area Chart
Inverse Y-axis Line Chart
Inverse Y-axis Column Chart
An inverse y-axis column chart looks as shown below:
{
"header": "Chart Components (Anatomy)",
"subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below you can find different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [{
"_itemHeader": "Inverse Y-axis Column Chart",
"imgSrc": "inverse-y-axis-column-chart.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption. You can also configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "31%",
"topPosition": "6.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add the caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "You can customize font properties and cosmetics of the caption using attributes. Know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for the sub-caption. You can also configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "53.5%",
"topPosition": "12%",
"annotationLinks": [{
"linkDesc": "Learn how to add subcaption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "You can customize font properties and cosmetics of the subcaption using attributes. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "78%",
"topPosition": "8%",
"annotationLinks": [{
"linkDesc": "You can customize the canvas border. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize the background color for canvas, as well as add a gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to a line on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "83%",
"topPosition": "13%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "It refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "44%",
"topPosition": "77%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the X-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "61%",
"topPosition": "70%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to a line on a chart that runs vertically (up-down) through zero. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "14%",
"topPosition": "6.5%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "It refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#y-axis-position",
"leftPosition": "6%",
"topPosition": "41%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It provides context-sensitive information about the data point.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "68.5%",
"topPosition": "42.5%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of a tooltip. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can customize the text of a tooltip and use values plotted on the chart using macros. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
}
]
}
]
}
}
Let's create an inverse y-axis chart showcasing average page load time of hsm.com. In the sample you will observe that when you render the chart, the lower limit value is rendered at the top and the upper limit value is rendered at the bottom - which renders the inverse data plots.
To create an inverse y-axis chart follow the steps given below:
In the JSON data, set the attributes and their corresponding values in
"<attributeName>": "<value>"format.Specify the chart type using the
typeattribute. To render an inverse y-axis column chart, setinverseMSColumn2D.Set the container object using
renderAtattribute.Specify the dimension of the chart using
widthandheightattributes.Set the type of data (JSON/XML) you want to pass to the chart object using
dataFormatattribute.
For a detailed list of attributes, refer to the chart attributes page of inverse y-axis column chart.
The inverse y-axis chart looks like a shown below:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
"showXAxisLine": "1",
"showLegend": "0"
},
"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 theme="fusion" caption="Average Page Load Time (hsm.com)" subcaption="Last Week" xaxisname="Day" yaxisname="Time (In Sec)" numbersuffix="s" showxaxisline="1" showlegend="0">
<categories>
<category label="Mon" />
<category label="Tue" />
<category label="Wed" />
<category label="Thu" />
<category label="Fri" />
<category label="Sat" />
<category label="Sun" />
</categories>
<dataset seriesname="Loading Time" allowdrag="0">
<set value="6" />
<set value="5.8" />
<set value="5" />
<set value="4.3" />
<set value="4.1" />
<set value="3.8" />
<set value="3.2" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'InverseMSColumn2D',
dataFormat: 'json',
renderAt: 'chart-container',
width: '680',
height: '390',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
"showXAxisLine": "1",
"showLegend": "0"
},
"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"
}]
}]
}
});
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above inverse y-axis column chart
Inverse Y-axis Area Chart
An inverse y-axis area chart looks as shown below:
{
"header": "Chart Components (Anatomy)",
"subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below you can find different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [{
"_itemHeader": "Inverse Y-axis Area Chart",
"imgSrc": "inverse-y-axis-area-chart.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption. You can also configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "38%",
"topPosition": "5.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add the caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "You can customize font properties and cosmetics of the caption using attributes. Know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for the sub-caption. You can also configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "53.5%",
"topPosition": "12%",
"annotationLinks": [{
"linkDesc": "Learn how to add subcaption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "You can customize font properties and cosmetics of the subcaption using attributes. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "78%",
"topPosition": "8%",
"annotationLinks": [{
"linkDesc": "You can customize the canvas border. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize the background color for canvas, as well as add a gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to a line on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "83%",
"topPosition": "13%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "It refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "44%",
"topPosition": "68%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the X-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "64%",
"topPosition": "74%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to a line on a chart that runs vertically (up-down) through zero. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "14%",
"topPosition": "6.5%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "It refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#y-axis-position",
"leftPosition": "0%",
"topPosition": "43%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It provides context-sensitive information about the data point.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "81%",
"topPosition": "42%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of a tooltip. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can customize the text of a tooltip and use values plotted on the chart using macros. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
}
]
}
]
}
}
You have seen how an inverse y-axis column chart looks. To render an inverse y-axis area chart, change the value of the type attribute from inverseMSColumn2D to inverseMSArea. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of inverse y-axis area chart.
An inverse y-axis multi-series area chart looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Daily bounce rate",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Percentage",
"numberSuffix": "%"
},
"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 theme="fusion" caption="Daily bounce rate" subcaption="Last week" xaxisname="Day" yaxisname="Percentage" numbersuffix="%">
<categories>
<category label="Mon" />
<category label="Tue" />
<category label="Wed" />
<category label="Thu" />
<category label="Fri" />
<category label="Sat" />
<category label="Sun" />
</categories>
<dataset seriesname="food.hsm.com">
<set value="27" />
<set value="22" />
<set value="25" />
<set value="27" />
<set value="21" />
<set value="29" />
<set value="22" />
</dataset>
<dataset seriesname="cloth.hsm.com">
<set value="42" />
<set value="38" />
<set value="39" />
<set value="36" />
<set value="43" />
<set value="44" />
<set value="35" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'inversemsarea',
renderAt: 'chart-container',
width: '680',
height: '390',
dataFormat: 'json',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Daily bounce rate",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Percentage",
"numberSuffix": "%"
},
"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"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above inverse y-axis area chart.
Inverse Y-axis Line Chart
An inverse y-axis line chart looks as shown below:
{
"header": "Chart Components (Anatomy)",
"subHeader": "To know how FusionCharts works, it is important to understand the various components and concepts of a chart",
"content": {
"header": "Below you can find different sections with interactive annotated images describing various components and concepts of charts",
"contentGroup": [{
"_itemHeader": "Inverse Y-axis Line Chart",
"imgSrc": "inverse-y-axis-line-chart.png",
"annotations": [{
"annotationNumber": "1",
"annotationName": "Caption",
"annotationDesc": "The caption (also called the chart title) is the heading of your chart. You can add custom text for the caption. You can also configure its font properties and cosmetics.",
"annotationDescLinkPath": null,
"leftPosition": "26%",
"topPosition": "8.5%",
"annotationLinks": [{
"linkDesc": "Learn how to add the caption ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#set-the-caption-and-subcaption"
},
{
"linkDesc": "You can customize font properties and cosmetics of the caption using attributes. Know more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
},
{
"linkDesc": "You can customize the alignment of the caption. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#configure-caption-alignment"
}
]
},
{
"annotationNumber": "2",
"annotationName": "Subcaption",
"annotationDesc": "The subcaption (also called the chart subtitle) is the subheading of your chart. You can add custom text for the sub-caption. You can also configure its font properties.",
"annotationDescLinkPath": null,
"leftPosition": "48.5%",
"topPosition": "15%",
"annotationLinks": [{
"linkDesc": "Learn how to add subcaption ",
"linkPath": "/chart-guide/chart-configurations/axes#setting-axes-names"
},
{
"linkDesc": "You can customize font properties and cosmetics of the subcaption using attributes. Learn more about them ",
"linkPath": "/chart-guide/chart-configurations/caption-and-sub-caption#customize-font-properties"
}
]
},
{
"annotationNumber": "3",
"annotationName": "Canvas Area",
"annotationDesc": "Canvas area refers to the area in which the chart data is plotted, excluding the area where titles, legends, and axis names are rendered.",
"annotationDescLinkPath": null,
"leftPosition": "78%",
"topPosition": "8%",
"annotationLinks": [{
"linkDesc": "You can customize the canvas border. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#show-canvas-border"
},
{
"linkDesc": "You can customize the background color for canvas, as well as add a gradient fill to it. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/canvas#use-gradient-fill"
}
]
},
{
"annotationNumber": "4",
"annotationName": "X-Axis",
"annotationDesc": "X-Axis refers to a line on a chart that runs horizontally (left-right). Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "83%",
"topPosition": "13%",
"annotationLinks": []
},
{
"annotationNumber": "5",
"annotationName": "X-Axis Title",
"annotationDesc": "It refers to title of the x-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "39%",
"topPosition": "79%",
"annotationLinks": []
},
{
"annotationNumber": "6",
"annotationName": "X-Axis Labels",
"annotationDesc": "X-Axis labels are the names of the data points that are displayed on the X-axis of a chart. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "58%",
"topPosition": "72%",
"annotationLinks": []
},
{
"annotationNumber": "7",
"annotationName": "Y-Axis",
"annotationDesc": "Y-Axis refers to a line on a chart that runs vertically (up-down) through zero. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "9%",
"topPosition": "6.5%",
"annotationLinks": []
},
{
"annotationNumber": "8",
"annotationName": "Y-Axis Title",
"annotationDesc": "It refers to the title of the y-axis. Learn more about it ",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#y-axis-position",
"leftPosition": "0%",
"topPosition": "43%",
"annotationLinks": []
},
{
"annotationNumber": "9",
"annotationName": "Tooltip",
"annotationDesc": "A tooltip is displayed when the mouse cursor hovers over a particular data point. It provides context-sensitive information about the data point.",
"annotationDescLinkPath": "/chart-guide/chart-configurations/axes#setting-axes-names",
"leftPosition": "64%",
"topPosition": "53%",
"annotationLinks": [{
"linkDesc": "You can customize padding, size and other properties of a tooltip. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#customize-tooltips"
},
{
"linkDesc": "You can customize the text of a tooltip and use values plotted on the chart using macros. Learn more about it ",
"linkPath": "/chart-guide/chart-configurations/tool-tips#introduction-to-macros"
}
]
}
]
}
]
}
}
To render an inverse y-axis area chart, change the value of the type attribute from inverseMSArea to inverseMSLine. The rest of the data structure remains the same.
For a detailed list of attributes, refer to the chart attributes page of inverse y-axis line chart.
An inverse y-axis multi-series line chart looks like this:
FusionCharts will load here..
{
"chart": {
"theme": "fusion",
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
"lineThickness": "2",
"showLegend": "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 theme="fusion" caption="Average Page Load Time (hsm.com)" subcaption="Last Week" xaxisname="Day" yaxisname="Time (In Sec)" numbersuffix="s" linethickness="2" showlegend="0" tooltipcolor="#ffffff" tooltipborderthickness="0" tooltipbgcolor="#000000" tooltipbgalpha="80" tooltipborderradius="2" tooltippadding="5">
<categories>
<category label="Mon" />
<category label="Tue" />
<category label="Wed" />
<category label="Thu" />
<category label="Fri" />
<category label="Sat" />
<category label="Sun" />
</categories>
<dataset seriesname="Loading Time" allowdrag="0">
<set value="6" />
<set value="5.8" />
<set value="5" />
<set value="4.3" />
<set value="4.1" />
<set value="3.8" />
<set value="3.2" />
</dataset>
</chart><html>
<head>
<title>My first chart using FusionCharts Suite XT</title>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
<script type="text/javascript" src="https://cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>
<script type="text/javascript">
FusionCharts.ready(function(){
var chartObj = new FusionCharts({
type: 'inversemsline',
dataFormat: 'json',
renderAt: 'chart-container',
width: '680',
height: '390',
dataSource: {
"chart": {
"theme": "fusion",
"caption": "Average Page Load Time (hsm.com)",
"subCaption": "Last Week",
"xAxisName": "Day",
"yAxisName": "Time (In Sec)",
"numberSuffix": "s",
//Cosmetics
"lineThickness": "2",
"showLegend": "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"
}]
}]
}
}
);
chartObj.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the above inverse y-axis line chart.