Draw data graphs from sensors connected to the Internet of Things (IoT) with SVG

In this article in the series on representing data graphs in the IoT I explain how to plot the graphs using the SVG language. As on other occasions, the article also serves as a short introduction to the language.

SVG format

SVG corresponds to the acronym for Scalable Vector Graphics (scalable vector graphics, in English). It's a markup language which is based on XML and that allows, mainly, to describe a drawing by the geometry that defines it; as opposed to the matrix method, used for example for a photograph, which would use a grid of colored pixels to encode it.

inside a drawing SVG An image (a matrix of pixels) can also be included, either referring to an external document or embedded within the drawing itself. SVG.

The language version that is current at the time of writing this article is the SVG 1.1 although the definition of the version is already being developed SVG 2. As much as possible, I will try to make what is explained in the introduction, even if it refers to SVG 1.1 also serve for SVG 2.

If the drawing SVG It is included in a separate document and not within the code HTML (my proposal in this solution to represent IoT data embeds it in the code HTML) must be headed by a reference XML and a document type definition (DTD).

In the first line of the previous code the version is notified XML used (1.0) character encoding (UTF-8) and indicates whether you need external definitions (standalone="no") or is it a stand-alone document (standalone="yes"). The second line expresses the document type definition (DTD), which will not be needed in the next version of SVG.

The code with which the drawing is defined is enclosed between the labels <sgv> y </sgv> which also indicate, as already mentioned when talking about HTML code that acts as a container for data graphs in the IoT, the measurements, the part of the total represented, the proportion and also the type and version.

The example above defines a drawing 500 pixels wide by 250 pixels high (500x250 viewport) that will be cropped with a 460x80 rectangle (460x80 viewbox) starting at coordinates 20,10 using all the space available in the container (an element on a web page, in our case) without respecting the original proportion to use preserveAspectRatio="none". In addition, you can now see the first content of the document, the comments that are included among <!-- y --> as in other formats based on XML.

The coordinate system chosen by SVG It is oriented horizontally (X axis) and vertically (Y axis) and the positive direction is that of Western writing, that is, the values ​​of the X axis grow to the right and the positive values ​​of the Y axis grow downward.

Define the graph with SVG

To define the graphics of the information stored by our sensors connected to IoT we will need to specify the type of object that is drawn, its geometry (coordinates, dimensions...) and its appearance (thickness, color...) In the example of this article a line graph that can be made by joining line segments with the object line, most useful for plotting independent elements, or with a multi-segment line, an object path, more practical for series of connected lines.

With the element path The aim is to make a drawing like the one in the image below, which is made up of a closed path filled with a lighter color topped off at the top by an open path, without filling and drawn with a thick line.

To describe a line an expression of the type is used:

In which X1,Y1 are the coordinates of the first point on the line and X2,Y2 are the coordinates of the second. An attribute was used stroke-width to define the thickness. There are several ways to define the appearance of objects SVG, with its individual properties, like the previous one, or with the property style which brings them all together and which is the method that will be used in the article proposal.

The above code joins on the property style the values ​​of stroke (the color of the stroke), stroke-width (the thickness of the line) and stroke-opacity (the opacity of the object)

The description of an object path has the shape

The above code uses the operations SVG M, L y Z inside the property d, which mean, respectively, “moveto” (move to), “lineto” (line to) and “closepath” (close path). They can be expressed in upper or lower case to indicate an absolute or relative value where appropriate (in the case of Z, for example, is irrelevant). There are many other operations with which, for example, we can draw circular curves, elliptic curves, Bézier curves... that we will not need in this example.

Although this proposal draws line graphs that can enclose an area, it can be useful to draw other simple elements to mark points or highlight areas. Of those available in SVG Polygons (with which you can also draw the filling), rectangles (more convenient for the specific case), ellipses and circles (as a particular case of ellipses) can be interesting. The syntax of these elements can be seen in the following example code.

The appearance of the previous code would be like the following image (with some trick to be able to reuse the points from the example above)

The points of the polygon (polygon) are indicated in the property points as pairs of x,y coordinates separated by spaces between them. To define the ellipses (ellipse) properties are used cx (x coordinate of the center), cy (y coordinate of the center), rx (width) and ry (high). Instead of two radius values ​​(horizontal and vertical radius, rx y ry) the circle (circle) is defined by a radius with the property r and the coordinates of the center with cx y cy. To define the rectangle (rectangle) the coordinates of the upper left corner are indicated (x e y) The width (width) and the tall (height)

Finally, to include text, the object is used text as follows:

The position of the text is indicated with the x and y coordinates, the font corresponds to the property font-family, the size with font-size and the color with the property fill.

HTML allows you to integrate drawings SVG as another element of the page. Like other objects, you can use the property ID to assign them a unique identifier with which they can then be referred to from JavaScript to manipulate them. From the point of view of HTML, an object SVG would have the following form:

With what we have seen so far, it would be possible to draw the type of basic graph that is sought in this proposal but, to give flexibility to the appearance of the container (the web page), the proportion of the graph will be affected (for example preserveAspectRatio="none") by modifying its size to adapt it to the layout in the browser window of the elements HTML.

Broadly speaking, there are two alternatives to the behavior when modifying the size of the browser window that displays the chart's containing web page: (1) maintain the size of the chart SVG leaving blank space if there is excess or adding scroll bars if it is missing or (2) modify the size of the graph SVG in a rhythmic manner to change the size of the browser window that displays the web. If you choose the first formula, you can predict the magnitudes and draw with absolute measurements, although corrected based on the chosen size and the values ​​of the graph. If you choose the second way, which is the one I propose, the magnitudes are always percentages of the values ​​represented. The advantage of the second method is its adaptability to the web and the drawback is the drawing of the elements that accompany the graph, such as points or texts.

To correct the deformation that could occur in the thickness of the lines, the effect is used. vector-effect="non-scaling-stroke" on the routes that are necessary (those that have a value of stroke that is not none). For the objects text There is no comparable effect, so it is necessary to deform them (along with those associated with them) in the opposite direction to that produced by the change in container size.

The transformations in SVG They can be applied to groups of objects so that several texts and other objects in a graphic can be integrated into a single group and, more conveniently, perform a transformation for all of them.

Elements that are part of a group are included among the tags <g> y </g>, to assign a transformation the property is used transform and a series of operations that, for our case, is relevant scale, to which a horizontal and vertical magnification factor is indicated. If the value of scale is greater than one widens the corresponding axis and if it is less than one a reduction in the size of objects along that axis occurs.

In the previous example, the first and second text are modified by halving their horizontal measurement and doubling the vertical measurement by the values ​​0.5 and 2.0 used in scale(0.5,2.0)

The next article in the series on representation of data graphs from sensors connected to the IoT explains how to generate or modify graphs in real time using JavaScript which will allow you to see an animation of the graph when representing the last values ​​loaded from the server.

The following is an example of how the graphs generated using this proposal would look.