FusionCharts - Multi Series Bubble Chart in JavaScript

Created using FusionCharts Suite XT - www.fusioncharts.com

by Ashok Kumaresan

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>
<!-- A Multi Series Bubble Chart showing Investemnt in Equities and Mutual Funds (Initiallly hidden) for Harry's Supermart -->
<div id="chart-container">FusionCharts will render here</div>

JavaScript

FusionCharts.ready(function () {
    var investmentChart = new FusionCharts({
        "type": "bubble",
         "id": "mychart",
        "renderAt": "chart-container",
        "width": "600",
        "height": "350",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Market Investments - Treasury",
                "subcaption": "Harry's Supermart",
            
            
                "xAxisName": "% Value Appreciation",
                "yAxisName": "Investment Tenure(In months)",
                "numDivlines": "2",
                "showValues": "1",
                "showTrendlineLabels": "1",
                "theme": "fint",
                "plottooltext": "<b>$seriesName</b>{br}Tenure: $yvalue {br} % Appreciation: $xValue {br} Investment: $$zValue"
            },
                         "annotations": {
        "width": "550",
        "height": "350",
        "autoScale": "1",
        "groups": [
            {
                "id": "user-images",
                "items": [   
                       {
                        "id": "Equities",
                        "type": "line",
                        "fillcolor": "#ff0000",
                        "x": "58",
                        "y": "80",
                        "toX":"550",
                        "toY":"80",
                           "alpha":"100",
                       "thickness":"2"
                    },
                     {
                        "id": "Mutual Funds",
                        "type": "line",
                        "fillcolor": "#000000",
                        "x": "58",
                        "y": "220",
                        "toX":"550",
                        "toY":"220",
                          "alpha":"100",
                       "thickness":"2"
                    }
                   
                ]
            }
        ]
    },
            "categories": [
                {
                   ...