svg-ssr

SVG-SSR

SVG server-side rendering module for Node.js.

You can build pie, bar, scatter and line charts in Node.js.

Install:

npm install svg-ssr

Init in Browser:

//after import client/js/chart.js
var setting = {
    type : 'line', //type, required
    tooltip : true, //has tooltip
    tooltipTrigger: false,//show the tooltip when has it
    tooltipMaker: undefined,//tooltip html maker function with parameters 'dot' and 'svg dom'
    callback: undefined,//the callback function of click on item
    moveTrigger: true,//trigger callback when move in axis
    defaultEvent: true//whether use defaute events on item
}
myChart(document.getElementById('lineChart'), setting);

CSS Import:

@import "svg-ssr/client/css/theme.css";

Example In Node.js:

import chart from 'svg-ssr';
// it can be just a string and it will be setted as id
let config = {
    id : 'chart_'+(new Date()).getTime(), // whatever
    debug: false, // if you want log time in terminal you can set it to true
    box : {
        width: 100, //not valid in pie chart
        height: 100 //not valid in pie chart
    }
}
let chartSVGCode = chart.pie(data [, config]);

API:

• Pie Chart:

  chart.pie(data [, config])
  

  • data example

  {
      value: [ 46.6, 38.9, 14.6 ],
      color: [ '#FF574D', '#3E8FF1', '#2BC7FF' ],//not required
      name: [ 'type 1', 'type 2', 'type 3' ],
      unit: '%'//not required
  }		
  

• Bar Chart:

  chart.bar(data [, config])
  

  • data example

  {
      series: [
          { data: [
          {
              xValue: '20',
              yValue: 7.3
          },
          {
              xValue: '20~24',
              yValue: 31.7
          }]
          }
      ],
      xAxis: {
          type: 'category',
          data: [ '20', '20~24', '25~29', '30~34', '35~39', '40' ]
      },
      yAxis: {
          type: 'linear',
          data: [ 40, 0 ],
          unit: '%' //not required
      }
  }	
  

• Scatter Chart:

  chart.scatter(data [, config])
  

  • data example

  {   
      xAxis:
          { type: 'time',
          data:
          [   20170524,
              20170525,
              ...]
          },
      yAxis:
          { type: 'points',
          data: [ 123, 345, ... ]},
      series:[
          {data:[
          { yValue: 23160,
              label: 'sth...',
              tooltip: '2017-06-22 23160',
              xValue: 20170524 },
          { yValue: 17556,
              label: '',
              tooltip: '2017-06-23 17556',
              xValue: 20170525 }
          ]}
      ]
  }    	
  

• Line Chart:

  chart.line(data [, config])
  

  • data example

  {   
      xAxis:
          { type: 'time',
          data:
          [   20170524,
              20170525,
              ...]
          },
      yAxis:
          { type: 'points',
          data: [ 123, 345, ... ]},
      tooltip: { pointIndex: 14 },
      series:[
          {
          name: '票房',//not required, if you need legend you should give it to me
          color: '#010101', //not required
          data:[
          { yValue: 3160,
              tooltip: '2017-06-22 3160',
              xValue: 20170524 },
          { yValue: 7556,
              tooltip: '2017-06-23 7556',
              xValue: 20170525 }
          ]},
          {data:[
          { yValue: 60000,
              tooltip: '2017-06-22 6',
              xValue: 20170524 },
          { yValue: 80000,
              tooltip: '2017-06-23 8',
              xValue: 20170525 }
          ]}
      ]
  } 	
  

• Area Chart:

  chart.area(data [, config])
  

  • data example

  {   
      xAxis:
          { type: 'time',
          data:
          [   20170524,
              20170525,
              ...]
          },
      yAxis:
          { type: 'points',
          data: [ 123, 345, ... ]},
      tooltip: { pointIndex: 14 },
      series:[
          {data:[
          { yValue: 3160,
              tooltip: '2017-06-22 3160',
              xValue: 20170524 },
          { yValue: 7556,
              tooltip: '2017-06-23 7556',
              xValue: 20170525 }
          ]},
          {data:[
          { yValue: 60000,
              tooltip: '2017-06-22 6',
              xValue: 20170524 },
          { yValue: 80000,
              tooltip: '2017-06-23 8',
              xValue: 20170525 }
          ]}
      ]
  } 	
  

Notice

• axis has 4 types include 'category', 'time', 'linear' and 'points', the definition is similar to d3
• when the type of axis is 'time', you should provide a Date array
• x axis can use all of 4 types
• y axis can only use 'linear', 'points'