Olivier Scherrer

Since version 1.1.5 Olives is officially supporting SVG. SVG and HTML are very similar and can be manipulated almost the same way. It’s all about creating xml tags, setting there attributes and styling them. The great news is that Olives was born to support SVG and only a few modifications were required to support them.

In Olives, views are almost fully passive. They have no logic attached to them, let aside the data- attributes that describes the plugin calls. Considering that HTMLElement and SVGElement are almost similar, we should be able to treat SVG views just like we treat the HTML ones.

As an example, I’ve create an SVG+Olives charting demo.

Let’s see how the grid of the demo is built:

We first create an SVG group that will group the horizontal lines:

<g class="grid">
    <g data-gridy="foreach">
        <line x1="0" y1 x2="600" y2 data-gridy="bind: y1; bind: y2" />
    </g>
</g>

If you’re familiar with Olives, you’ll recognize the data- attributes that specify which plugin to use to manipulate the SVG. data-gridy will call the foreach method of the ‘gridy’ plugin on the Element, when bind will be called on the line method.

The plugin is configured in the Grid UI and it binds the SVG with the gridY data store.

grid.plugins.add("gridy", new ModelPlugin(gridY));

The combination of the SVG and Olives will generate as many lines as specified in gridY, with y1 and y2 being replaced by the store’s values, as declared by data-gridy=”bind: y1; bind: y2”.

Once the grid is generated, we can render the chart on top of it.

The chart is a polyline:

<g class="chart">
    <polyline points="" data-line="bind: drawLine, line" />
</g>

To add points to a polyline, we have to add them to the points=”” attribute. These points have a special formatting and can’t be simply extracted from an array of points. So we need to create a drawLine function that will handle this formatting. drawLine will then be added to the Model-plugin.

points is a simple array with many points: [ 43, 65, 87, 83, 79, 101, 102, 95 ]

chart.plugins.add("line", new ModelPlugin(model, {
    drawLine: function (points) {   
        var newPoints = [];

        // We populate the new array
        points.forEach(function (val, idx) {

            // 20px separate each point
            // the Y axis is "inverted" so subtract the value to 200
            newPoints.push([idx*20, 200-val]);

        });

        // It also has "terminating points"
        newPoints.unshift([0, 200]);
        newPoints.push([newPoints[newPoints.length-1][0], 200]);

        // Finally, we join all the points (x1,y1 x2,y2 x3,y3…)
        // And set the points attribute
        this.setAttribute("points", newPoints.join(" "));
    }
}));

Any kind of chart can be rendered using this technique, bar charts, pie charts, whatever. And we can even go further by connecting our models to a node.js server to have real-time charts!