Zoomline Chart simple

Using data plot rollover/rollout events

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
        var revenueChart = new FusionCharts({
            type: 'zoomline',
            renderAt: 'chart-container',
            id: 'myChart',
            width: '600',
            height: '500',
            dataFormat: 'json',
            dataSource:

            {
                "chart": {
                    "caption": "Unique Website Visits in a Year",
                        "xaxisname": "Date",
                        "yaxisname": "Unique Visitors",
                        "theme": "fint"
                },
                    "categories": [{
                    "category": [{
                        "label": "1st January 2009"
                    }, {
                        "label": "2nd January 2009"
                    }, {
                        "label": "3rd January 2009"
                    }, {
                        "label": "4th January 2009"
                    }, {
                        "label": "5th January 2009"
                    }, {
                        "label": "6th January 2009"
                    }, {
                        "label": "7th January 2009"
                    }, {
                        "label": "8th January 2009"
                    }, {
                        "label": "9th January 2009"
                    }, {
                        "label": "10th January 2009"
                    }, {
                        "label": "11th January 2009"
                    }, {
                        "label": "12th January 2009"
                    }, {
                        "label": "13th January 2009"
                    }, {
                        "label": "14th January 2009"
                    }, {
                        "label": "15th January 2009"
                    }, {
                        "label": "16th January 2009"
                    }, {
                        "label": "17th January 2009"
                    }, {
                        "label": "18th January 2009"
 ...