topical media & game development
mobile-graphic-easel-examples-BarGraph.htm / htm
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Drawing an animated vector bar graph.</title>
<link href="mobile-graphic-easel-examples-assets-demoStyles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-EventDispatcher.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-UID.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-geom-Matrix2D.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-DisplayObject.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Container.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Stage.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-events-MouseEvent.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Shape.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Graphics.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-utils-Ticker.js"></script>
<script type="text/javascript" src="mobile-graphic-easel-src-easeljs-display-Text.js"></script>
<!-- We also provide hosted minified versions of all CreateJS libraries.
http://code.createjs.com -->
<script>
var canvas;
var stage;
var barPadding = 7;
var barHeight;
var maxValue = 50;
var count;
var barValues = [];
var bars = [];
function init() {
if (window.top != window) {
document.getElementById("header").style.display = "none";
}
// create a new stage and point it at our canvas:
canvas = document.getElementById("testCanvas");
stage = new createjs.Stage(canvas);
// generate some random data (between 4 and 10, the |0 floors (for positive numbers))
var numBars = Math.random()*6+4|0;
var max = 0;
for (var i=0; i<numBars; i++) {
var val = Math.random()*maxValue+1|0;
if (val > max) { max = val; }
barValues.push(val);
}
// calculate the bar width and height based on number of bars and width of canvas:
var barWidth = (canvas.width-150-(numBars-1)*barPadding)/numBars;
barHeight = canvas.height-150;
// create a shape to draw the background into:
var bg = new createjs.Shape();
stage.addChild(bg);
// draw the "shelf" at the bottom of the graph:
// note how the drawing instructions can be chained together.
bg.graphics.beginStroke("#444")
.moveTo(40, canvas.height-69.5)
.lineTo(canvas.width-70, canvas.height-69.5)
.endStroke()
.beginFill("#222")
.moveTo(canvas.width-70, canvas.height-70)
.lineTo(canvas.width-60, canvas.height-80)
.lineTo(50, canvas.height-80)
.lineTo(40, canvas.height-70)
.closePath();
// draw the horizontal lines in the background:
for (i=0; i<9; i++) {
bg.graphics.beginStroke(i%2 ? "#333" : "#444")
.moveTo(50,(canvas.height-80-i/8*barHeight|0)+0.5)
.lineTo(canvas.width-60,(canvas.height-80-i/8*barHeight|0)+0.5);
}
// add the graph title:
label = new createjs.Text("Bar Graph Example", "bold 30px Arial", "#FFF");
label.textAlign = "center";
label.x = canvas.width/2;
label.y = 20;
stage.addChild(label);
// draw the bars:
for (i=0; i<numBars; i++) {
// each bar is assembled in it's own Container, to make them easier to work with:
var bar = new createjs.Container();
// this will determine the color of each bar, save as a property of the bar for use in drawBar:
var hue = bar.hue = i/numBars*360;
// draw the front panel of the bar, this will be scaled to the right size in drawBar:
var front = new createjs.Shape();
front.graphics.beginLinearGradientFill(
[createjs.Graphics.getHSL(hue,100,60,0.9),
createjs.Graphics.getHSL(hue,100,20,0.75)],
[0,1],
0,
-100,
barWidth,0).drawRect(0,-100,barWidth+1,
100);
// draw the top of the bar, this will be positioned vertically in drawBar:
var top = new createjs.Shape();
top.graphics.beginFill(createjs.Graphics.getHSL(hue,100,70,0.9))
.moveTo(10,-10)
.lineTo(10+barWidth,-10)
.lineTo(barWidth,0)
.lineTo(0,0)
.closePath();
// if this has the max value, we can draw the star into the top:
if (barValues[i] == max) {
top.graphics.beginFill("rgba(0,0,0,0.45)").drawPolyStar(barWidth/2, 31, 7, 5, 0.6, -90).closePath();
}
// prepare the side of the bar, this will be drawn dynamically in drawBar:
var right = new createjs.Shape();
right.x = barWidth-0.5;
// create the label at the bottom of the bar:
var label = new createjs.Text("Label "+i, "16px Arial", "#FFF");
label.textAlign = "center";
label.x = barWidth/2;
label.maxWidth = barWidth;
label.y = 12;
label.alpha = 0.5;
// draw the tab that is placed under the label:
var tab = new createjs.Shape();
tab.graphics.beginFill(createjs.Graphics.getHSL(hue,100,20))
.drawRoundRectComplex(0,1,barWidth,38,0,0,10,10);
// create the value label that will be populated and positioned by drawBar:
var value = new createjs.Text("foo","bold 14px Arial","#000");
value.textAlign = "center";
value.x = barWidth/2;
value.alpha = 0.45;
// add all of the elements to the bar Container:
bar.addChild(right,front,top,value,tab,label);
// position the bar, and add it to the stage:
bar.x = i*(barWidth+barPadding)+60;
bar.y = canvas.height-70;
stage.addChild(bar);
bars.push(bar);
// draw the bar with an initial value of 0:
drawBar(bar, 0);
}
// set up the count for animation based on the number of bars:
count = numBars*10;
// start the tick and point it at the window so we can do some work before updating the stage:
createjs.Ticker.useRAF = true;
// if we use requestAnimationFrame, we should use a framerate that is a factor of 60:
createjs.Ticker.setFPS(30);
createjs.Ticker.addEventListener("tick", tick);
}
function tick(event) {
// if we are on the last frame of animation then remove the tick listener:
if (--count == 1){ createjs.Ticker.removeEventListener("tick", tick); }
// animate the bars in one at a time:
var c = bars.length*10-count;
var index = c/10|0;
var bar = bars[index];
drawBar(bar, (c%10+1)/10*barValues[index]);
// update the stage:
stage.update(event);
}
function drawBar(bar, value) {
// calculate bar height:
var h = value/maxValue*barHeight;
// update the value label:
var val = bar.getChildAt(3);
val.text = value|0;
val.visible = (h>28);
val.y = -h+10;
// scale the front panel, and position the top:
bar.getChildAt(1).scaleY = h/100;
bar.getChildAt(2).y = -h+0.5; // the 0.5 eliminates gaps from numerical precision issues.
// redraw the side bar (we can't just scale it because of the angles):
var right = bar.getChildAt(0);
right.graphics.clear()
.beginFill(createjs.Graphics.getHSL(bar.hue,60,15,0.7))
.moveTo(0,0)
.lineTo(0,-h)
.lineTo(10,-h-10)
.lineTo(10,-10)
.closePath();
}
</script>
</head>
<body onload="init();">
<header id="header" class="EaselJS">
<h1><span class="text-product">Easel<strong>JS</strong></span> Bar Graph Example</h1>
<p>Reload for new random data. Example of using the <strong>Graphics</strong>, <strong>Shape</strong>, <strong>Text</strong> and <strong>Container</strong> classes to draw a simple vector bar graph.
</p>
</header>
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>
</div>
</body>
</html>
(C) Æliens
04/09/2009
You may not copy or print any of this material without explicit permission of the author or the publisher.
In case of other copyright issues, contact the author.
