Render charts on server side

skuzzle commented 4 years ago

Shipping over 200kb of js for a charting library is overkill, given that the charts are more or less just graphical sugar. It should not be that hard to generate some svg code on the server side

skuzzle commented 4 years ago

https://css-tricks.com/how-to-make-charts-with-svg/

skuzzle commented 4 years ago

Could as well try the following:

Have an extra node application for server side graphing
Can use a combination of chart.js and canvas2svg to render chart as svg (https://stackoverflow.com/questions/45563420/exporting-chart-js-charts-to-svg-using-canvas2svg-js)
Fetch graph from browser asynchronously by posting graph data to node server

skuzzle commented 4 years ago

Example svg generated by canvas2svg from a graph with only 2 data points at y=1 each

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="500" height="500">
    <defs>
        <clipPath id="WCWrVyBFiInC">
            <path fill="none" stroke="none" d=" M 22.759999999999998 7.199999999999999 L 500 7.199999999999999 L 500 492.8 L 22.759999999999998 492.8 L 22.759999999999998 7.199999999999999 Z"/>
        </clipPath>
        <clipPath id="esoSGLbJWllF">
            <path fill="none" stroke="none" d=" M 21.259999999999998 5.699999999999999 L 501.5 5.699999999999999 L 501.5 494.3 L 21.259999999999998 494.3 L 21.259999999999998 5.699999999999999 Z"/>
        </clipPath>
    </defs>
    <g>
        <g transform="translate(12.759999999999998,7.199999999999999) rotate(0,0,0)">
            <text fill="#666" stroke="none" font-family="'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" font-size="12px" font-style="normal" font-weight="normal" text-decoration="normal" x="0" y="0" text-anchor="end" dominant-baseline="central">1</text>
        </g>
        <g transform="translate(12.759999999999998,492.8) rotate(0,0,0)">
            <text fill="#666" stroke="none" font-family="'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" font-size="12px" font-style="normal" font-weight="normal" text-decoration="normal" x="0" y="0" text-anchor="end" dominant-baseline="central">0</text>
        </g>
        <g clip-path="url(#WCWrVyBFiInC)">
            <g>
                <path fill="rgb(0,0,0)" stroke="none" paint-order="stroke fill markers" d=" M 22.759999999999998 7.199999999999999 C 213.656 7.199999999999999 309.104 7.199999999999999 500 7.199999999999999 L 500 492.8 L 22.759999999999998 492.8 Z" fill-opacity="0.1"/>
            </g>
        </g>
        <g clip-path="url(#esoSGLbJWllF)">
            <g>
                <g>
                    <path fill="none" stroke="rgb(0,0,0)" paint-order="fill stroke markers" d=" M 22.759999999999998 7.199999999999999 C 213.656 7.199999999999999 309.104 7.199999999999999 500 7.199999999999999" stroke-opacity="0.1" stroke-miterlimit="10" stroke-width="3"/>
                </g>
            </g>
        </g>
    </g>
</svg>

skuzzle / cmp

Render charts on server side #75