This is a javascript library the generates graphs from an array of values and converts the graph into an image. This image can be generated in one of two ways:
- The graph is converted to a base64 string that can be displayed on a html page in an
<img />tag in the following format<img src="data:image/png;base64,..." />. This is done in the browser. - The graph can be saved to an image file that can loaded from disk and rendered as a normal image in html. This is done on the server side via Node JS.
The code was designed to allow a developer to try and mimick the velocity graph used on Mashable website. As for generating the images, this addresses problem of generating graphs. The process can be time consuming provided a large dataset. This allows a developer to generate the graph in advance and jsut display it as an image.
Import the javascript file as follows:
<script type="text/javascript" src="velocity_html.js"></script>
and use it as follows:
$(document).ready(function() {
...
// sample data
var data = [14.65,15,15,14.55,14.2,13.95,13.9,13.8,13.9,13.8,13.55,13.45,13.6,13.65,13.7,13.75,13.75,13.7,13.55,13.35,13,12.95,12.95,12.8,12.7,12.2,12.2,12.15,12.15,12.15,12.1,12.2,12.25,12.55,12.45,12.15,12.15,12.5,12.55,12.65,12.75,12.8,12.85,12.85,12.75,12.65,12.7,12.75,12.95,12.9,12.85,12.7,12.6,12.55,12.55,12.6,12.6,12.6,12.5,12.85,12.9,12.9,12.95,13.15,13.25,13.25,13.2,13.2,13.4,13.2,13.15,12.95,12.75,12.75,12.75,12.75,12.75,12.75,12.8,12.75,12.75,12.7,12.8,12.75,12.8,12.75,12.8,12.9,12.95,12.6,12.5,12.45,12.2,12,12.2,12,12.05,11.95,12,12.1,12.05,12.15,12.3,12.35,12.4,12.55,12.7,12.75,12.75,12.7,12.75,12.95,12.65,12.45,12.45,12.4,12.55,12.65,12.8,12.8,12.8,12.8,12.85,12.85,12.9,12.95,12.9,12.85,12.85,12.8,12.8,12.8,12.8,12.95,13,12.95,13,13,12.95,13,13.05,13.05,13,12.85,12.6,12.6,12.85,12.9,12.85,12.8,12.8,13,13.1,13.1,13.05,13.05,13.05,13.2,13.2,13,13,13.2,13.2,13.2,13.2,13.2,13.2,13.1,13.1,12.85,12.85,12.75,12.75,12.75,12.75,12.45,12.45,12.35,12.35,12.45,12.45,12.4,12.4,12.5,12.5,12.4,12.4,12.35,12.35,12.3,12.3,12.35,12.35,12.45,12.45,12.35,12.35,12.35,12.35,12.6,12.6,12.3,12.3,12.2,12.2,12.1,12.1,12.05,12.05,12.35,12.35,11.9,11.9,11.8,11.8,11.75,11.75,11.8,11.8,11.7,11.7,11.7,11.7,11.7,11.7,11.7,11.7,11.65,11.65,11.65,11.65,11.55,11.55,11.45,11.45,11.4,11.4,11.4,11.4,11.4,11.4,11.55,11.65,11.8,11.7,11.8,11.8,11.75,11.85,11.95,11.45,11.35,11.2,11,11.5,11.85,12.05,12.35,12.45,12.05,12,11.75,11.7,11.5,11.5,11.7,11.65,11.65,11.75,11.7,11.35,11.1,11.05,10.8,10.75,10.85,10.85,10.75,10.85,10.25,10.05,10,9.95,9.85,10];
// generate graph
var img = velocity.generateGraph(data, 'Data');
// add the graph to your DOM
$('body').append(img);
...
});
Add the file as a module import:
var velocity = require('./velocity_node.js');
and use as follows:
...
// sample data
var data = [14.65,15,15,14.55,14.2,13.95,13.9,13.8,13.9,13.8,13.55,13.45,13.6,13.65,13.7,13.75,13.75,13.7,13.55,13.35,13,12.95,12.95,12.8,12.7,12.2,12.2,12.15,12.15,12.15,12.1,12.2,12.25,12.55,12.45,12.15,12.15,12.5,12.55,12.65,12.75,12.8,12.85,12.85,12.75,12.65,12.7,12.75,12.95,12.9,12.85,12.7,12.6,12.55,12.55,12.6,12.6,12.6,12.5,12.85,12.9,12.9,12.95,13.15,13.25,13.25,13.2,13.2,13.4,13.2,13.15,12.95,12.75,12.75,12.75,12.75,12.75,12.75,12.8,12.75,12.75,12.7,12.8,12.75,12.8,12.75,12.8,12.9,12.95,12.6,12.5,12.45,12.2,12,12.2,12,12.05,11.95,12,12.1,12.05,12.15,12.3,12.35,12.4,12.55,12.7,12.75,12.75,12.7,12.75,12.95,12.65,12.45,12.45,12.4,12.55,12.65,12.8,12.8,12.8,12.8,12.85,12.85,12.9,12.95,12.9,12.85,12.85,12.8,12.8,12.8,12.8,12.95,13,12.95,13,13,12.95,13,13.05,13.05,13,12.85,12.6,12.6,12.85,12.9,12.85,12.8,12.8,13,13.1,13.1,13.05,13.05,13.05,13.2,13.2,13,13,13.2,13.2,13.2,13.2,13.2,13.2,13.1,13.1,12.85,12.85,12.75,12.75,12.75,12.75,12.45,12.45,12.35,12.35,12.45,12.45,12.4,12.4,12.5,12.5,12.4,12.4,12.35,12.35,12.3,12.3,12.35,12.35,12.45,12.45,12.35,12.35,12.35,12.35,12.6,12.6,12.3,12.3,12.2,12.2,12.1,12.1,12.05,12.05,12.35,12.35,11.9,11.9,11.8,11.8,11.75,11.75,11.8,11.8,11.7,11.7,11.7,11.7,11.7,11.7,11.7,11.7,11.65,11.65,11.65,11.65,11.55,11.55,11.45,11.45,11.4,11.4,11.4,11.4,11.4,11.4,11.55,11.65,11.8,11.7,11.8,11.8,11.75,11.85,11.95,11.45,11.35,11.2,11,11.5,11.85,12.05,12.35,12.45,12.05,12,11.75,11.7,11.5,11.5,11.7,11.65,11.65,11.75,11.7,11.35,11.1,11.05,10.8,10.75,10.85,10.85,10.75,10.85,10.25,10.05,10,9.95,9.85,10];
// Generate and save the graph
velocity.generateGraph(data, 'Data'); // This method take the data and the filename of the image
...
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent