HOWTO: Create sparklines and inline charts
- Introduction
- Inline Bar charts
- Inline Line charts (sparklines)
- Inline Pie charts
- Inline Waterfall charts
- Taking it further
Introduction
A previous request has been for inline plus/minus Bar charts - much like sparklines. Both of these are possible by using the configuration options available to make the charts appear as desired. The main thing is to use a smaller canvas (or SVG) size to make the chart fit inline with your text.
Inline Bar charts
Here the colors are defined by looping through the data beforehand to determine whether a value is positive or negative. When this is ascertained the color can be set appropriately and also the colorsSequential option is set to true. This is an example of an inline Bar chart:
CANVAS:
<canvas id="cvs" width="50" height="20" style="background-color: white">[No canvas support]</canvas>
<script>
data = [10,9,8,-8,-9,-10];
colors = [];
// Create the colors
for (var i=0; i<data.length; ++i) {
colors.push(data[i] > 0 ? '#0f0' : 'red');
}
new RGraph.Bar({
id: 'cvs',
data: data,
options: {
xaxisPosition: 'center',
yaxisScale: false,
yaxis: false,
backgroundGrid: false,
colors: colors,
colorsSequential: true,
marginLeft: 2,
marginRight: 2,
marginTop: 2,
marginBottom: 2,
colorsStroke: 'rgba(0,0,0,0)',
marginInner: 1,
xaxisTickmarksLength: 0
}
}).draw();
</script>
SVG:
<div id="cc" style="width: 50px; height: 20px"><div>
<script>
data = [10,9,8,-8,-9,-10];
colors = [];
// Create the colors
for (var i=0; i<data.length; ++i) {
colors.push(data[i] > 0 ? '#0f0' : 'red');
}
new RGraph.SVG.Bar({
id: 'cc1',
data: data,
options: {
yaxisScaleMin: 'mirror',
yaxisScale: false,
yaxis: false,
backgroundGrid: false,
colors: colors,
colorsSequential: true,
marginLeft: 2,
marginRight: 2,
marginTop: 2,
marginBottom: 2,
colorsStroke: 'rgba(0,0,0,0)',
marginInner: 1,
xaxisTickmarksLength: 0
}
}).draw();
</script>
Inline Line charts (sparklines)
With sparklines the process is much the same except without the loop for the colors.
CANVAS:
<canvas id="cvs" width="50" height="20">[No canvas support]</canvas>
<script>
new RGraph.Line({
id: 'cvs',
data: [4,5,3,4,2,3,5,4,5,4,3,5,3],
options: {
marginLeft: 1,
marginRight: 1,
marginTop: 1,
marginBottom: 1,
backgroundGrid: false,
xaxis: false,
yaxis: false,
linewidth: 1,
tickmarksStyle: null,
yaxisScaleMax: 10,
yaxisScale: false,
shadow: false
}
}).draw();
</script>
SVG:
<div id="cc" style="width: 50px; height: 20px"><div>
<script>
new RGraph.SVG.Line({
id: 'cc',
data: [4,5,3,4,2,3,5,4,5,4,3,5,3],
options: {
marginLeft: 1,
marginRight: 1,
marginTop: 1,
marginBottom: 1,
backgroundGrid: false,
xaxis: false,
yaxis: false,
linewidth: 1,
yaxisScaleMax: 10,
yaxisScale: false,
shadow: false
}
}).draw();
</script>
Inline Pie charts
CANVAS:
<canvas id="cvs" width="30" height="20">[No canvas support]</canvas>
<script>
new RGraph.Pie({
id: 'cvs',
data: [1,1,1,1],
options: {
colors: ['black','#ccc','red','#77f'],
marginTop: 1,
marginBottom: 1,
marginLeft: 1,
marginRight: 1,
linewidth: 0,
colorsStroke: '#0000',
shadow: false
}
}).draw();
</script>
SVG:
<div id="cc" style="width: 30px; height: 20px"><div>
<script>
new RGraph.SVG.Pie({
id: 'cc',
data: [1,1,1,1],
options: {
colors: ['black','#ccc','red','#77f'],
marginTop: 1,
marginBottom: 1,
marginLeft: 1,
marginRight: 1,
linewidth: 0,
colorsStroke: '#0000',
shadow: false
}
}).draw();
</script>
Inline Waterfall charts
CANVAS:
<canvas id="cvs" width="50" height="20">[No canvas support]</canvas>
<script>
new RGraph.Waterfall({
id: 'cvs',
data: [1,3,6,-5,4,8,-7],
options: {
colors: ['black','red','blue'],
marginTop: 1,
marginBottom: 1,
marginLeft: 1,
marginRight: 1,
linewidth: 1,
xaxis: false,
yaxis: false,
yaxisScale: false,
shadow: false,
backgroundGrid: false,
colorsStroke: '#0000',
colorsConnectors: '#0000'
}
}).draw();
</script>
SVG:
<div id="cc" style="width: 50px; height: 20px"><div>
<script>
new RGraph.SVG.Waterfall({
id: 'cc',
data: [1,3,6,-5,4,8,-7],
options: {
colors: ['black','red','blue'],
marginTop: 1,
marginBottom: 1,
marginLeft: 1,
marginRight: 1,
marginInner: 1,
linewidth: 1,
xaxis: false,
yaxis: false,
yaxisScale: false,
shadow: false,
backgroundGrid: false,
colorsStroke: '#0000',
colorsConnectors: '#0000'
}
}).draw();
</script>
Taking it further
One option if you're finding the charts too small, or you wish to enlarge them when clicked is to add an anchor (link) around the canvas so that when clicked a ModalDialog is shown with a larger version of the chart - a detail view if you like. There's a HOWTO document about using the ModalDialog here.