TimeGraph is used for data like the following:
var data = [
{"name":"Series 1","created_at":"2015-03-30T06:06:48.363Z","data":[
{"created_at":"2015-03-30T06:06:48.439Z","value":1500}
]},
{"name":"Series 2","created_at":"2015-03-29T21:37:00.846Z","data":[
{"created_at":"2015-03-30T03:57:04.024Z","value":73042},
{"created_at":"2015-03-30T01:05:20.670Z","value":73042},
{"created_at":"2015-03-29T21:42:39.941Z","value":73042},
{"created_at":"2015-03-29T21:37:00.858Z","value":1500}
]},
{"name":"Series 3","created_at":"2015-04-02T17:42:42.759Z","data":[
{"created_at":"2015-04-02T17:42:42.812Z","value":1500}
]}
];
Suppose that we have an HTML div element with id graph_canvas, then we can render
a graph with the following javascript commands:
var margin = { top: 10, bottom: 40, left: 65, right: 20 };
var width = 700;
var height = 400;
var graph = new TimeGraph(margin, width, height, '#graph_canvas');
graph.loadGraph(data);
Once a data set has been loaded it is also possible to reload another data set:
graph.reloadGraph(other_data);
Note that d3 and jquery.tipsy are required.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent