Flotr2-my favorite Javascript graphics library

I have studied it for a long time. The ultimate data visualization solution I got is javascript + html, which is the only decent and easy to use.

Gnuplot looks good, but not very nice. Some Python-based graphical tools also have the same problem. Mathematica is too formal in my opinion, so I don't use it very much.

One of the major advantages of javascript-based graphical tools is ease of sharing. By setting Github pages and sharing links, we can easily obtain the latest chart data and even interact with each other.

Graphical tools based on javascript
There are a lot of javascript graphical libraries, from simple to complex and elegant style, are extremely rich.

The most popular ones are d3.js and Raphael. They are quite troublesome to use, but they can achieve visual effects that exceed your imagination.

Raphael is also a web vector library, which looks equally beautiful.

 

Analysis charts in Raphael

 

Bubble chart in Raphael

 

Time chart of clocks in Raphael

D3.js's vision is to help people easily complete data visualization. Unfortunately, it is too complicated.

 

Visual Data of Hacker News article title

 

Use d3.js to plot house purchase information

 

Scatter chart created with d3.js

Flotr2
Although these visualization tools look gorgeous, they are difficult to use. They will waste a lot of time and let people go to the end and find nothing to do. Most of Raphael and d3 functions have been corrected. Sometimes we only want a simple drawing tool.

To visualize my 750 keywords last year, I used Flotr2. In just a few minutes, I can convert the data into functions that Flotr2 can understand by operating javascript, and then Flotr2 converts the data into beautiful charts.

Flotr2's biggest advantage is that it is not over-designed. When you only want a simple chart, it won't let you operate too much.

You only need to set the necessary data and two tags, for example:

Function draw_time (container, data, title ){
Var
Start = new Date (DATA [0]. date). getTime (),
Options,
Graph,
I, x, o;

Options = {
Xaxis :{
Mode: 'time ',
LabelsAngle: 45
},
Selection :{
Mode: 'X'
},
Legend :{
Position: 'se'
},
HtmlText: false,
Title: title
};

// Draw graph with default options, overwriting with passed options
Function drawGraph (opts ){

// Clone the options, so the 'options' variable always keeps intact.
O = Flotr. _. extend (Flotr. _. clone (options), opts || {});

// Return a new graph.
Return Flotr. draw (
Container,
Data,
Options
);
}

Graph = drawGraph ();

Flotr. EventAdapter. observe (container, 'flotr: select', function (area ){
// Draw selected area
Graph = drawGraph ({
Xaxis: {min: area. x1, max: area. x2, mode: 'time', labelsAngle: 45 },
Yaxis: {min: area. y1, max: area. y2}
});
});

// When graph is clicked, draw the graph with default area.
Flotr. EventAdapter. observe (container, 'flotr: click', function () {graph = drawGraph ();});
}
 

Then you can obtain the following chart:

 

Easy to use.

It looks pretty and is simple and easy to use.

Author: log4d