Fetching contributors…
Cannot retrieve contributors at this time
206 lines (169 sloc) 6.13 KB
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>EaselJS Example: Drawing an animated vector bar graph.</title>
<link href="assets/demoStyles.css" rel="stylesheet" type="text/css" />
<script src="http://code.createjs.com/easeljs-0.4.1.min.js"></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 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; }
// 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 Shape();
// draw the "shelf" at the bottom of the graph:
// note how the drawing instructions can be chained together.
.moveTo(40, canvas.height-69.5)
.lineTo(canvas.width-70, canvas.height-69.5)
.moveTo(canvas.width-70, canvas.height-70)
.lineTo(canvas.width-60, canvas.height-80)
.lineTo(50, canvas.height-80)
.lineTo(40, canvas.height-70)
// draw the horizontal lines in the background:
for (i=0; i<9; i++) {
bg.graphics.beginStroke(i%2 ? "#333" : "#444")
// add the graph title:
label = new Text("Bar Graph Example", "bold 30px Arial", "#FFF");
label.textAlign = "center";
label.x = canvas.width/2;
label.y = 50;
// 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 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 Shape();
// draw the top of the bar, this will be positioned vertically in drawBar:
var top = new Shape();
// 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 Shape();
right.x = barWidth-0.5;
// create the label at the bottom of the bar:
var label = new Text("Label "+i, "16px Arial", "#FFF");
label.textAlign = "center";
label.x = barWidth/2;
label.maxWidth = barWidth;
label.y = 26;
label.alpha = 0.5;
// draw the tab that is placed under the label:
var tab = new Shape();
// create the value label that will be populated and positioned by drawBar:
var value = new 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:
// position the bar, and add it to the stage:
bar.x = i*(barWidth+barPadding)+60;
bar.y = canvas.height-70;
// 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:
Ticker.setInterval(50); // 1000 / 50 ms = 20 fps (You could also call Ticker.setFPS(20))
function tick() {
// if we are on the last frame of animation then remove the tick listener:
if (--count == 1){ Ticker.removeListener(window); }
// 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:
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+22;
// 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);
<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.
<div class="canvasHolder">
<canvas id="testCanvas" width="960" height="400"></canvas>