<!doctype html> <html>

<head>
        <title>Bar Chart</title>
        <script src="../Chart.js"></script>
</head>
<body>
        <div style="width: 50%">
                <canvas id="canvas" height="450" width="600"></canvas>
        </div>

<script>
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};

var barChartData = {
        labels : ["January","February","March","April","May","June","July"],
        datasets : [
                {
                        fillColor : "rgba(220,220,220,0.5)",
                        strokeColor : "rgba(220,220,220,0.8)",
                        highlightFill: "rgba(220,220,220,0.75)",
                        highlightStroke: "rgba(220,220,220,1)",
                        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                },
                {
                        fillColor : "rgba(151,187,205,0.5)",
                        strokeColor : "rgba(151,187,205,0.8)",
                        highlightFill : "rgba(151,187,205,0.75)",
                        highlightStroke : "rgba(151,187,205,1)",
                        data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
                }
        ]

}
window.onload = function(){
        var ctx = document.getElementById("canvas").getContext("2d");
        window.myBar = new Chart(ctx).Bar(barChartData, {
                responsive : true
        });
}

</script>
</body>

</html>