Div Lines and Grids
Divisional lines are horizontal lines running along the canvas. They enable easier visual reference of plot values against the y-axis and for comparison across data points. In scatter and bubble charts, there are additional vertical divisional lines for better visualization.
By default, FusionCharts Suite XT automatically adds div lines based on the minimum and maximum y-axis values. However, several customization options for div lines are available too.
This article talks about:
Customizing number of divisional lines
In certain cases, you might want to explicitly specify the y-axis minimum & maximum values as well as the number of divisional lines. To do this, you need to disable the automatic adjustment of divisional lines and explicitly define the y-axis upper and lower limits as well as the number of divisional lines to render. A column 2D chart with explicitly specified number of divisional lines is shown below:
FusionCharts will load here..
{
"chart": {
"caption": "Website Visitors",
"subCaption": "Last week Vs This week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint",
"showValues": "0",
"adjustDiv": "0",
"yAxisMaxvalue": "35000",
"yAxisMinValue": "5000",
"numDivLines": "9"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Last Week",
"data": [
{
"value": "13000"
},
{
"value": "14500"
},
{
"value": "13500"
},
{
"value": "15000"
},
{
"value": "15500"
},
{
"value": "17650"
},
{
"value": "19500"
}
]
},
{
"seriesname": "This Week",
"data": [
{
"value": "15400"
},
{
"value": "16800"
},
{
"value": "18800"
},
{
"value": "22400"
},
{
"value": "23800"
},
{
"value": "25800"
},
{
"value": "30800"
}
]
}
]
}<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: 'msline',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Website Visitors",
"subCaption": "Last week Vs This week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint",
"showValues": "0",
//Setting automatic calculation of div lines to off
"adjustDiv": "0",
//Manually defining y-axis lower and upper limit
"yAxisMaxvalue": "35000",
"yAxisMinValue": "5000",
//Setting number of divisional lines to 9
"numDivLines": "9"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Last Week",
"data": [{
"value": "13000"
}, {
"value": "14500"
}, {
"value": "13500"
}, {
"value": "15000"
}, {
"value": "15500"
}, {
"value": "17650"
}, {
"value": "19500"
}]
}, {
"seriesname": "This Week",
"data": [{
"value": "15400"
}, {
"value": "16800"
}, {
"value": "18800"
}, {
"value": "22400"
}, {
"value": "23800"
}, {
"value": "25800"
}, {
"value": "30800"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to adjust divisional lines:
Attribute |
Description |
|
If set to |
|
They specify the lower and upper limits, respectively, for the y-axis. |
|
It specifies the number of divisional lines to render. |
Customizing display of divisional lines
A multi-series column 2D chart with customized div lines(explicitly defined) looks as below:
FusionCharts will load here..
{
"chart": {
"caption": "Website Visitors",
"subCaption": "Last week Vs This week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint",
"divLineColor": "#6699cc",
"divLineAlpha": "60",
"divLineDashed": "0"
},
"categories": [
{
"category": [
{
"label": "Mon"
},
{
"label": "Tue"
},
{
"label": "Wed"
},
{
"label": "Thu"
},
{
"label": "Fri"
},
{
"label": "Sat"
},
{
"label": "Sun"
}
]
}
],
"dataset": [
{
"seriesname": "Last Week",
"data": [
{
"value": "13000"
},
{
"value": "14500"
},
{
"value": "13500"
},
{
"value": "15000"
},
{
"value": "15500"
},
{
"value": "17650"
},
{
"value": "19500"
}
]
},
{
"seriesname": "This Week",
"data": [
{
"value": "15400"
},
{
"value": "16800"
},
{
"value": "18800"
},
{
"value": "22400"
},
{
"value": "23800"
},
{
"value": "25800"
},
{
"value": "30800"
}
]
}
]
}<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: 'mscolumn2d',
renderAt: 'chart-container',
width: '500',
height: '350',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Website Visitors",
"subCaption": "Last week Vs This week",
"xAxisName": "Day",
"yAxisName": "No. of Visitors",
"theme": "fint",
//Divisional line cosmetics
"divLineColor": "#6699cc",
"divLineAlpha": "60",
"divLineDashed": "0"
},
"categories": [{
"category": [{
"label": "Mon"
}, {
"label": "Tue"
}, {
"label": "Wed"
}, {
"label": "Thu"
}, {
"label": "Fri"
}, {
"label": "Sat"
}, {
"label": "Sun"
}]
}],
"dataset": [{
"seriesname": "Last Week",
"data": [{
"value": "13000"
}, {
"value": "14500"
}, {
"value": "13500"
}, {
"value": "15000"
}, {
"value": "15500"
}, {
"value": "17650"
}, {
"value": "19500"
}]
}, {
"seriesname": "This Week",
"data": [{
"value": "15400"
}, {
"value": "16800"
}, {
"value": "18800"
}, {
"value": "22400"
}, {
"value": "23800"
}, {
"value": "25800"
}, {
"value": "30800"
}]
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to customize the appearance of the divisional lines:
Attribute |
Description |
|
If specifies the hex code for the color that will be used to render the horizontal divisional lines. e.g. |
|
Sets the thickness of the horizontal divisional lines(in pixels). |
|
Sets the transparency of the divisional lines. Can take values from |
Using dashed divisional lines
FusionCharts Suite XT allows you to render the divisional lines as dashed lines, instead of the default continuous lines.
A line chart with dashed div lines looks as below:
FusionCharts will load here..
{
"chart": {
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0",
"lineThickness": "5",
"theme": "fint",
"divLineDashed": "1",
"divLineDashLen": "5",
"divLineDashGap": "6"
},
"data": [
{
"label": "Mon",
"value": "5123"
},
{
"label": "Tue",
"value": "4233"
},
{
"label": "Wed",
"value": "5507"
},
{
"label": "Thu",
"value": "4110"
},
{
"label": "Fri",
"value": "5529"
},
{
"label": "Sat",
"value": "5803"
},
{
"label": "Sun",
"value": "6202"
}
]
}<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: 'line',
renderAt: 'chart-container',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Visitors to website",
"subCaption": "Last week",
"xAxisName": "Day",
"yAxisName": "Visits",
"showValues": "0",
"lineThickness": "5",
"theme": "fint",
//Converting to dashed div line
"divLineDashed": "1",
//Customizing div lines dash length in pixel
"divLineDashLen": "5",
//Setting gap between div line dashes
"divLineDashGap": "6"
},
"data": [{
"label": "Mon",
"value": "5123"
}, {
"label": "Tue",
"value": "4233"
}, {
"label": "Wed",
"value": "5507"
}, {
"label": "Thu",
"value": "4110"
}, {
"label": "Fri",
"value": "5529"
}, {
"label": "Sat",
"value": "5803"
}, {
"label": "Sun",
"value": "6202"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to render divisional lines as dashed:
Attribute |
Description |
|
Set this to |
|
Sets the length of each dash of divisional lines(in pixels). |
|
Sets the gap between two consecutive dashes in divisional lines (in pixels). |
Customizing horizontal grid bands
To further aid data visualization, alternate spaces between grid lines can be colored to create grid bands.
Showing/hiding horizontal grid bands
Horizontal grid bands, by default, do not appear between the divisional lines. A column 2D chart with horizontal grid bands enabled is shown here:
FusionCharts will load here..
{
"chart": {
"caption": "Quarterly Revenue",
"subcaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"showAlternateHGridColor": "1",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<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: 'column2d',
renderAt: 'chart-container',
id: 'myChart',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"subcaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
//Show alternative horizontal grid color
"showAlternateHGridColor": "1",
//Theme
"theme": "fint"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below is the attribute used to show/hide the horizontal grid bands:
Attribute |
Description |
|
Set this to |
Customizing horizontal grid bands
A column 2D chart with customized horizontal grid bands looks as below:
FusionCharts will load here..
{
"chart": {
"caption": "Quarterly Revenue",
"subcaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
"showAlternateHGridColor": "1",
"alternateHGridColor": "#99ccff",
"alternateHGridAlpha": "30",
"theme": "fint"
},
"data": [
{
"label": "Q1",
"value": "1950000"
},
{
"label": "Q2",
"value": "1450000"
},
{
"label": "Q3",
"value": "1730000"
},
{
"label": "Q4",
"value": "2120000"
}
]
}<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: 'column2d',
renderAt: 'chart-container',
id: 'myChart',
width: '400',
height: '300',
dataFormat: 'json',
dataSource: {
"chart": {
"caption": "Quarterly Revenue",
"subcaption": "Last year",
"xAxisName": "Quarter",
"yAxisName": "Amount (In USD)",
"numberPrefix": "$",
//Horizontal band color and alpha configuration
"showAlternateHGridColor": "1",
"alternateHGridColor": "#99ccff",
"alternateHGridAlpha": "30",
//Theme
"theme": "fint"
},
"data": [{
"label": "Q1",
"value": "1950000"
}, {
"label": "Q2",
"value": "1450000"
}, {
"label": "Q3",
"value": "1730000"
}, {
"label": "Q4",
"value": "2120000"
}]
}
}
);
fusioncharts.render();
});
</script>
</head>
<body>
<div id="chart-container">FusionCharts XT will load here!</div>
</body>
</html>Given below are the attributes used to customize the horizontal grid bands:
Attribute |
Description |
|
It specifies the hex code for the color that will be used to render the horizontal grid bands. e.g. |
|
It specifies the transparency of the horizontal grid bands. Can take values from |