Bar3D chart with grouped labels

Created using FusionCharts Suite XT - www.fusioncharts.com

by Nabajeet Sonowal

HTML

<script src="http://static.fusioncharts.com/code/latest/fusioncharts.charts.js"></script>
<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>

CSS

body {
    padding: 10px;
}

JavaScript

FusionCharts.ready(function () {
    var revenueChart = new FusionCharts({
        type: 'bar3d',
        renderAt: 'chart-container',
        width: '600',
        height: '500',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Highest Level of Education in U.S",
                    "subcaption": "U.S Bureau of Labor (Survey 2013)",
                    "yaxisname": "Percent of population",
                    "numbersuffix": "%",
                    "showvalues": "1",
                    "plotgradientcolor": "",
                    "plotborderalpha": "0",
                    "alternatevgridalpha": "0",
                    "divlinealpha": "0",
                    "canvasborderalpha": "0",
                    "bgcolor": "#FFFFFF",
                    "basefontsize": "12",
                    "basefontcolor": "#194920",
                    "palettecolors": "#3A803D",
                    "showyaxisvalues": "0",
                    "showborder": "0",
                "animation":"0"
            },
            //All annotations are grouped under this element
            "annotations": {
                //Annotations on a chart can be divided across multiple groups for easy management, and manipulation through API
                "groups": [
                    {                       
                        "id" : "infobar",
                        //Under each group, you can define multiple items. Each item is a polygon, text or image - with its own set of parameters
                        "items": [
                            {
                                "id": "line1",
                                "type": "line",
                                "x": "$chartStartX",
                                "y": "$canvasStarty+4",
                                "tox": "$canvasStartX-13",
                                "toy": "$canvasStarty+4",
                                "color": "#6baa01",
                   ...