Embed Size (px)
DESCRIPTION
HTML5 Assignment
Citation preview
<!Doctype html!> <!-- ----------------------------------------------------------------- Written by ABHIJEET on 10-MAR-2015 DAY-2 Assignment-2: Generating a simple Bar Graph from external JSON Array ----------------------------------------------------------------- --> <html> <head> <title>Canvas Demo</title> </head> <body style="width:720px;margin-left: auto;margin-right: auto;"> <h2>Canvas Demo</h2> <canvas id="can1" width="600" height="400" style="border:5px dashed brown;background-color: #fff590" > </canvas> <button onclick="drawgraph()" style="float: right;">GET GRAPH</button> <p/> <script> var Sales = [ { yr: 2011, sales: 10000 }, { yr: 2012, sales: 12000 }, { yr: 2013, sales: 13000 }, { yr: 2014, sales: 13200 }, { yr: 2015, sales: 13500 } ]; function drawgraph() { var can = document.getElementById("can1"); var ctx = can.getContext("2d"); ctx.font = "30px Arial"; ctx.fillStyle = "navy"; var x1 = 50; var y1; var x2 = 40; var y2 = 400; var cntr = 0; var clrCntr = 0; var colors = ['darkgreen', 'darkorange', 'blue','olive','purple'] for (var i = 0; i < Sales.length; i++) { var object = Sales[i]; for (var property in object) { //alert('item ' + i + ': ' + property + '=++' + object[property]); if (cntr % 2 == 1) { ctx.lineWidth = 2; //alert(object[property]); y1 = (15000 - Number(object[property])) / 50; y2 = 300 - y1; //alert(x1 + "--" + y1 + "--" + x2 + "--" + y2 + "--"); ctx.fillStyle = colors[clrCntr]; ctx.fillRect(x1, y1, x2, y2); //------------------------ mark the values------------------- ctx.font = "14px verdana"; ctx.fillText((object[property]).toString(), x1, y1 - 5);
//------------------------ increment x1 for new values -------------- x1 = x1 + 100; clrCntr++; } else { //---------------when we receive keys ------------- ctx.font = "18px Arial"; ctx.fillStyle = "navy"; //alert(object[property]); ctx.fillText((object[property]).toString(), x1, 325); } cntr++; } } } </script> </body> </html>
