The responsive function
- Introduction
- Example
- The January 2021 change to dynamic media queries
- The July 2023 update to reponsive configuration
- What does the responsive code look like
- Some definitions of this code
- Examples of responsive charts
- Using CSS instead of the responsive function
Introduction
Since October 2019 the responsive features of RGraph have improved with the new responsive function, added to both canvas and SVG charts.
The demo charts are (mostly) all reponsive in some way so you can change the size of your browser window (or screen) and see the canvas or SVG tags update accordingly (some browsers may not let you shrink the browser small enough to see the smallest configuration - for example, Google Chrome may not let you but Mozilla Firefox might).
The responsive rules can add a lot of code to your configuration so usually it's enough to have two rules - one for screens smaller than 900px where the chart is smaller (for example 400px wide) and another for screens larger than 900px where you have the default chart size.
Of course, if you're designing for small screens first then you will want to choose the default size based on the smaller screen size.
Whichever you choose, for a public website at least, your rules should try to accommodate both.
Example
<script src="RGraph.common.core.js" ></script>
<script src="RGraph.bar.js" ></script>
<script>
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,3,5,4,1],
options: {
colors: ['Gradient(red:#a00)'],
title: 'An example of a responsive chart',
titleBold: true,
xaxis: false,
yaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
responsive: [
{maxWidth: null, width: 800, height: 275, options: {titleSize: 18,xaxisLabelsAngle: 0, textSize: 14,xaxisLabelsOffsety: 0,marginBottom: 30,marginInner: 25,xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']}},
{maxWidth: 1100, width: 650, height: 250, options: {titleSize: 14,xaxisLabelsAngle: 0, textSize: 12,xaxisLabelsOffsety: 0,marginBottom: 30,marginInner: 20,xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']}},
{maxWidth: 700, width: 400, height: 200, options: {titleSize: 12,xaxisLabelsAngle: 45,xaxisLabelsOffsety: 3, marginBottom:35,textSize: 10,marginInner: 10,xaxisLabels: ['Mon','Tue','Wed','Thur','Fri','Sat','Sun']}}
]
}
}).draw();
</script>
The January 2021 change to dynamic media queries
When the responsive function was first created at the end of 2019 it relied on the window.onresize function to be notified of changes to the window size and also ran when it was called to set the correct configuration when first drawing the chart.
Using the window.onresize event is suboptimal however because this event runs many times per second when the window is being resized - causing the responsive function to be repeatedly called unnecessarily.
As of the January 2021 release this has now been changed for both the canvas and SVG charts. It now uses dynamic media queries by way of the window.matchMedia function. This is a javascript api that allows you to install media queries using javascript. At its most basic level it looks like this:
var mediaQuery = window.matchMedia('screen and (min-width: 600px) and (max-width: 950px)');
mediaQuery.addListener(function (e)
{
if (e.matches) {
// ...
}
});
What RGraph uses looks a little different to integrate it into the RGraph responsive function but the basics are the same.
The July 2023 update to reponsive configuration
Previously, the responsive function was used to specify the responsive instructions - this has now been changed so that you can also inline the responsive configuration alongside the rest of the configuration for the chart.
You can see the new style of configuration by looking at the code that's shown below. There are still a few cases where you might use the function way - for example the 3D donut chart demo in the download archive shows this.
What does the responsive code look like?
Here are canvas and SVG examples of configurations that use the responsive function:
Canvas:
<script>
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,3,5,4,1],
options: {
title: 'An example of a responsive chart',
titleBold: true,
xaxis: false,
yaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
responsive: [
{maxWidth: null, width: 700, height: 275, options: {titleSize: 18,xaxisLabelsAngle: 0, textSize: 14,xaxisLabelsOffsety: 0,marginBottom: 5,marginInner: 25}},
{maxWidth: 1100, width: 600, height: 250, options: {titleSize: 14,xaxisLabelsAngle: 0, textSize: 12,xaxisLabelsOffsety: 0,marginBottom: 5,marginInner: 20}},
{maxWidth: 600, width: 400, height: 200, options: {titleSize: 12,xaxisLabelsAngle: 45,xaxisLabelsOffsety: 7, marginBottom:30,textSize: 10,marginInner: 10}}
]
}
}).draw();
</script>
SVG:
<script>
new RGraph.SVG.Bar({
id: 'chart-container',
data: [4,8,6,3,5,4,1],
options: {
title: 'An example of a responsive chart',
titleBold: true,
axes: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
responsive: [
{maxWidth: null, width: 700, height: 275, options: {titleSize: 18, textSize: 14, marginInner: 25, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']}, parentCss: {'float': 'right'}},
{maxWidth: 1100, width: 600, height: 250, options: {titleSize: 14, textSize: 12, marginInner: 20, xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday']}, parentCss: {'float': 'none'}},
{maxWidth: 600, width: 400, height: 200, options: {titleSize: 12, textSize: 10, marginInner: 10, xaxisLabels: ['Mon','Tues','Wed','Thu','Fri','Sat','Sun']}, parentCss: {'float': 'none'}}
]
}
}).draw();
</script>
As you can see from the highlighted code the responsive function is added on to the end of your configuration. In the code that's shown above it's been reduced down to one configuration per line. But let's have a look at it when it's expanded out so that it can be read in all of its glory (we'll use the canvas example for this):
<script>
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,3,5,4,1],
// These options are not changed by the responsive function.
options: {
title: 'An example of a responsive chart',
titleBold: true,
xaxis: false,
yaxis: false,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
responsive: [
// This is the first set of configuration values and it has the maxWidth
// set to null. This means that it will match when the other rules do not. A 'default'
// set of rules. So you can add configuration values here that should be used
// when the screen is big. Keep in mind that if you've set something in another rule then
// you may need to override it.
{
maxWidth: null,
width: 700,
height: 275,
options: {
titleSize: 18,
xaxisLabelsAngle: 0,
textSize: 14,
xaxisLabelsOffsety: 0,
marginBottom: 5,
marginInner: 25
},
parentCss: {'float': 'right'}
},
// Another set of configuration options that are applied to a maximum screen width of
// 1100px. Remember that you may need to give configuration parameters
// here with different values than what you've given in other sets of configuration.
{
maxWidth: 1100,
width: 600,
height: 250,
options: {
titleSize: 14,
xaxisLabelsAngle: 0,
textSize: 12,
xaxisLabelsOffsety: 0,
marginBottom: 5,
marginInner: 10
},
parentCss: {'float': 'none'}
},
// The smallest screen configuration goes at the bottom.
{
// This is the maximum screen size that this configuration should be applied to.
maxWidth: 600,
// This is the size that the canvas/svg should be changed to
width: 400,
height: 200,
// These options are applied when this configuration is matched. Common things
// to change are sizes of margins and sizes of text
options: {
titleSize: 12,
xaxisLabelsAngle: 45,
xaxisLabelsOffsety: 7,
marginBottom: 30,
textSize: 10,
marginInner: 10
},
// The css: option allows you to give CSS properties that are set
// on the canvas tag - though if the textAccessible option is enabled the canvas tag
// is wrapped in a div tag so that the textAccessible
// option can work, so the CSS properties are actually applied to that.
//
// In the case of svg charts the CSS properties are set on the div wrapper
// that wraps the svg tag - the one that you write in your HTML page to put the chart where you
// want to see it.
css: {
},
// This applies CSS to the parent HTML node of the chart. So in the case of canvas -
// ignore the textAccessible wrapper (if it's enabled) - this is the parent to the canvas
// tag in your page. So if you wrap the canvas in a div tag
// then this will be that tag. You might find that using this option is easier than
// navigating the DOM.
//
// In the case of SVG charts the parent HTML node that's referred to here is similar - NOT the
// div tag that's the direct parent of the SVG tag - but the parent
// HTML node of that.
parentCss: {
cssFloat: 'none', // Use the JavaScript version of the CSS property name
// 'background-color': 'red' // Put the property name in quotes so that we can use the exact
// CSS property name
},
// This callback function is run when this configuration is matched. It
// allows you to change other things on the page that you may need to.
// Remember that it runs AFTER the chart has been redrawn
callback: function (obj)
{
}
}
]
}
}).draw();
</script>
Some definitions of this code
The above code has three configurations defined - one for the smallest screen sizes with a maximum screen width of 600px, one for a maximum screen width of 1100px and another for larger screens (which has the width property set to null.
These rules should be ordered from top to bottom, largest to smallest. So the largest screen size configuration goes at the top and the smallest configuration goes last. Here are some definitions:
Canvas:
<div id="wrapper">
<canvas id="cvs" width="750" height="300">[No canvas support]</canvas>
</div>
SVG:
<div id="wrapper">
<div id="chart-container" style="width: 750px; height: 300px"></div>
</div>
And your chart code is this (a simple example of a
Bar chart):Canvas:
new RGraph.Bar({
id: 'cvs',
data: [4,8,6,3,5,2,9],
options: {
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
responsive: [
{maxWidth: null, width: 600, height: 300, options: {textSize: 14}, callback: function () {}},
{maxWidth: 900, width: 400, height: 200, options: {textSize: 10}, callback: function () {}}
]
}
}).draw();
SVG:
new RGraph.SVG.Bar({
id: 'chart-container',
data: [4,8,6,3,5,2,9],
options: {
xaxisLabels: ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'],
responsive: [
{maxWidth: null, width: 600, height: 300, options: {textSize: 14}, callback: function () {}},
{maxWidth: 900, width: 400, height: 200, options: {textSize: 10}, callback: function () {}}
]
}
}).draw();
Then in your responsive callback you can change the
border on the container by adding this to your configuration:Canvas:
parentCss: {
border: '1px green solid'
}
SVG:
parentCss: {
border: '1px green solid'
}
Examples of responsive charts
Here are examples of responsive charts. One Bar chart is 3D and the others are 2D and there's a Line chart there as well. The code for making a chart responsive can add a lot to your configuration - though it can be as simple as specifying the new width and height and adjusting the textSize option. It all depends on your requirements.
There are more examples of responsive charts in the demos folder of the download. All of the basic SVG demos have been made to be responsive along with various canvas demos. Also, most of the demos shown on the RGraph website have been made to be responsive. You can see all of the demos here.
- A Bar chart with a dark background
- A multi-row 3D Bar chart
- A black-and-white Line chart
- A plain SVG Bar chart
- A chart with a rotating background
- A Bar chart using a negative inner horizontal margin
- A red Horizontal Bar chart
- A sketchy Bar chart with a background image
- A grouped Bar chart with an interactive key
Other demos in the download archive commonly (but not exclusively) use -responsive in their filenames.
If you use Linux or Unix and have access to the grep command, then you can also run these commands to find demos that use the responsive function:
cd RGraph/demos
grep "\.responsive(" * | less
Using CSS instead of the responsive function
An alternative to using the responsive function is to just use a little bit of CSS on the canvas tag instead. When you resize the canvas tag using CSS the canvas tag isn't cleared - so a redraw is not necessary. You can still use the responsive function to increase the size of the text on the chart though. For example try the following code.
<div>
<canvas id="cvs" width="800" height="400" style="width: 100%; max-width: 800px">[No canvas support]</canvas>
</div>
<script>
bar = new RGraph.Bar({
id: 'cvs',
data: [100,56,24,23,18,15,12,8,2,1],
options: {
labelsAbove: true,
labelsAboveSpecific: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct'],
labelsAboveOffset: 5,
marginLeft: 50,
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
responsive: [
{maxWidth: null, options: {textSize: 16,marginLeft: 40}},
{maxWidth: 750, options: {textSize: 24,marginLeft: 60}}
]
}
}).draw();
</script>