3D Bar Chart Example With Animation Effect: jsDraw2DX

This example demonstrates how you can easily use the library to draw 3D effect and animation. The example also shows the effectiveness of the object oriented design.

Source Code:

//Define graphics
var graphicsDiv=document.getElementById("graphics");
var gr = new jxGraphics(graphicsDiv);

//Define pen and drawing brushes
var penBlue = new jxPen(new jxColor('#77B7E1'), 1);

var brushBlue = new jxBrush(new jxColor('#FFFFFF'));
brushBlue.fillType = 'lin-grad';
brushBlue.angle = 65;
brushBlue.color2 = new jxColor('#2880B8');

var brushText = new jxBrush(new jxColor('#054B78'));

var brushRight = new jxBrush(new jxColor('#2880B8'));
brushRight.color2 = new jxColor('#0C5D91');
brushRight.fillType = 'lin-grad';
brushRight.angle = 90;

var shadowBrush = new jxBrush(new jxColor('#A0A0A0'));
shadowBrush.fillType = 'lin-grad';

//Define text font
var font = new jxFont();
font.size = 12;
font.weight = 'bold';

//Create Bar3D objects
var b1 = new Bar3D(50, 300);
var b2 = new Bar3D(120, 170);
var b3 = new Bar3D(190, 200);
var b4 = new Bar3D(260, 150);
var b5 = new Bar3D(330, 70);
var b6 = new Bar3D(400, 250);

//Draw and animate Bar3D objects
b1.animate();
b2.animate();
b3.animate();
b4.animate();
b5.animate();
b6.animate();

//Define Bar3D class to hold 3D bar information and drawing methods
function Bar3D(x, y) {
    //Define drawing objects like polygons, font, texts etc.
    var rectFront = new jxRect(), polyRight = new jxPolygon(), polyTop = new jxPolygon(), polyShadow = new jxPolygon();
    var xText = new jxText(), yText = new jxText();
    
    var step, ys, intId;
    step = y / 30;
    ys = step;
    
    //Assign static(not to chnage while animating) properties to the drawing objects
    rectFront.pen = penBlue;
    rectFront.brush = brushBlue;
    polyRight.pen = penBlue;
    polyRight.brush = brushRight;
    polyTop.pen = penBlue;
    polyTop.brush = brushBlue;
    polyShadow.brush = shadowBrush;

    yText.text = y;
    yText.font = font;
    yText.brush = brushText;

    xText.text = (x - 50) / 70 + 2006;
    xText.font = font;
    xText.brush = brushText;
    xText.point = new jxPoint(70 + x, 330);
    xText.angle = 270;

    //Method to draw 3D bar
    this.drawStep = function() {
        //Assign dynamic(to be changed for animation) properties to the animation
        rectFront.point = new jxPoint(50 + x, 350 - ys);
        rectFront.width = 30;
        rectFront.height = ys;

        polyRight.points = [new jxPoint(80 + x, 350 - ys), new jxPoint(100 + x, 330 - ys), new jxPoint(100 + x, 330), new jxPoint(80 + x, 350)];
        polyTop.points = [new jxPoint(50 + x, 350 - ys), new jxPoint(70 + x, 330 - ys), new jxPoint(100 + x, 330 - ys), new jxPoint(80 + x, 350 - ys)];
        polyShadow.points = [new jxPoint(50 + x, 350), new jxPoint(70 + x + ys / 3, 330 - ys / 5), new jxPoint(100 + x + ys / 3, 330 - ys / 5), new jxPoint(80 + x, 350)];
        yText.point = new jxPoint(60 + x, 325 - ys);

        polyShadow.draw(gr);
        rectFront.draw(gr);
        polyRight.draw(gr);
        polyTop.draw(gr);
        yText.draw(gr);

        ys += step;
        if (ys > y) {
            clearInterval(intId);
            xText.draw(gr);
        }
    }

    //Call bar drawing method at intervals to have animation effect
    this.animate = function() {
        intId = setInterval(this.drawStep, 50);
    }
}