FusionCharts Based Example - Shadow Comparison

Created using FusionCharts Suite XT - www.fusioncharts.com

by WizKid81

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/fusioncharts.maps.js"></script>
<script src="http://static.fusioncharts.com/code/latest/maps/fusioncharts.usa.js"></script>
<script src="http://static.fusioncharts.com/code/latest/themes/fusioncharts.theme.fint.js"></script>
<!-- Data-driven US Map, showing sales by state. Interactive legend slider allows change of value range. -->
<div id="chart-container">FusionCharts will render here</div>
<div id='controllers'>
    <label>
        <input type="radio" name="theme-options" id='shadow-chckbx' value="shadow">Shadow</label>
    <label>
        <input type="radio" name="theme-options" value="noshadow">No Shadow</label>
    <label>
        <input type="button" value="Apply Theme" id="set-theme">
    </label>
</div>

CSS

#controllers {
    font-family:'Helvetica Neue', Arial;
    font-size: 14px;
    margin-left: 90px;
}
#controllers label {
    padding: 0 5px !important;
}

JavaScript

FusionCharts.ready(function () {
    FusionCharts.register('theme', {
        name: 'shadow',
        theme: {
            base: {
                chart: {
                    paletteColors: '#FF4444, #FFBB33, #99CC00, #33B5E5, #AA66CC',
                    baseFontColor: '#36474D',
                    baseFont: 'Helvetica Neue,Arial',
                    captionFontSize: '14',
                    subcaptionFontSize: '14',
                    subcaptionFontBold: '0',
                    showBorder: '0',
                    bgColor: '#ffffff',
                    showShadow: '1',
                    canvasBgColor: '#ffffff',
                    canvasBorderAlpha: '0',
                    useplotgradientcolor: '0',
                    useRoundEdges: '0',
                    showPlotBorder: '0',
                    showAlternateHGridColor: '0',
                    showAlternateVGridColor: '0',
                    toolTipBorderThickness: '0',
                    toolTipBgColor: '#99CC00',
                    toolTipBgAlpha: '90',
                    toolTipBorderRadius: '2',
                    toolTipPadding: '5',
                    legendBgAlpha: '0',
                    legendBorderAlpha: '0',
                    legendShadow: '0',
                    legendItemFontSize: '10',
                    divlineAlpha: '100',
                    divlineColor: '#36474D',
                    divlineThickness: '1',
                    divLineIsDashed: '1',
                    divLineDashLen: '1',
                    divLineGapLen: '1',
                    showHoverEffect: '1',
                    valueFontSize: '11',
                    showXAxisLine: '1',
                    xAxisLineThickness: '1',
                    xAxisLineColor: '#36474D'
                }
            },
            mscolumn2d: {
                chart: {
                    valueFontColor: '#FFFFFF', //overwrite base value
                    valueBgColor: '#000000',
                    valueBgAlpha:...