Wednesday, November 18, 2009

3D Line chart with JavaScript

For a recent project, I was looking for a free 3-dimensional line chart library in JavaScript. There are a lot of server side charting applications both free and commercial. I have been using Google Charts API for quite a long time. But I had a very unique requirements that my web application must be highly interactive. So user should be able to click every single line on the chart and show/hide certain information.

First thing comes in my mind to program some JavaScript code for drawing operations. So I created a simple drawing library. But later I noticed, jsdraw2d does much better job. It is open sourced and good tested. So I have decided to use it instead.

I always consider OO important for any of my projects. In my web applications, I frequently use some wrapper library around JavaScript's prototype-based programming model. I like Mootools over Dojo, jQuery or YUI due to its pure object orientation appeal. The motto of Mootools states in its web site — ”MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows to write powerful, flexible, and cross-browser code with its elegant, well-documented, and coherent API”. Furthermore, it provides a large set of plug-ins for the development of many GUI components such as Progress Bar, Drag-Drop, Slider, Tooltip etc.

The library with all dependent files can be downloaded from the project web site at here. You can also browse the source at google code. Good luck with 3d-charting in JavaScript.

Show Example

1 comment:

  1. Nice piece of code but lacks example code. The html file in the source code demonstarates only rotation but no scaling. Would be nice to have a detailed example.

    ReplyDelete