phantom-chartjs
Server-side chart generation using PhantomJS and Chart.js
Last updated 3 months ago by artifacthealth .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install phantom-chartjs 
SYNC missed versions from official npm registry.

Build Status

phantom-chartjs

phantom-chartjs is a CommonJS module for rendering Chart.js charts to images on the server. Rendering is accomplished using PhantomJS. In order to keep response times low, PhantomJS is spanwed as a server process.

Installation

Install using npm:

$ npm install phantom-chartjs --save

TypeScript

TypeScript definitions are included in the package, so typings are automatically provided to TypeScript without any additional work.

Usage

Create a renderer

In your server, create a renderer. This starts a PhantomJS server on the default port of 8083. If a different port is desired, pass it as on option to createChartRenderer. The renderer should be created once and used throughout your server.

import {createChartRenderer} from "phantom-chartjs";

createChartRenderer({ port: 8080 }, (err, renderer) => {
    if (err) throw err;
    
    ...
});

Define your chart configuration

See the Chart.js documentation for more information.

var config = {
  chart: {
    type: 'bar',
    data: {
      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
      datasets: [{
        label: '# of Votes',
        data: [12, 19, 3, 5, 2, 3],
        backgroundColor: [
          'rgba(255, 99, 132, 0.2)',
          'rgba(54, 162, 235, 0.2)',
          'rgba(255, 206, 86, 0.2)',
          'rgba(75, 192, 192, 0.2)',
          'rgba(153, 102, 255, 0.2)',
          'rgba(255, 159, 64, 0.2)'
        ],
        borderColor: [
          'rgba(255,99,132,1)',
          'rgba(54, 162, 235, 1)',
          'rgba(255, 206, 86, 1)',
          'rgba(75, 192, 192, 1)',
          'rgba(153, 102, 255, 1)',
          'rgba(255, 159, 64, 1)'
        ],
        borderWidth: 1
      }]
    },
    options: {
      scales: {
        yAxes: [{
          ticks: {
            beginAtZero: true
          }
        }]
      }
    }
  }
};

Render to a Buffer

In order to render a chart to an image Buffer, call renderBuffer. By default the PNG format is used.

renderer.renderBuffer(config, function (err, buffer) {
    if (err) throw err;

    // the `buffer` now contains a Buffer with the rendered PNG
    ...
});

Render to Base 64

You can also render to base 64 encoding using renderBase64.

renderer.renderBase64(config, function (err, data) {
    if (err) throw err;

    // the `data` now contains a base 64 encoding string with the rendered PNG
    ...
});

Close the renderer

Make sure to close the renderer when your server exits; otherwise, the PhantomJS server process may not exit.

process.on("exit", () => {

    renderer.close();
});

Current Tags

  • 0.2.5                                ...           latest (3 months ago)

12 Versions

  • 0.2.5                                ...           3 months ago
  • 0.2.4                                ...           a year ago
  • 0.2.3                                ...           3 years ago
  • 0.2.2                                ...           4 years ago
  • 0.2.1                                ...           4 years ago
  • 0.2.0                                ...           4 years ago
  • 0.1.4                                ...           4 years ago
  • 0.1.3                                ...           4 years ago
  • 0.1.2                                ...           4 years ago
  • 0.1.1                                ...           4 years ago
  • 0.1.0                                ...           4 years ago
  • 0.0.1                                ...           4 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 12
Last Month 13
Dependencies (4)
Dev Dependencies (3)
Dependents (1)

Copyright 2014 - 2016 © taobao.org |