The drawing API

• Introduction
• Available drawing API objects

Introduction

The RGraph Drawing api allows you to add various elements to your charts. These elements allow you to extend both the interactivity and the information presented on your charts by adding shapes to them. The elements that are available have a very similar structure to a chart library - you create and manipulate them in the same way. As well as this they support similar interactive properties - such as tooltips, the click event and the mousemove event. This makes them very useful for providing your users with extra information - much like tooltips do by themselves - and also highlighting areas on the chart.

Example usage of the drawing api is as follows:

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [4,9,1,3,2,6,5],
        options: {
            xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
            marginInner: 5,
            tickmarksStyle: 'endcircle',
            marginTop: 35,
            marginBottom: 45,
            colors: ['black'],
            xaxis: false,
            yaxis: false,
            yaxisScale: false,
            textSize: 14
        }
    }).draw();
    
    marker1 = new RGraph.Drawing.Marker1({
        id: 'cvs',
        x: line.coords[3][0],
        y: line.coords[3][1],
        radius: 15,
        text: 'W',
        options: {
            tooltips: [
                '<b>Winner!</b><br />Mark sold by far the most' +
                'widgets and as a result is the winner!'
            ],
            highlightFill: 'rgba(255,0,0,0.7)'
        }
    }).draw();
    
    circle = new RGraph.Drawing.Circle({
        id: 'cvs',
        x: line.coords[2][0],
        y: line.coords[2][1], 15,
        radius: 20,
        options: {
            colorsStroke: 'black',
            colorsFill: 'rgba(255,0,0,0.7)'
        }
    }).on('click', function (e, shape)
    {
        alert('[NOTICE] Also worthy of note is the low point of the competition - which was wednesday')
    }).on('mousemove', function (e, shape)
    {
        e.target.style.cursor = 'pointer';
    }).draw();


    image = new RGraph.Drawing.Image({
        id: 'cvs',
        x: line.get('marginLeft') + 5,
        y: line.canvas.height - line.get('marginBottom') - 5,
        src: '/images/logo.png',
        options: {
            valign: 'bottom',
            tooltips: [
                '<b>Information</b><br />The image drawing object could be ' +
                'used as a method of<br />' +
                'providing more information to your users.'
            ],
            tooltipsEvent: 'onclick'
        }
    }).draw();
</script>

Available drawing API objects

• Background
  Don't want to use the chart's background (eg the grid)? Use this standalone grid. It has all of the features of a chart's built-in background along with a few extra capabilities that provide event handling (so you can add click and mousemove event listeners to it).
  
  
• Circle
  A circle object that could be used as a button or to highlight a region on your chart. A pretty standard circle that you can control the dimensions of and add event listeners to is desired.
  
  
• Image
  Add an image to your chart that you can use as decoration, a background or a button. You can add event listeners to it that allow you to turn your image into a button if you wish.
  
  
• Line
  You can use this Line object to add interactive lines to your chart - consisting of two or more points. You can add event listeners to it that allow you to make the line interactive and tooltips too.
  
  
• Marker1
  A marker that can be used to highlight a point on your chart. You could use this to add extra information to your chart - by giving this marker a tooltip with the information in.
  
  
• Marker2
  Like the Marker1 object above, this is a marker that you can use on your charts to highlight a point. It supports events and tooltips so you can add more information to it.
  
  
• Marker3
  An animated marker that you can use on your chart. Similar to the above Marker objects this one is slightly different because it's animated. This marker is best combined with the text object as you can see from the example.
  
  
• Poly
  A polygon object that you use to make your own shapes. You can use this to create your own buttons or highlight a particular area on your chart.
  
  
• Rectangle
  A rectangle that you can use to highlight an area on your chart or perhaps as a button. Like the circle primitive the rect supports events and tooltips so allows you to give your charts extra functionality.
  
  
• Text
  Use this object to add your own text to your chart (with its own click listeners and events etc). The text can be completely controlled (appearance etc) and as mentioned you can add extra functionality by utilising the event listeners.
  
  
• X-axis
  Add an extra x-axis to your chart. Extra X-axes can be used to add more information to your charts such as showing groups that apply to the individual elements.
  
  
• Y-axis
  Add an extra y-axis to your chart. Multiple Y-axes can be entirely independent scale-wise so if your chart is showing multiple values that need different scales this is the object to use.