Node

To create server-side charts using NodeJS, first ensure you have the Canvas module installed. This can be installed using npm install canvas.

There are two different versions of the module, v1 (deprecated, but it may still exist on older systems; only compatible up to Node 10) and v2 (current; only compatible with Node 6+). Older ZingChart versions (prior to 2.9.4) support v1; beginning with 2.9.4 ZingChart will support both versions. For Node versions above 10, zingchart.DEV.CANVASVERSION will need to be set to 2.

1. Install

The NodeJS build is automatically included in the ZingChart library. Install the zingchart package via npm: npm install zingchart

2. Include the zingchart-nodejs module in your project

For any file that will be using zingchart-nodejs, you will need to import the file.

let { zingchart, ZC } = require('./zingchart-nodejs.min.js');
// or
let { zingchart } = require('./zingchart-nodejs.min.js'); // this also works since recent versions look for license into zingchart.BUILDCODE in addition of ZC.BUILDCODE

zingchart.DEV.CANVASVERSION = 1; // indicates which canvas version is installed so that ZingChart will use the appropriate canvas API

Default Use Case

The simple use case involves defining chart data as a JSON configuration object or in a separate .json file. Then, use the zingchart.render method the same way you would in the standard version of ZingChart, using the data attribute if the JSON object is defined within the same file or the dataurl attribute if the configuration is coming from a separate file. Then, define the filetype as 'png' or 'jpeg' and set the filename for the generated image.

let chartData = {
    "type":"line",
    "title":{
        "text":"Chart Demo"
    },
    "series":[
        {
            "values":[69,68,54,48,70,74,98,70,72,68,49,69]
        }
    ]
};
zingchart.render({
    id : 'zc',
    width : 600,
    height : 400,
    
    data : chartData,
    //dataurl : "http://url.path.to/chart.json",
    filetype : 'png', // png or jpeg
    filename : 'out.png'
});

Import ZingChart Modules

You must EXPLICITLY IMPORT MODULE CHARTS. There are NO default export objects so you must import them.

let { zingchart, ZC } = require('./zingchart-nodejs.min.js');
// EXPLICITLY IMPORT MODULE from node_modules
require('./modules-nodejs/zingchart-nodejs-chord.min.js');

let chartData = {
    "type":"chord",
    "title":{
        "text":"Chart Demo"
    },
    "options": {
        "radius": "90%"
      },
    "plotarea": {
      "margin": "dynamic"
    },
    "series": [{
        "values": [6637, 5700, 4789, 2771],
        "text": "A"
      },
      {
        "values": [7737, 2691, 2202, 7006],
        "text": "B"
      },
      {
        "values": [8574, 9898, 4084, 1765],
        "text": "C"
      },
      {
        "values": [5309, 1602, 8395, 2908],
        "text": "D"
      }
    ]
};
zingchart.render({
    id : 'zc',
    width : 600,
    height : 400,
    
    data : chartData,
    //dataurl : "http://url.path.to/chart.json",
    filetype : 'png', // png or jpeg
    filename : 'out.png'
});

Summary

Have questions about how to use Zingchart with NodeJS? We're happy to help! Email support@zingchart.com or start a chat right here on this page for support.