search

panosoft / node-chartist

SVG Charts on the server.
The Unlicense
82 stars 20 forks source link

Output as SVG (instead of HTML), and styling inside static SVG file #11

Closed andrewspy closed 7 years ago

andrewspy commented 7 years ago

I would like to generate a static SVG as an output. Is it possible to extract the <svg>...</svg> component of the HTML output, and use it as content of a static SVG file? Also, how to style the static SVG with inline <style>, since chartist-js is using external CSS stylesheet (i.e. main.css).

shibanovp commented 7 years ago

You can load https://github.com/panosoft/node-chartist/blob/master/lib/chart.js output into https://github.com/cheeriojs/cheerio or similar library and extract svg. For styling take a look at the standard.

andrewspy commented 7 years ago

@paul-shibanov Thanks for the pointer, as I am quite new to Node world. Anyway, I have figure out how to make the SVG static file works using the following:-

Below is the sample of the working SVG file as a reference:-

<?xml version="1.0" standalone="no"?>
<?xml-stylesheet href="main.css" type="text/css"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="400" height="200"
     xmlns="http://www.w3.org/2000/svg" version="1.1">
<g class="ct-grids"><line x1="50" x2="50" y1="15" y2="165" class="ct-grid ct-horizontal"></line><line x1="117" x2="117" y1="15" y2="165" class="ct-grid ct-horizontal"></line><line x1="184" x2="184" y1="15" y2="165" class="ct-grid ct-horizontal"></line><line x1="251" x2="251" y1="15" y2="165" class="ct-grid ct-horizontal"></line><line x1="318" x2="318" y1="15" y2="165" class="ct-grid ct-horizontal"></line><line y1="165" y2="165" x1="50" x2="385" class="ct-grid ct-vertical"></line><line y1="140" y2="140" x1="50" x2="385" class="ct-grid ct-vertical"></line><line y1="115" y2="115" x1="50" x2="385" class="ct-grid ct-vertical"></line><line y1="90" y2="90" x1="50" x2="385" class="ct-grid ct-vertical"></line><line y1="65" y2="65" x1="50" x2="385" class="ct-grid ct-vertical"></line><line y1="40" y2="40" x1="50" x2="385" class="ct-grid ct-vertical"></line><line y1="15" y2="15" x1="50" x2="385" class="ct-grid ct-vertical"></line></g><g><g series-name="Series 1" class="ct-series ct-series-a"><path d="M50,165C72.333,156.667,94.667,148.333,117,140C139.333,131.667,161.667,123.333,184,115C206.333,106.667,228.667,98.333,251,90C273.333,81.667,295.667,73.333,318,65" class="ct-line"></path><line x1="50" y1="165" x2="50.01" y2="165" class="ct-point" value="1"></line><line x1="117" y1="140" x2="117.01" y2="140" class="ct-point" value="2"></line><line x1="184" y1="115" x2="184.01" y2="115" class="ct-point" value="3"></line><line x1="251" y1="90" x2="251.01" y2="90" class="ct-point" value="4"></line><line x1="318" y1="65" x2="318.01" y2="65" class="ct-point" value="5"></line></g><g series-name="Series 2" class="ct-series ct-series-b"><path d="M50,115C72.333,106.667,94.667,98.333,117,90C139.333,81.667,161.667,73.333,184,65C206.333,56.667,228.667,48.333,251,40C273.333,31.667,295.667,23.333,318,15" class="ct-line"></path><line x1="50" y1="115" x2="50.01" y2="115" class="ct-point" value="3"></line><line x1="117" y1="90" x2="117.01" y2="90" class="ct-point" value="4"></line><line x1="184" y1="65" x2="184.01" y2="65" class="ct-point" value="5"></line><line x1="251" y1="40" x2="251.01" y2="40" class="ct-point" value="6"></line><line x1="318" y1="15" x2="318.01" y2="15" class="ct-point" value="7"></line></g></g><g class="ct-labels"><text x="50" y="185" width="67" height="20" class="ct-label ct-horizontal ct-end">a</text><text x="117" y="185" width="67" height="20" class="ct-label ct-horizontal ct-end">b</text><text x="184" y="185" width="67" height="20" class="ct-label ct-horizontal ct-end">c</text><text x="251" y="185" width="67" height="20" class="ct-label ct-horizontal ct-end">d</text><text x="318" y="185" width="67" height="20" class="ct-label ct-horizontal ct-end">e</text><text y="165" x="40" height="25" width="30" class="ct-label ct-vertical ct-start">1</text><text y="140" x="40" height="25" width="30" class="ct-label ct-vertical ct-start">2</text><text y="115" x="40" height="25" width="30" class="ct-label ct-vertical ct-start">3</text><text y="90" x="40" height="25" width="30" class="ct-label ct-vertical ct-start">4</text><text y="65" x="40" height="25" width="30" class="ct-label ct-vertical ct-start">5</text><text y="40" x="40" height="25" width="30" class="ct-label ct-vertical ct-start">6</text><text y="15" x="40" height="30" width="30" class="ct-label ct-vertical ct-start">7</text></g>
</svg>

Thanks and I shall close the issue.