FusionCharts API-Methods: getChartAttribute

Created using FusionCharts Suite XT - www.fusioncharts.com

by FusionCharts

HTML

<script src="https://static.fusioncharts.com/code/latest/fusioncharts.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.carbon.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.ocean.js"></script>
<script src="https://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.zune.js"></script>
<!-- This sample shows the usage of the getChartAttribute() method -->
<div id="indicatorDiv">Method Name: <strong>getChartAttribute()</strong>
   <p>Fetches values of chart attributes explicitly applied to the root chart object of the JSON data. To read more about this method, click <a href="http://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#getChartAttribute" target="_blank">here</a>.</p>
   <p>From the drop-down below, when a theme is selected, the <strong>setChartAttribute()</strong> method is used to update the value of the <strong>theme</strong> attribute. The chart is then rendered with the selected theme. The <strong>getChartAttribute()</strong> method is then used to update the value rendered with the text <strong>Current theme</strong>.</p>

    <div class="text-center">
    	<label id="label" class="mb-20">Select a theme:
    	    <select id="theme-type">
    	        <option value="carbon">carbon</option>
    	        <option value="zune">zune</option>
    	        <option value="ocean">ocean</option>
    	    </select>
    	</label>   
    	   
    	<div id="current_value"></div>    
    	<div id="chart-container" class="mb-20">FusionCharts will render here</div>
    </div>
</div>

CSS

#label {
    font-family:'Arial', 'Helvetica';
    font-size: 14px;
}
#current_value {
    font-family:'Arial', 'Helvetica';
    font-size: 16px;
    margin: 20px 0;
}
body {
    padding: 5px;
    margin: 0 auto;
}

strong{
  font-weight: bold;
}

.text-center {
  text-align: center;
}

p {
  margin: 10px auto;
}

.mb-20 {
  margin-bottom: 20px;
}
#indicatorDiv {
    width: 500px;
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
#theme-type {
    height: 25px;
    font-size: 13px;
}

JavaScript

FusionCharts.ready(function () {
    var visitChart = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-container',
        width: '450',
        height: '250',
        dataFormat: 'json',
        dataSource: {
            "chart": {
                "caption": "Split of Visitors by Age Group",
                    "subCaption": "Last year",

                    "bgColor": "#ffffff",
                    "showBorder": "0",
                    "use3DLighting": "0",
                    "showShadow": "0",
                    "enableSmartLabels": "0",
                    "startingAngle": "0",
                    "showPercentValues": "1",
                    "showPercentInTooltip": "0",
                    "decimals": "1",
                    "captionFontSize": "13",
                    "subcaptionFontSize": "12",
                    "subcaptionFontBold": "0",
                    "toolTipColor": "#ffffff",
                    "toolTipBorderThickness": "0",
                    "toolTipBgColor": "#000000",
                    "toolTipBgAlpha": "80",
                    "toolTipBorderRadius": "2",
                    "toolTipPadding": "5",
                    "showHoverEffect": "1",
                    "showLegend": "1",
                    "legendBgColor": "#ffffff",
                    "legendBorderAlpha": '0',
                    "legendShadow": '0',
                    "legendItemFontSize": '10',
                    "legendItemFontColor": '#666666',
                    "theme": 'carbon'



            },
                "data": [{
                "label": "Teenage",
                    "value": "1250400"
            }, {
                "label": "Adult",
                    "value": "1463300"
            }, {
                "label": "Mid-age",
                    "value": "1050700"
            }, {
                "label": "Senior",
                    "value": "491000"
            }]
        }
    });

    visitChart.render();


    /**
           ...