pcnchart
v0.10.1
Published
Create an SVG string to display Process Chain Network data
Downloads
17
Readme
pcnchart
Utility for generating an SVG flowchart from Process Chain Network
pcnchart takes a single input; data conforming to the following specification:
https://github.com/mjswensen/pcn-spec
It outputs an SVG String.
##Installation##
npm install pcnchart
##Server-Side Usage##
For simple server-side rendering with an Express controller:
var charter = require('pcnchart');
exports.graph = function(req, res) {
// Send PCN data conforming to Specification to chart utility
var svg = charter(pcnDataStructure);
// Set HTTP Headers for SVG
res.set({
'Content-Type': 'image/svg+xml',
// Note: Sometimes necessary for embedding on a page
// 'X-Frame-Options': 'SAMEORIGIN'
});
res.send(svg);
}
##Client-Side Usage##
Rendering on the client is also simple by using tools such as Browserify to include pcnchart into your browser scripts.
var pcnchart = require('pcnchart'); // Browserify or similar for using NPM
/* Get pcnDataStructure conforming to Specification */
var pcnDataStructure;
var svgElement = pcnchart(pcnDataStructure);
// Append the parsed SVG into a container
var container = document.getElementById('someContainerId');
container.appendChild(svgElement);
For your convenience, I've included pre-built files in the dist/
directory
for using pcnchart in the browser. They expose the method pcnchart()
that behaves exactly as demonstrated above, but you can ignore the require()
statement.