Configuring Charts - Manually defining y-axis limits and number of divisional lines

Using Div lines in Line chart

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Customizing the divisional lines in a chart. If you need to force y-axis lower and upper limits, you need to disable the auto calculation of number of divisional lines using adjustDiv attributes. Attributes: 1. adjustDiv - To disable automatic div calculation 2. yAxisMaxvalue - manually defined y-Axis max value 3. yAxisMinValue - manually defined y-Axis min value 4. numDivLines - Number of divisional lines you want to show on the y-axis (not including y-axis lower and upper limits) -->
<div id="chart-container">FusionCharts will render here</div>

CSS

#headerdiv {
    font-family:"Arial", "Helvetica";
    font-size: 12px;
    font-weight: bold;
}
#valueDiv {
    background-color: #FFFFFF;
    color:#003366;
    text-align:center;
    font-size: 25px;
    padding: 10px;
    margin-top:5px;
    font-family:"Arial", "Helvetica";
}

JavaScript

FusionCharts.ready(function () {
    var vstrChart = new FusionCharts({
        type: 'msline',
        renderAt: 'chart-container',
        width: '550',
        height: '400',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Website Visitors",
                    "subCaption": "Last week Vs This week",
                    "xAxisName": "Day",
                    "yAxisName": "No. of Visitors",
                    "theme": "fint",
                    "showValues": "0",
                    "plottooltext": "text",
            },
                "categories": [{
                "category": [{
                    "label": "Mon"
                }, {
                    "label": "Tue",
                    //"toolText": "Last Week, This Week",
                }, {
                    "label": "Wed"
                }, {
                    "label": "Thu"
                }, {
                    "label": "Fri"
                }, {
                    "label": "Sat"
                }, {
                    "label": "Sun"
                }]
            }],
                "dataset": [{
                "seriesname": "Last Week",
                    "data": [{
                    "value": "13000"
                }, {
                    "value": "17000",
                    //"toolText": "$seriesName"
                }, {
                    "value": "13500"
                }, {
                    "value": "15000"
                }, {
                    "value": "15500"
                }, {
                    "value": "17650"
                }, {
                    "value": "19500"
                }]
            }, {
                "seriesname": "This Week",
                    "data": [{
                    "value": "15400"
                }, {
                    "value": "17000",

                }, {
                    "value": "18800"
                }, {
                    "value": "22400"
                }, {
 ...