Multi-axis Line Chart
A multi-axis line chart, as the name suggests, is an interactive line chart that can be configured for multiple axes.
In this section, you will be introduced to:
Basics of a Multi-axis Line Chart
The multi-axis line chart 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 (e.g. liter, kg, meter) and different scale ranges ( e.g. 1-100 on one axis, 1m - 100m on another axis, and 0 - 1 on yet another axis) on the same chart.
Features of a Multi-axis Line Chart
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 chart
-
Interactive options, like dynamic sliding of 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
-
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>Creating a Simple Multi-axis Line Chart
You have seen how a multi-axis line chart looks.
Given below is a brief description of the attributes used to configure a multi-axis line chart:
| Attribute Name | Description |
|---|---|
|
It is used to specify the title for an axis, e.g. Footfalls. This attribute belongs to the |
|
It is used to specify the width between the tick marks protruding from the axis. This attribute belongs to the |
|
It is used to specify whether the axis will be rendered on the left side of the canvas or the right side. Setting this attribute to |
|
It is used to specify whether a checkbox will be shown for each axis. Selecting/clearing this checkbox for an axis will show/hide the data set belonging to that axis. |
|
It is used to specify whether dynamic shifting of an axis will be enabled. 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 to |
|
It is used to specify whether an axis will be shown or hidden (referred to as an imaginary axis). Setting this attribute to |