Multi-axis Line Chart
This chart type belongs to PowerCharts XT.
A multi-axis line chart, as the name suggests, is an interactive line chart that can be configured for multiple axes. It is a special type of chart that allows multiple y-axes to be rendered in the same chart. The advantage of using a multi-axis line chart is that you can plot multiple data sets with different types of units. For example, 1-100 on one axis, 1m - 100m on another axis, and 0 - 1 on yet another axis) on the same chart.
Features
The FusionCharts Suite XT multi-axis line chart includes the following features:
Multiple axes on the same chart.
Interactive axis, which allows the end user to show or hide data sets (lines) plotted against that axis.
Options to make the axis visible or imaginary.
Options to draw the axis on left or right side of the chart.
Interactive options, like dynamic sliding of the axis from one end to other upon clicking.
Ability to plot multiple data-sets against the same axis.
Options to configure axis-specific properties like:
Upper and lower limits
Cosmetic properties
Divisional Lines
Cosmetic properties of data-sets plotting against the particular axis
Number formatting
Create a Multi-Axis Line Chart
Let's create our first multi-axis line which will showcase the revenue analysis Harry's SuperMart depending on the revenue, orders, and footfall for 12 weeks.
To create a multi-axis line 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 a multi-axis line chart, setmultiaxisline.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.
The attributes and the structure of the multi-axis line chart is a bit different from the multi-series charts. So there are some configurations and attributes which may help you in customizing your chart. They are:
Specify the
titleattribute to set the title for an axis. This attribute belongs to the axis object.Specify the
tickWidthattribute to set the width between the tick marks protruding from the axis. This attribute belongs to the axis object.Specify whether the axis will be rendered on the left side of the canvas or the right side using
axisOnLeftattribute. Setting this attribute to0will render the axis on the right, setting it to1(default) will render it on the left. This attribute belongs to the axis object.Specifying the
allowSelectionattribute will let you set the checkbox shown for each axis. Selecting/clearing this checkbox for an axis will show/hide the data set belonging to that axis.Specify the
allowAxisShiftattribute to set the dynamic shifting of an axis. If you click an axis that is not the primary (the first from the left of the canvas) or the secondary (the first from the right canvas) axis, the axis to the left of this axis will replace it. The axis that you clicked will be placed at the end, in case of multiple axes. Setting this attribute to0will disable the shifting of axes, setting it to1(default) will enable it.Set the
showAxisattribute to specify whether the axis will be shown or hidden (referred to as an imaginary axis). Setting this attribute to0will hide the axis, setting it to1(default) will show it.
For a detailed list of attributes, refer to the chart attributes page of multi-axis line chart.
Refer to the code below:
{
"chart": {
...
},
"categories": [{
"category": [
]
}],
"axis": [{
"showAxis": "1",
"allowAxisShift": "1",
"title": "Revenue",
"tickWidth": "10",
"numberPrefix": "$",
"divlineDashed": "1",
"dataset": [{
...
}]
}]
}A multi-axis line chart rendered with three axes looks like this:
{
"chart": {
"caption": "Revenue Analysis",
"subcaption": "Last 12 weeks",
"xAxisName": "Week of Year",
"showValues": "0",
"theme": "fint"
},
"categories": [
{
"category": [
{
"label": "1"
},
{
"label": "2"
},
{
"label": "3"
},
{
"label": "4"
},
{
"label": "5"
},
{
"label": "6"
},
{
"label": "7"
},
{
"label": "8"
},
{
"label": "9"
},
{
"label": "10"
},
{
"label": "11"
},
{
"label": "12"
}
]
}
],
"axis": [
{
"title": "Revenue",
"tickWidth": "10",
"numberPrefix": "$",
"divlineDashed": "1",
"dataset": [
{
"seriesname": "Revenue",
"lineThickness": "3",
"data": [
{
"value": "137500"
},
{
"value": "124350"
},
{
"value": "156700"
},
{
"value": "131450"
},
{
"value": "208300"
},
{
"value": "219900"
},
{
"value": "227500"
},
{
"value": "254300"
},
{
"value": "155900"
},
{
"value": "105650"
},
{
"value": "120950"
},
{
"value": "127500"
}
]
}
]
},
{
"title": "Orders",
"axisOnLeft": "0",
"numDivlines": "8",
"tickWidth": "10",
"divlineDashed": "1",
"dataset": [
{
"seriesname": "Orders",
"data": [
{
"value": "22567"
},
{
"value": "21348"
},
{
"value": "24846"
},
{
"value": "19237"
},
{
"value": "20672"
},
{
"value": "23403"
},
{
"value": "30278"
},
{
"value": "26719"
},
{
"value": "21940"
},
{
"value": "24396"
},
{
"value": "22340"
},
{
"value": "25439"
}
]
}
]
},
{
"title": "Footfalls",
"axisOnLeft": "0",
"numDivlines": "5",
"tickWidth": "10",
"numberSuffix": "",
"divlineDashed": "1",
"dataset": [
{
"seriesname": "Footfalls",
"data": [
{
"value": "68473"
},
{
"value": "57934"
},
{
"value": "78925"
},
{
"value": "69213"
},
{
"value": "74892"
},
{
"value": "81123"
},
{
"value": "90086"
},
{
"value": "91174"
},
{
"value": "68934"
},
{
"value": "80934"
},
{
"value": "73634"
},
{
"value": "84453"
}
]
}
]
}
]
}<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: 'multiaxisline',
renderAt: 'chart-container',
width: '600',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Revenue Analysis",
"subcaption": "Last 12 weeks",
"xAxisName": "Week of Year",
"showValues": "0",
"theme": "fint"
},
"categories": [{
"category": [{
"label": "1"
}, {
"label": "2"
}, {
"label": "3"
}, {
"label": "4"
}, {
"label": "5"
}, {
"label": "6"
}, {
"label": "7"
}, {
"label": "8"
}, {
"label": "9"
}, {
"label": "10"
}, {
"label": "11"
}, {
"label": "12"
}]
}],
"axis": [{
"title": "Revenue",
"tickWidth": "10",
"numberPrefix": "$",
"divlineDashed": "1",
"dataset": [{
"seriesname": "Revenue",
"lineThickness": "3",
"data": [{
"value": "137500"
}, {
"value": "124350"
}, {
"value": "156700"
}, {
"value": "131450"
}, {
"value": "208300"
}, {
"value": "219900"
}, {
"value": "227500"
}, {
"value": "254300"
}, {
"value": "155900"
}, {
"value": "105650"
}, {
"value": "120950"
}, {
"value": "127500"
}]
}]
}, {
"title": "Orders",
"axisOnLeft": "0",
"numDivlines": "8",
"tickWidth": "10",
"divlineDashed": "1",
"dataset": [{
"seriesname": "Orders",
"data": [{
"value": "22567"
}, {
"value": "21348"
}, {
"value": "24846"
}, {
"value": "19237"
}, {
"value": "20672"
}, {
"value": "23403"
}, {
"value": "30278"
}, {
"value": "26719"
}, {
"value": "21940"
}, {
"value": "24396"
}, {
"value": "22340"
}, {
"value": "25439"
}]
}]
}, {
"title": "Footfalls",
"axisOnLeft": "0",
"numDivlines": "5",
"tickWidth": "10",
"numberSuffix": "",
"divlineDashed": "1",
"dataset": [{
"seriesname": "Footfalls",
"data": [{
"value": "68473"
}, {
"value": "57934"
}, {
"value": "78925"
}, {
"value": "69213"
}, {
"value": "74892"
}, {
"value": "81123"
}, {
"value": "90086"
}, {
"value": "91174"
}, {
"value": "68934"
}, {
"value": "80934"
}, {
"value": "73634"
}, {
"value": "84453"
}]
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Click here to edit the multi-axis line chart.