javascript - xScale and yScale in Canvas -
i have question regarding xscale , yscale when drawing column chart canvas, here code:
<html> <head> <title>bar graph</title> <style>#canvas{background: #ffffff; box-shadow:5px 5px 5px #ccc; border:5px solid #eee; margin-bottom:10px;}</style> <script type="text/javascript"> var canvas ; var context ; var val_max; var val_min; var sections; var xscale; var yscale; var y; // values of each item on graph var itemname = [ "red", "blue", "green"]; var itemvalue = [ 12144,12179, 12144 ]; function init() { // intialize values each variables sections = 3; val_max = 13000; var stepsize = 1000; var columnsize = 50; var rowsize = 60; var margin = 10; var header = "counts" // canvas = document.getelementbyid("canvas"); context = canvas.getcontext("2d"); context.fillstyle = "#000000;" yscale = (canvas.height - columnsize - margin)/ 13000 ; xscale = (canvas.width - rowsize) / (sections+1); context.strokestyle="#000;"; // background black lines context.beginpath(); // column names context.font = "19 pt arial;" context.filltext(header, 0, columnsize-margin*2); // draw lines in background context.font = "16 pt helvetica" var count = 0; (scale=val_max;scale>=0;scale = scale - stepsize) { y = columnsize + (yscale * count * stepsize); context.filltext(scale, margin, y); context.moveto(rowsize,y) context.lineto(canvas.width,y) count++; } context.stroke(); // print names of each data entry context.font = "20 pt verdana"; context.textbaseline="bottom"; function computeheight(value) { y = canvas.height - value * yscale ; } (i=0;i<4;i++) { computeheight(itemvalue[i]); context.filltext(itemname[i], xscale * (i+1), y-margin) ; } // shadow graph's bar lines color , offset context.fillstyle="#9933ff;"; context.shadowcolor = 'rgba(128,128,128, 0.5)'; //shadow offset along x , y direction context.shadowoffsetx = 9; context.shadowoffsety = 3; // translate bottom of graph in order match data context.translate(0,canvas.height - margin); context.scale(xscale, -1*yscale); // draw each graph bars (i=0;i<4;i++) { context.fillrect(i+1, 0, 0.3, itemvalue[i]); } } </script> </head> <body onload="init()"> <div> <h2>pixel value colour</h2> <canvas id="canvas" height="400" width="650"> </canvas> </div> </body> </html> i not sure xscale , yscale mean in column chart, tried play them make change see graph like, still did not mean, please advice, thank you.
the xscale & yscale variables used in 2 ways.
first purpose of xscale & yscale:
they used fit chart existing space available in canvas.
for example if change canvas width 450 see chart automatically narrows bars & spacing fit lesser horizontal space. accomplished calculations used in xscale & yscale.
// bars & spacing of chart narrower // because of xscale & yscale calculations <canvas id="canvas" height="400" width="650"> second purpose of xscale & yscale:
charts have y=0 coordinate @ bottom of chart.
in html canvas, however, y=0 coordinate @ top of canvas
this line flips canvas's normail y=0 top bottom:
context.scale(xscale, -1*yscale); illustrations:
here chart when canvas 400 x 650:
<canvas id="canvas" width=500 height=300></canvas> 
here chart when canvas 500 x 300:
no code changes have been made other resize canvas element
<canvas id="canvas" width=500 height=300></canvas> 
Comments
Post a Comment