Geek Answers Handbook

A simple open source javascript library for creating a (laid out) line chart?

I need a small javascript library to create a complex line chart (a bit like what is used in financial charts). The X axis will be the date, and the Y axis will be the usual float value.

There will be two sections of the graph:

  • An upper graph that is a linear graph. I want to be able to specify the color of the line segment (i.e. the connection of two dated points)

  • The bottom is a rectangle / bar that represents the value. Once again I want to indicate the color of the panel for a specific date.

It would be great if the library used JQuery (since I used jQuery in the past), but even a simple old JS code library would be equally useful.

+4
source share
4 answers

I recommend the Google / Chart Chart API Tools ( examples ) and the Google Visualization API ( examples ).

The first of them is less powerful than the last, but also lower-tech, so it is possibly easier to use (and more portable on different platforms). Basic Chart API creates static images for you).

But you can also use:

Or even use a higher level library like ExtJS ( examples ).

+5
source

UPDATE . Here is a recent and very impressive charting library created by Baidu people:
http://ecomfe.imtqy.com/echarts/index-en.html
And this is open source.

Another free option is Google visualisations .

They may be redundant for your needs. But you can provide users with different types of graphics, since they all have the same data set structure.

Well, you do not accept them, they are in the Google infrastructure and save you. Bad, you do not accept them ... It is not open source, you cannot crack them if you want.

We use them in our web application and are very pleased with it.
In addition, they do not work with Android, since many use SVG / VML, which are disabled by default.

+2
source

Use raphaeljs and the free graphics library. The reference to the mapping library contains a few examples that will show you what you can do - just browse the source to see how easy it is.

+1
source

More articles:


All Articles