MultiSeries 3D Bubble chart

Created using FusionCharts Suite XT - www.fusioncharts.com

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

JavaScript

FusionCharts.ready(function () {
    var investmentChart = new FusionCharts({
        "type": "bubble",
        "renderAt": "chart-container",
        "width": "600",
        "height": "350",
        "dataFormat": "json",
        "dataSource": {
            "chart": {
                "caption": "Market Investments - Treasury",
                "subcaption": "Harry's Supermart",
                "xAxisMinValue": "10",
                "xAxisMaxValue": "70",
                "yAxisMinValue": "0",
                "yAxisMaxValue": "36",
                "showPlotBorder": "0",
                "plotFillAlpha": "70",
                "znumberPrefix": "$",
                "plotFillHoverColor": "#cccccc",
                "xAxisName": "% Value Appreciation",
                "yAxisName": "Investment Tenure(In months)",
                "numDivlines": "2",
                "showValues": "1",
                "showTrendlineLabels": "0",
                "theme": "fint",
                "plottooltext": "<b>$seriesName</b>{br}Tenure: $yvalue {br} % Appreciation: $xValue {br} Investment: $$zValue",
                "use3DLighting":"1"
            },
            "categories": [
                {
                    "category": [
                        {
                            "label": "10%",
                            "x": "10",
                            "showverticalline": "1"
                        },
                        {
                            "label": "20%",
                            "x": "20",
                            "showverticalline": "1"
                        },
                        {
                            "label": "30%",
                            "x": "30",
                            "showverticalline": "1"
                        },
                        {
                            "label": "40%",
                            "x": "40",
                            "showverticalline": "1"
                        },
                       ...