A chart generation server based on d3. Pass chart configuration as URL querystring and get an image served back. A replacement to the deprecated Google Image Charts.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
config
.gitignore
LICENSE
app.js
generatechart.swig
gruntfile.js
package.json
readme.md

readme.md

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

  • Node - to host the Chart generation server
  • Redis - to cache the generated images

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:

  1. Generate a key based on an md5 of the querystring.
  2. If the key exists in redis then reset the cache expiration, stream the cached image to the client, and stop here.
  3. If the key does not exist in redis...
  4. Configure an object to pass to a swig template that will generate the d3 chart.
  5. Render the swig template.
  6. Use webshot to pass the rendered html to PhantomJS.
  7. Stream the image data to the express response and to the redis cache.
  8. Set the expiration of the chart in redis.

License

MIT License