-
Notifications
You must be signed in to change notification settings - Fork 355
How to generate chart image in Node.js environment?
Jae Sung Park edited this page Apr 23, 2021
·
5 revisions
This guide explains on how to generate chart screenshot image in Node.js environment.
Basically, most of functionality will depends on Puppeteer. Install puppeteer first.
$ npm i puppeteer --save-dev
// screen.mjs
import puppeteer from "puppeteer";
/**
* Generate chart image screenshot
* @param {object} options billboard.js generation option object
* @param {string} path screenshot image full path with file name
*/
export default async function screenshot(options = {}, path = "chart.png") {
const browser = await puppeteer.launch();
const page = await browser.newPage();
// load billboard.js assets from CDN
await page.addStyleTag({ url: "https://cdn.jsdelivr.net/npm/billboard.js/dist/theme/datalab.min.css" });
await page.addScriptTag({ url: "https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js" });
await page.evaluate(options => {
bb.generate(options);
}, options);
const content = await page.$(".bb");
// https://pptr.dev/#?product=Puppeteer&show=api-pagescreenshotoptions
await content.screenshot({
path,
omitBackground: true
});
await page.close();
await browser.close();
}
// index.mjs
import screenshot from "./screen.mjs";
await screenshot({
data: {
columns: [
["data1", 300, 350, 300, 0, 0, 0],
["data2", 130, 100, 140, 200, 150, 50]
],
types: {
data1: "area-step",
data2: "area-spline"
}
},
// IMPORTANT:
// Specify 'transition.duration=0' to avoid partial rendering
// caused by the transition(animation).
transition: {
duration: 0
}
}, "./chart01.png");
await screenshot({
data: {
columns: [
["data1", 300, 350, 300, 0, 0, 0],
["data2", 130, 100, 140, 200, 150, 50]
],
types: {
data1: "bar",
data2: "area"
}
},
transition: {
duration: 0
}
}, "./chart02.png");
$ node index.mjs
# ==> will generate 'chart01.png' and 'chart02.png'
- Why we decided to start billboard.js?
- Comparison table
- How to migrate from C3.js?
- Who's using billboard.js
- Third party applications
- Themes
- Roadmap
- Architecture & Event
- Plugin Interface
- Release workflow
- How behaves for dynamic loading?
- How tooltip behaves on grouped option?
- How to load as ESM directly from the browser?
- How to implement realtime chart?
- How to bundle for legacy browsers?
- How to generate chart image in Node.js environment?
- Understanding padding