HOWTO: Use images as tickmarks
You can use image tickmarks by just specifying the location of the image using one of the supported formats (one that RGraph can recognise as an image URL). This makes using images as tickmarks much easier. It looks like this:
obj.set({tickmarks: 'image:/images/tick.png'}); // Starts with image: prefix // obj.set({tickmarksStyle: '../images/tick.jpg'}); // Starts with ../ // obj.set({tickmarksStyle: '/images/tick.jpg'}); // Starts with / // obj.set({tickmarksStyle: 'data: ...'}); // Starts with data: // obj.set({tickmarksStyle: 'images/tick.png'}); // Starts with images/
Some example code:
<script>
line = new RGraph.Line({
id: 'cvs',
data: [4,3,8,4,5,6,8,9,4,7,8,8],
options: {
tickmarksStyle: 'image:/images/tickmark.png',
marginInner: 10,
textSize: 14
}
}).draw()
<script>
The previous way of using images as tickmarks is described below.
Using image-based tickmarks with the Line chart
<script> // // The function that is called once per tickmark, to draw it once // the tickmark image has loaded. // // @param object obj The chart object // @param array data The entire line data // @param number value The individual points value // @param number index The current index, in the data array // @param number x The X coordinate // @param number y The Y coordinate // @param string color The color of the line // @param number prevX The previous X coordinate // @param number prevY The previous Y coordinate // function myTick (obj, data, value, index, x, y, color, prevX, prevY) { // Create the image var img = new Image(); img.src = '../images/tickmark.png'; // Draw the image on to the canvas when it has loaded img.onload = function () { // Keep in mind that "this" refers to the image obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2)); } } line = new RGraph.Line({ id: 'cvs', data: [4,3,8,4,5,6,8,9,4,7,8,8], options: { tickmarksStyle: myTick, textSize: 14, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] } }).draw() </script>
Using image-based tickmarks with the Scatter chart
The Scatter chart
is slightly different simply because there are X and Y coordinates to take into account.
<script> // // The function that is called once per tickmark, to draw it // // @param object obj The chart object // @param object data The chart data // @param number x The X coordinate // @param number y The Y coordinate // @param number xVal The X value // @param number yVal The Y value // @param number xMax The maximum X scale value // @param number xMax The maximum Y scale value // @param string color The color of the tickmark // function myTick2 (obj, data, x, y, xVal, yVal, xMax, yMax, color) { var img = new Image(); img.src = '../images/tickmark.png'; img.onload = function () { obj.context.drawImage(this, x - (this.width / 2), y - (this.height / 2)); } } scatter = new RGraph.Scatter({ id: 'cvs', data: [[0,0],[5,16],[10,14],[15,24],[20,23],[25,32],[30,36],[35,41],[40,45],[45,48]], options: { tickmarksStyle: myTick2, xaxisScaleMax: 50, yaxisScaleMax: 100, xaxisScale: true, textSize: 14, xaxisLabels: ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'] } }).draw() </script>
Note
Remember that you could, if you wanted to, use different tickmark images for different points. Here the custom functions all use the same image (a star) but this is not a requirement - you could use different tickmarks based on the value.