Is there any HTML5 / Javascript library that can be used to draw dot-line chart？

Question

enter image description here Here is the demo image that I want to draw on a webpage dynamically, is there any javascript or html5 library can help me to do this?

score 3 · Answer 1 · answered Jul 02 '13 at 06:16

3

You should have a look at D3. It's a very popular javascript library for generating fancy diagrams and graphics: https://github.com/mbostock/d3/wiki/Gallery

answered Jul 02 '13 at 06:16

Stephen Crosby

1,157
7
19

score 1 · Answer 2 · edited May 23 '17 at 11:44

I find infoVis or thejit library the best for such a graph. Its a javascript library with which you can render such graphs. All you need to do is feed it your data and it will layout such force directed graph for you. I have been using it for quite some time now and I find its API very well documented,useful and flexible.

check out these two examples.

http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example1.html

http://philogb.github.io/jit/static/v20/Jit/Examples/ForceDirected/example2.html

d3.js and infoVis seems to be the most widely used libraries.

I had similar requirements and I tested about four libraries including d3 and infoVis/JIT.

I was using force-directed layout in both d3 and infoVis. Both of them are quite close but I ended up choosing infoVis/JIT because I had some problems in d3, solutions of which were not easy.

1: When you have a graph with many nodes in d3, the graph will keep moving/animating for quite longer time. I found that it was because d3 graph animates per tick. I found some solutions here and in forums but it was not easy to solve this problem and they did not work for me.

2: Once the graph is rendered, if you try and drag a node, the whole graph would move and animate itself. Whereas my requirement was to be able to drag and position individual nodes independently, keeping the graph as it is, so that user can re-arrange nodes if he/she wants to. I could not find any simple solution for this one in d3.

Both of these problems were solved in infoVis/JIT.

Check these links to know what kind of problems you may encounter if you use d3.js.

How do I control the bounce entry of a Force Directed Graph in D3?

D3: Show network reaching layout, then stop force

score 0 · Answer 3 · answered Jul 02 '13 at 06:15

0

HTML5 provides the canvas element for this. It is now very portable to current browsers. Here's a tutorial: http://www.w3schools.com/html/html5_canvas.asp

answered Jul 02 '13 at 06:15

bitfiddler

2,095
1
12
11

score 0 · Answer 4 · answered Jul 02 '13 at 06:18

0

after some googling i found this tutorial

http://www.html5canvastutorials.com/tutorials/html5-canvas-lines/

answered Jul 02 '13 at 06:18

baliman

588
2
8
27

score 0 · Answer 5 · answered Jul 02 '13 at 06:20

While there is "canvas", I would recommend SVG (Scalable Vector Graphics) - it supports all the primitives to generate said display. One big difference between SVG and Canvas is everything in Canvas is rastered immediately (i.e. drawn to a big area of pixels) while a SVG area is compromised of vectors objects that are rendered as needed.

There are libraries like RaphaelJS which "shim" certain older browsers that only understand VRML. RaphaelJS also makes working with SVG VML a bit easier.

Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.

The graffle example shows a similar layout (shapes connected with "lines") - and is even interactive.

Is there any HTML5 / Javascript library that can be used to draw dot-line chart？

5 Answers5