What is the best approach to producing graphical charts in a browser? - javascript

I've started a new open source project aimed at providing a quality project management experience. To do this, I need access to a set of chart tools (Flash is off the table), and very specifically one that includes a Gantt chart. I've done my homework and shopped around the web and I've more or less come to the conclusion that what I want doesn't exist, at least not for free. So chances are I'm going to have to write this from scratch.
If I was going to create a Gantt chart with which people could interact with (which I'm assuming means having excellent DOM support), then what technology would I use? Should I go with SVG? Or HTML5 Canvas? Something else? Your suggestions are much appreciated.
Also, a requirement would be that whatever library I use needs to be actively supported in the community (i.e. no dead projects).

I would not think there would be many free options as this is a niche-need.
JS Option:
http://www.jsgantt.com/
http://code.google.com/p/flot/
Promising Perl modules:
http://cpansearch.perl.org/src/DARNOLD/DBD-Chart-0.82/dbdchart.html
http://search.cpan.org/~awestholm/Project-Gantt-1.03/Gantt.pm
Update:
There's been amazing advancements in terms of interactive/web charts in the past few years. Shortly before your question was asked, D3.js was created, which has become a generally accepted library, which uses SVG to implement visualizations. Here's a basic example and a more advanced implementation using D3. Note; Gantt charting is still in its infancy; D3 will most likely revisit it in the future.
The argument of Canvas vs SVG is one that has been considered many times. You should read this article by Microsoft; How to Choose Between Canvas and SVG for your Site. Basically, if you have many elements you have to display, Canvas will perform much better. If accessibility is a priority, SVG is better.
In terms of working with Canvas vs SVG, canvas feels more fluid and it is certainly more capable with WebGL, but SVG is more transportable. They both have their merits.

If you're going to make your own, I'd recommend the SVG library Raphaël, which allows you to draw things using SVG fairly easily. It's also simple to make mouse event handlers and other things, which you could use to make it interactive.
I haven't had much experience creating interactive graphics with canvas, but my instinct is that it would be hard to handle mouse events since you don't have "elements" to add event listeners to.

Related

jsPlumb and Fabric.js integration

I have built a web application in fabric.js where the user adds and draws several graphical elements over an originally blank canvas. My application has arrived to the point in which some of these graphical elements need to be interactively connected (i.e. connected by the user using the mouse). I am trying to design the best way to include these connections in the canvas since, due to aesthetic considerations, drawing lines with fabric might not be best solution for this.
I have run into jsPlumb and found several examples of connections between div and other dom elements. My specific question is: Is it possible to use the jsPlumb functionalities within the objects that fabric.js draws in the canvas. If so, does anyone have an example of this? In case this integration between jsPlumb and fabric.js is not possible, what would be the best way to achieve this?
Many thanks to all in advance.
IMHO, this integration doesn't make much sense.
Everything that fabricjs provides can be done using `jsPlumb', of course animation would require a bit of coding, but it's fairly possible.
Another reason is fabricjs deals with canvas, whereas jsPlumb deals with DOM elements, their integration would be more pain, than coding the actual requirement entirely in jsPlumb.

Javascript big-data visualisation

I'm about to develop a UI for medical research application. I need to make a time series line graph. Main issue is the amount of data:
5,000 points per graph, with a few of them displayed simultaneity. I’m expecting 50,000 points processed all together.
The question is what presentation library?
The main features I’m looking for are: Handles huge data sets, Zoom, annotations, live update.
I’m already looking into http://dygraphs.com/ and http://meteorcharts.com/
I wouldn't want any library that renders the data as DOM elements, or that uses SVG (from performance perspective)
Well, I think I'll give everyone my own answer to my question:
Dygraphs (http://dygraphs.com/) seems to be on the spot. The documentation, although a lot of apparent efforts, leaves a lot to be desired. But from performance, features and flexibility, it's the best I've seen. At least for my current project needs.
Way to go, Dygraphs!
Have you checked out D3? I'm using that for a lot of graph visualization. It looks like this example renders to svg.
My stuff renders to a SVG for force graph visualizations too, but it looks like D3 might be able to use either a canvas or SVG, but I'm not positive about what all can be rendered to which. Honestly, I'd give D3 a try even with SVG, it might be fast enough. I remember reading something about someone simulating thousands of particles using D3's force graph visualizations without issues. It's SUPER easy to get your data into the right format for it to use.
Good luck!
I am developing a very similar application.
I am currently using Flot for the chart rendering. It handles annotations and zoom, take a look at their plugin library.
I recommend this downsampling plugin which will speed up graph rendering. Rendering 5000 points on your graph is useless: you have less vertical pixels on your screen than that! so this library will only render those that actually have a visual importance.
This only gives you the graph. You may want some kind of dashboard to present all that... I am currently looking at Grafana, which is used for a totally different purpose but makes awesome dashboards. It may be possible to "rip out" their dashboarding features (it uses Flot as well).
Another option is Hightcharts, but that's not free.
Check raphael js Library
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.

How to make 3D animation with Canvas

I have background on Canvas 2D context, but i want to perform a 3D animation like this one, is Three.js library the best choice to do such animation? Can you point me to some useful tutorial or documentation that may help. Thanx in advance.
That's one of the most common choices.
As WebGL enables OpenGL without the need for libraries, you might also do it with just Vanilla JS but that would be harder as WebGL doens't offer much more refinement over the raw and crude OpenGL.
Apart three.js, you could also try GLGE or PhiloGL but as Three.js is the most popular I would recommend to go for it if you have no specific requirement.
Looks like the demo you linked to is using a canvas library called Clay.js. Not one that I've personally heard about until now. For 3d in canvas the most popular one I know of it Three.js as you already mentioned. It has the benefit of supporting webGL as well (browser based openGL variant).
Three.js has limited documentation and some examples but outside of some books you may buy there isn't a lot of hand holding. You basically need to dive in and start coding. Here are some online resources that may help you get started (not necessarily all focused on THREE.js):
http://aerotwist.com/tutorials/getting-started-with-three-js/
http://learningthreejs.com/
http://learningwebgl.com/blog/
To make it easier to work with THREE.js Jérôme Etienne created a project called tQuery which you can think of kinda like jQuery. A wrapper to make it easier to get your hands dirty. Here's a video where he shows how to create a webGL game in 10 minutes.

2D interactive animation engine in HTML5

I'm looking for a simple JavaScript library or framework to create interactive 2D animations in the browser. (Excuse the buzzword in the title, but I'm not set on any particular rendering technology like Canvas or SVG.)
This should make it simple to draw and animate arbitrary (though not very sophisticated) shapes on a canvas screen and allow users to select and move these shapes as objects (kind of like a very basic RTS game engine).
Ideally, the following features should be supported (directly or indirectly; I'd implement it myself if necessary):
panning
zooming
fisheye partial zooming
box selection (selecting multiple objects by drawing a box around them)
Not being familiar with such things yet, I find it tricky to research what's out there (e.g. regarding search terms). Also, I have no illusions about some magical package that doesn't require any effort on my part - indeed, I'd prefer simple and readable libraries so I can learn about the basics by reading the source.
If you like simple libraries, perhaps take a look at GameJS. It claims to be "a thin library on top of the HTML5 canvas element." It's a port of PyGame to JavaScript, which in my experience is a fairly nice abstraction layer that at the same time doesn't overdo it.
If that doesn't cut it, have a look at this list of JS game (and animation) engines.
You probably did make a search and found dozens of js game engines. I will just narrow it down for you. It is impossible to just spit out one single js game engine. Also, you might find some to be more appropriate than others based on the type of game you want to make. So here they are
LimeJS
Impact
Crafty

Computational Geometry Javascript

I´m thinking on coding a couple of examples for my Computational Geometry class (2D), I want to use html5 and javascript.
Can anyone recommend a javascript library or does html5 has everything I need to start?
I will be mostly working with points and lines, but it would be nice to have something that draws a Cartesian plane as a reference and maybe some data structures ready to use.
JSXGraph
Specifically focuses on dynamic geometry and functions visualization. Comes from the academia. Authors – a German university.
Uses SVG (with fallback to Canvas and VML for IE). Works on iOS and Android.
The API is a very abstracted SVG API. It operates on figures and groups of figures, tangents, hyperbolae &c.
Has nice documentation.
SVG is not considered part of HTML5, but it's worth looking at. It's flexible, ubiquitous and, I think, vector graphics is a better option for geometry than bitmaps (Canvas).
I think either raphael should be useful:
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
http://raphaeljs.com/
or processing.js
Processing.js is the sister project of the popular Processing visual programming language, designed for the web. Processing.js makes your data visualizations, digital art, interactive animations, educational graphs, video games, etc. work using web standards and without any plug-ins.
http://processingjs.org/
Your best bet is to use <canvas> and explore the API. It should have the basic primitives you need.
I can recommend EaselJS because I used it many times to quickly create dynamic drawings, such as triangles, circles, arcs etc. I was even writing a simple draw-with-text tool for students, called Geodrafter.
However, if you want to add e. g. sliders and have a dynamic environment (easily dragging points, for instance), then JSXGraph is a better choice since they provide a variety of components for this. The gallery in their wiki give some good ideas.
And as said above: JSXGraph is based on vector graphics, which will always produce exact graphics. EaselJS is based on canvas and can lead to blurry lines.

Categories