Node

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

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'
});