{% extends "layout.html" %}
 {% block head %}
{{ super() }}
<script type="text/javascript" src="http://d3js.org/d3.v3.min.js"></script>
<style type="text/css">
rect {
        fill:  purple ;
        padding: 7px;
        margin: 2px;
        color: white;
    }
rect:hover
    {
        opacity : 0.5;
    }
</style>
{% endblock %}

{% block content %}
<div class="container">
<h1>History</h1>
<div align="center" id="pie_chart">
    <div class="chart">
 </div>


<script type="text/javascript">
function createGraph(dataset, w, h) {
    var barPadding = 1;

    //Create SVG element
    var svg = d3.select("#pie_chart .chart")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

    svg.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .on("click", clickEvent)
        .attr("x", function(d, i) {
            return i * (w / dataset.length);
        })
        .attr("y", function(d) {
            return h - (d * 4);
        })
        .attr("width", w / dataset.length - barPadding)
        .attr("height", function(d) {
            return d * 4;
        });
}

function clickEvent(d){
        //var op = prompt("Please enter the value", "");
        alert(d);

};



var w = 800;
var h = 100;
var dataset = [ 12, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                    11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];

createGraph(dataset, w, h);


</script>


</div>
{% endblock %}