image-chart
image-chart is a Chart generation server based on c3.js, a wrapper of d3. It allows you to pass chart configuration data via URL query parameters and have an image served back. A great replacement to the deprecated Google Image Charts.
Prerequisites
Installation
git clone https://github.com/lowesoftware/image-chart.git
npm install
Run The Server
node app.js
Generate A Sample Chart
http://localhost:3200/chart?config={"data":{"columns":[["data1",30,200,100,900,150,250],["data2",50,20,10,40,15,25]]}}
Server Configuraton
node-config is used to store configuration data. See the default.json in the config folder to change configuration.
Chart Configuration
Charts are configured by setting querystring parameters. Available querystring parameters are:
| Parameter | Description |
|---|---|
| bg | default: fff. Optional. A hex value to set as the background color of the chart. |
| width | default: 800. Optional. The width, in pixels of the chart image. |
| height | default: 300. Optional. The height, in pixels of the chart image. |
| config | Required. This is a stringified JSON object that will be passed to the C3 chart generate method. For information on how to generate C3 charts see the Getting Started, Examples, and Reference. |
| token | See config\defaut.json to enable and set. Not required by default, when enabled this is the api authentication token required to generate a chart. |
How It Works
When the chart method is called, the basic flow is:
- Generate a key based on an md5 of the querystring.
- If the key exists in redis then reset the cache expiration, stream the cached image to the client, and stop here.
- If the key does not exist in redis...
- Configure an object to pass to a swig template that will generate the d3 chart.
- Render the swig template.
- Use webshot to pass the rendered html to PhantomJS.
- Stream the image data to the express response and to the redis cache.
- Set the expiration of the chart in redis.