<%
    def getChart1
        chartData = {  
         "chart": {
         "caption": "Split of Sales by Product Category",
         "subCaption": "5 top performing stores  - last month",
         "plotToolText": "<div><b>$label</b><br/>Product : <b>$seriesname</b><br/>Sales : <b>$$value</b></div>",
         "theme": "fusion"
         },
         "categories": [{
           "category": [{
             "label": "Garden Groove harbour"
           }, {
             "label": "Bakersfield Central"
           }, {
             "label": "Los Angeles Topanga"
           }, {
             "label": "Compton-Rancho Dom"
           }, {
             "label": "Daly City Serramonte"
           }]
         }],
         "dataset": [{
           "seriesname": "Non-Food Products",
           "data": [{
             "value": "28800"
           }, {
             "value": "25400"
           }, {
             "value": "21800"
           }, {
             "value": "19500"
           }, {
             "value": "11500"
           }]
         }, {
           "seriesname": "Food Products",
           "data": [{
             "value": "17000"
           }, {
             "value": "19500"
           }, {
             "value": "12500"
           }, {
             "value": "14500"
           }, {
             "value": "17500"
           }]
         }]
     } 

        # Chart rendering 
        chart = Fusioncharts::Chart.new({
                width: "700",
                height: "400",
                type: "overlappedcolumn2d", 
                renderAt: "chart-1",
                dataSource: chartData
            })
    end

    def getChart2
    
        chartData = {  
            "chart": {  
            "caption": "Harry\'s SuperMart",
            "subCaption": "Top 5 stores in last month by revenue",
            "numberPrefix": "$",
            "theme": "fusion"
            },
            "data":[  
            {  
                "label": "Bakersfield Central",
                "value": "880000"
            },
            {  
                "label": "Garden Groove harbour",
                "value": "730000"
            },
            {  
                "label": "Los Angeles Topanga",
                "value": "590000"
            },
            {  
                "label": "Compton-Rancho Dom",
                "value": "520000"
            },
            {  
                "label": "Daly City Serramonte",
                "value": "330000"
            }
            ]
        }

        # Chart rendering 
        chart = Fusioncharts::Chart.new({
                width: "700",
                height: "400",
                type: "column2d", 
                renderAt: "chart-2",
                dataSource: chartData
            })
    end
%>

   <script type="text/javascript">
        
        FusionCharts && FusionCharts.ready(function () {
            var trans = document.getElementById("controllers").getElementsByTagName("input");
            for (var i=0, len=trans.length; i<len; i++) {                
                if (trans[i].type == "radio"){
                    trans[i].onchange = function() {
                        ChangeTheme(this.value);
                    };
                }
            }
        });
        

        function ChangeTheme(theme) {
            for (var k in FusionCharts.items) {
                if (FusionCharts.items.hasOwnProperty(k)) {
                    FusionCharts.items[k].setChartAttribute('theme', theme);
                }
            }
        };

   </script>

    <h3>Chart Theme Sample</h3>
    <div style="width: 100%; display: table;">
        <div style="display: table-row">
            <div id="chart-1" style="width: 40%; display: table-cell;"><%= getChart1.render() %></div>
            <div id="chart-2" style="width: 40%; display: table-cell;"><%= getChart2.render() %></div>
        </div>
    </div>
    <br/>
    <br/>

    <div align="center">
            <label style="padding: 0px 5px !important;">Select a theme for all charts</label>
    </div>
    <br/>
    <div id="controllers" align="center" style="font-family:'Helvetica Neue', Arial; font-size: 14px;">
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="theme-options" checked value="fusion"/> Fusion
        </label>
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="theme-options" value="gammel"/> Gammel
        </label>
        <label style="padding: 0px 5px !important;">
                <input type="radio" name="theme-options" value="zune"/> Zune
        </label>
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="theme-options" value="carbon"/> Carbon
        </label>
        <label style="padding: 0px 5px !important;">
            <input type="radio" name="theme-options" value="ocean"/> Ocean
        </label>        
    </div>

<br/>
<br/>
<a href="index">Go Back</a>
