How to make a graph resizable or responsive

Starting with version 4.1 Tabulizer allows you to create responsive and/or resizable graphs. Resizable means that you can drag the lower corner of the graph chart and change its size, while responsive means that it will change its size automatically when the browser's size changes (to fit the available screen size). This is very useful if you want to adjust or "respond" to different devices (desktop, tablets, smartphones, etc).

This is an example of a resizable graph. Grab with your mouse the bottom-right corner to change its size.


This is an example of a responsive graph. Resize your browser to see how the graph size responds.

Here is how you can make an existing graph resizable:
  1. Locate the ruleset archive name that you used to produce this graph. Normally, this was downloaded from the online graph creation wizard and should have a name similar to rs_8zw19se9 (without the extension).
  2. In the templates/tabulizer/graph folder, edit the corresponding xml file (rs_8zw19se9.xml in our example)
  3. Look for the graph tag and add the attribute resizable="1". For instance, in our example we would change:
    <graph type="bar" num_of_series="1" width="500px" height="300px" />
    to:
    <graph type="bar" num_of_series="1" width="500px" height="300px" resizable="1" />
Here is how you can make an existing graph responsive:
  1. Locate the ruleset archive name that you used to produce this graph. Normally, this was downloaded from the online graph creation wizard and should have a name similar to rs_8zw19se9 (without the extension).
  2. In the templates/tabulizer/graph folder, edit the corresponding xml file (rs_8zw19se9.xml in our example)
  3. Look for the graph tag and add the attribute responsive="1". For instance, in our example we would change:
    <graph type="line" num_of_series="1" width="500px" height="300px" />
    to:
    <graph type="line" num_of_series="1" width="500px" height="300px" responsive="1" />