FusionCharts API-Methods: setChartAttribute

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 setChartAttribute() method -->
<div id="indicatorDiv">Method Name: <strong>setChartAttribute()</strong>
    <p>Updates a chart's attributes with a new attribute-value pair, thus updating the chart's data definition root (the chart object in the JSON data). This function is useful when a chart's configuration has to be updated after it has been rendered once. To read more about this method, click <a href="https://www.fusioncharts.com/dev/api/fusioncharts/fusioncharts-methods.html#setChartAttribute" 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.</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="chart-container">FusionCharts will render here</div>
    </div>
</div>

CSS

#label {
    font-family:'Arial', 'Helvetica';
    font-size: 13px;
}
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 {
    font-size: 14px;
    padding: 10px;
    margin: 10px 0;
}

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": "14",
                    "subcaptionFontSize": "14",
                    "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();


    /**
           ...