The drawing API Marker3 object API reference

The color used to fill the circle.

A new feature in 2016 that allows you to use dom text in place of canvas text. It makes for much higher quality text that you can also select if desired (for copy/paste operations). It won't fit all situations and you can read more about the DOM text feature here. A good way to control borders/margins/padding etc is not to set them on the canvas but to wrap the canvas in a div and set them on that like this:

<div style="margin-left: 50px; display: inline-block">
    <canvas id="cvs" width="650" height="250"></canvas>
</div>

This allows you to add custom text to your chart if you want to. There's a dedicated page that describes this option here.

The delay used to separate animation frames. In effect, this dictates the speed of the animation.

By default this is null but you can set it to a function if you wish so that function is called to do the chart highlighting. It's passed the shape object as an argument.

By default, the highlight that's applied to the chart when a tooltip is shown fades in but using this property you can disable that if you prefer and the highlight will be applied without a fade effect.

This is the color that the circle is highlighted in (the fill) when the tooltip is shown. Because this Marker is animated and is constantly being redrawn this setting doesn't have a visible effect.

This option is new to version 6.22 and allows you to specify event listener functions for the various RGraph events (eg beforedraw, firstdraw, draw etc). There's an example of its usage in the events section below. It's an object and the properties are the names of the events. The values of those properties can either be the function that you want to attach to the event or an array of functions that you want to run.

Clipping allows you to restrict whatever is drawn to the canvas to a particular area. For example if you specify lefthalf to the clip property then you'll see only the left half of the canvas - usually the left half of the chart, though this depends on your margin settings. You can read more information about this option and a list of the possible values that are available to you on the clipping documentation page.

Whether scaling is enabled or not. Scaling makes the canvas look a lot better and it's recommended that this be left enabled unless you want the old, pre-version 7 style of antaliasing.

How much the canvas is scaled by when it's scaled. The default value of 2 is the recommended amount.

If for some reason you want the old style of antialiasing then you can set this property to true. You will also need to turn off scaling by setting the scale property to false. You might not see a huge difference on charts that don't have straight lines (eg circular gauges and meters).

This allows you add standard CSS styles to the document from within the chart configuration. You may want to keep your styles that are related to your chart (for example, the tooltip styles) together with the chart configuration.. The syntax looks like:

new RGraph.Bar({
    id: 'cvs',
    data: [4,8,6,5,3,5,6,4,1,5],
    options:
        style: [
            '.RGraph_tooltip h2 {color: gray; font-style: italic;}',
            '.RGraph_tooltip p {color: #eee; font-size: 10pt;}'
        ]
    }
}).draw();

This can be used to get properties if necessary. It's normally used after the chart is drawn if you need to get parameters (if you're doing custom coding for example).

This can be used to set properties if necessary. It's normally used after the chart is drawn if you need to set additional parameters or change them. The return value is the chart object so you can chain your set calls if you wish.

This method adds an event listener (such as beforedraw or draw) to the object. It operates similarly to the jquery on function. The first argument is the event that you wish to attach to and the second is the listener function. For example:

obj.on('draw', function (obj)
{
    // Put your code here
});

var obj = new RGraph.Drawing.Marker3({
    id: 'cvs',
    x: 50,
    y: 50,
    radius: 25,
}).on('draw', function (obj)
{
    // Put your draw event code here

}).on('click', function (e, shape)
{
    // Handle the click event

}).draw();

You can also use the new (added in version 6.22) events property to add events and that looks like this:

<script>
    new RGraph.Drawing.Marker3({
        id: 'cvs',
        x: 50,
        y: 50,
        radius: 25,
        options: {
             events: {
                beforedraw: function () {alert('The beforedraw event fired');},
                draw: [
                    function (obj) {alert('The first draw event listener function.');},
                    function (obj) {alert('The second draw event listener function.');}
                ]
            }
        }
    }).draw();
</script>

This function can be used to execute a function (immediately). It's not event-based (ie it doesn't run when something happens) - it just runs immediately - and only once. You might use it when you need to get something from the chart when it's drawn and then call the RGraph.redraw function. Because this function only runs once the RGraph.redraw function would not cause a loop - which would happen if you used the draw event.

obj.exec(function (obj)
{
    // Put your code here
});

This method makes it easy to get hold of the Marker3 object when it has been clicked on or hovered over. It returns an object which has the following indexes available:

object	The Marker3 object.
x	The center X coordinate of the marker.
y	The center Y coordinate of the marker.
radius	The radius of the marker.
dataset	As there's only ever one element this is always zero.
index	As there's only ever one element this is always zero.
sequentialIndex	As there's only ever one element this is always zero.
tooltip	If a tooltip is associated with the Marker3 object this will be it. id: strings are expanded for you (where the tooltip text is retrieved from the HTML tag with the matching ID).

Remember that the Marker3 object is animated so any drawing that you do on the Marker3 will be cleared when the canvas is redrawn.

<script>
    marker3.onclick = function (e, shape)
    {
        marker3.on('draw',  function (obj)
        {
            obj.path(
                'lw 10 b a % % % 0 6.29 false s black f red',
                shape.x, shape.y, shape.radius
            );
        });
    }
</script>

This event fires at the start of the draw method before anything has been done.

This event fires at the end of the draw function - but only the first time that the draw function is called.

This event fires at the end of the draw function.