svg-ssr v1.2.2

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:

  	```javascript
  	chart.pie(data [, config])
  	```
  	* **data example** 
  
  	```javascript
  	{
   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:

  	```javascript
  	chart.bar(data [, config])
  	```
  	* **data example** 
  
  	```javascript
  	{
   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:

  	```javascript
  	chart.scatter(data [, config])
  	```
  	* **data example** 
  
  	```javascript
  	{   
   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:

  	```javascript
  	chart.line(data [, config])
  	```
  	* **data example** 
  
  	```javascript
  	{   
   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:

  	```javascript
  	chart.area(data [, config])
  	```
  	* **data example** 
  
  	```javascript
  	{   
    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'