<!DOCTYPE html>
<html>
<head>
	<title>FC-python wrapper</title>

<!-- If you are using downloaded FusionCharts libraries, uncomment the below code   -->
<!--
	{% load static %} 
   	<script type="text/javascript" src="{% static "fusioncharts/fusioncharts.js" %}"></script>
   	<script type="text/javascript" src="{% static "fusioncharts/themes/fusioncharts.theme.fusion.js" %}"></script>	
-->

   <script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/fusioncharts.js"></script>
   <script type="text/javascript" src="//cdn.fusioncharts.com/fusioncharts/latest/themes/fusioncharts.theme.fusion.js"></script>

</head>
<body style="font-family:'Helvetica Neue', Arial; font-size: 16px;">
	<h3>{{ chartTitle|safe }}</h3>
        <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() {
                        changeChartType(this.value);
                    };
                }
            }
        });
        
        function changeChartType(chartType) {
            for (var k in FusionCharts.items) {
                if (FusionCharts.items.hasOwnProperty(k)) {
                    FusionCharts.items[k].chartType(chartType);
                }
            }
        };
    </script>
    <div align="center">
    <label style="padding: 0px 5px !important;">Select The Chart Type</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="div-size" checked value="column2d"/>Column 2D 
    </label>
    <label style="padding: 0px 5px !important;">
        <input type="radio" name="div-size" value="pie3d"/>Pie 3D
    </label>
    <label style="padding: 0px 5px !important;">
            <input type="radio" name="div-size" value="bar2d"/>Bar 2D
    </label>
    </div>
    <br/>
    <br/>
    <br/>
    <div style="width: 100%; display: block;" align="center">
    <div id="chartContainer">{{ output|safe }}</div>
    </div>
    <br/>
    <br/>
    <a href="/">Go Back</a>
</body>
</html>