HOWTO: Get custom tickmarks on your Line or Scatter
- The basic chart
- The chart with the image drawing API object added
- The Scatter chart using this technique
Previously you could add tickmarks to your Line charts
in RGraph by using the configuration options available to you
(and you still can of course).
Now though it has got much easier with the addition of the image drawing object. This is not specific to the Line chart
but is a regular drawing api
object
which can be used to show images as tickmarks. The advantage over standard tickmarks
is that these objects can be then assigned either tooltips
or click
/mousemove
functions to provide
extra interactivity.
The basic chart
Here is the chart before the image object
has been added. It's just an average - quite simple - Line chart
that doesn't
do anything special. Next we can utilise the
Line charts
coordinates array
in order to
then use those coordinates to position
the image object
.
<script> line = new RGraph.Line({ id: 'cvs', data: [4,8,6,3,5,4,9,5,6,4,8,7], options: { backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, marginInner: 15, shadow: true, shadowBlur: 0, linewidth: 10, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'], textSize: 16 } }).draw(); </script>
The chart with the image drawing API object added
Here is the chart with the image drawing object
added. It's
positioned using the coordinates from the Line chart
and
because, by default, it's aligned to the top left, half of
the width and height are removed to make it appear central.
Two event listeners are then added - one to the click
event so
that when you click the image an alert
appears - and one
to the mousemove
event so that the cursor changes to the hand
when you move the mouse over it.
<script>
line = new RGraph.Line({
id: 'cvs',
data: [4,8,6,3,5,4,9,5,6,4,8,7],
options: {
backgroundGridVlines: false,
backgroundGridBorder: false,
xaxis: false,
yaxis: false,
marginInner: 15,
shadow: true,
shadowBlur: 0,
linewidth: 10,
xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'],
textSize: 16
}
}).draw();
x = line.coords[5][0] - 16
y = line.coords[5][1] - 16
// Now add the image
img = new RGraph.Drawing.Image({
id: 'cvs',
x: x,
y: y,
src: '/images/star.png',
options: {
}
}).draw().on('click', function (e, shape)
{
alert('This alert was triggered by the click listener');
}).on('mousemove', function (e, shape)
{
return true;
});
</script>
The Scatter chart using this technique
In the same way, the Scatter chart
can be made to use this technique as
shown in the example below. Here the images are drawn at
the Scatter chart
coordinates - thereby overwriting the normal tick
marks.
<script> // First create the chart scatter = new RGraph.Scatter({ id: 'cvs', data: [[150,12],[168,34],[112,52],[23,26]], options: { xaxisScaleMax: 365, xaxisLabels: ['Q1','Q2','Q3','Q4'], backgroundGridVlines: false, backgroundGridBorder: false, xaxis: false, yaxis: false, textSize: 16 } }).draw(); for (i=0; i<scatter.coords[0].length; ++i) { x = scatter.coords[0][i][0] - 16 y = scatter.coords[0][i][1] - 16 // | | | | // | | | Remove half the width/height so the image appears centered // | | The X (0) and Y (1) coordinates // | The point in the set of data // The set of data - the Scatter chart can accept more than one // Now add the image img = new RGraph.Drawing.Image({ id: 'cvs', x: x, y: y, src: i >= 2 ? '/images/star.png' : '/images/yellow_exclamation2.png', }).draw(); } </script>