Bar chart API reference

• Example
• Properties
• Methods
• Errorbars
• The obj.data_arr array
• The coordinates properties
• Events
• Effects

Example

<script>
    data   = [[3,5,6],[8,4,5],[4,9,6]];
    labels = ['Richard', 'Alex', 'Nick'];

    new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            xaxisTickmarksCount: 0,
            xaxisLinewidth: 5,
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            yaxis: false,
            colors:[
                'Gradient(#faa:red)',
                'Gradient(#afa:green)',
                'Gradient(#aaf:blue)'
            ],
            textSize: 24,
            xaxisLabels: '%{global:labels[%{index}]}',
            marginLeft: 45,
            backgroundGrid: true,
            marginInner: 50,
            tooltips: '<b>Results</b><br>%{key}',
            tooltipsFormattedKeyLabels: ['06:00','12:00','18:00'],
            tooltipsFormattedKeyColors:['red','green','blue'],
            tooltipsFormattedUnitsPost: '%',
            tooltipsCss: {
                fontSize: '16pt',
                textAlign: 'left'
            }
        }
    }).draw();
</script>

Properties

You can use these properties to control how the chart appears. You can set them by including them in the options section of the configuration as shown above.

• Background properties
• X-axis properties
• Y-axis properties
• Color properties
• Margin properties
• Labels and text properties
• Title properties
• Shadow properties
• Key properties
• Interactive features properties
• Miscellaneous properties

function myFormatter(opt)
{
    var num = Number(opt.number) * 5;

    return String(num)
}
obj.set('yaxisScaleFormatter', myFormatter);

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

tooltipsFormattedKeyColorsCss : {
    border: "1px solid #ddd";
}

tooltipsFormattedListItems: [
    ['Bill','Jerry','Berty'], // First tooltip
    ['Gill','Carrie','Lucy'], // Second tooltip
    ['Pob','Nobby','Hilda']   // Third tooltip
]

.RGraph_tooltip ul#rgraph_formatted_tooltips_list li {
    text-align: left;
    color: yellow;
}

tooltipsPointerCss: {
    borderLeft: 'gray 2px solid',
    borderBottom: 'gray 2px solid'
}

tooltipsCss: {
    fontFamily: 'Verdana',
    fontSize: '20pt',
    backgroundColor: 'black',
    color: 'white'
}

combinedEffectOptions: '{frames: 300}'

obj.set('horizontalLines', [
    {
        value: 'average',
        dashed: true,
        labelPosition:'left bottom'
    },
    {
        value: 10.48,
        label:'Value (%{value})',
        labelValueDecimals: 2,
        labelValueThousand: ',',
        labelValuePoint:'.',
        labelValueUnitsPre:'',
        labelValueUnitsPost:''
        //labelValueFormatter: function (opt)
        //{
        //    return opt.number;
        //}
    }
]);

Methods

.on('draw', function (obj)
{
    // Put your code here. Depending on the event, you can sometimes
    // get meta information from the RGraph registry. See the list
    // of event types below for more detail.
});

<script>
    obj.canvas.onclick = function (e)
    {
        RGraph.redraw();
    
        var canvas  = e.target,
            obj     = canvas.__object__,
            shape   = obj.getShape(e);

        if (shape) {
            var x      = shape.x,
                y      = shape.y,
                width  = shape.width,
                height = shape.height;
            
            obj.path(
                'b r % % % % s black f red',
                x, y, width, height
            );
        }
    }
</script>

bar.canvas.onclick = function (e)
{
    var obj   = e.target.__object__;
    var value = obj.getValue(e);
    
    // ...
}

Errorbars

Errorbars can allow you to show an upper and lower range for a particular bar like the bar-errorbars.html example page shows in the download archive. You can specify errorbars like this:

bar = new RGraph.Bar({
    id: 'cvs',
    data: [12,18,10,9,6,20,18],
    options: {
        xaxisLabels: ['Monday','Tuesday','Wednesday','Thursday','Friday','Saturday','Sunday'],
        shadow: false,
        colors: ['red'],
        colorsStroke: 'rgba(0,0,0,0)',
        errorbars: [ [5,3], [2,6], [5,15,'blue',5,45] ],
        errorbarsLinewidth: 2,   // The default linewidth
        errorbarsColor: 'gray',  // The default color
        errorbarsCapped: true,   // Whether the ends of the errorbar have terminating lines
        errorbarsCappedWidth: 14 // The default width of the caps
    }                
}).draw();

This would give you three errorbars and the elements of each errorbar array are (each one is optional):

• The upper extent of the errorbar
• The lower extent of the errorbar
• The color of this errorbar
• The linewidth of this errorbar
• The (total) width of the cap at the end of this errorbar

The obj.data_arr array

The coordinates properties

As with the majority of the RGraph objects the coordinates of the various shapes are recorded and stored in various properties on the RGraph chart object. The Bar chart is no different and has these properties available to you:

• obj.coords A straight-forward single dimension array of all of the coordinates of all of the bars that are drawn on the chart.
  
  
• obj.coords2 A multi-dimensional array that's used for when you're showing a grouped or stacked chart. Indexed first by the group and then by the bar in that group. So on a grouped chart which has two groups with 3 bars in each group you would get the following entries in the obj.coords2 array:
  • obj.coords2[0][0]
  • obj.coords2[0][1]
  • obj.coords2[0][2]
  • obj.coords2[1][0]
  • obj.coords2[1][1]
  • obj.coords2[1][2]
  
  
• obj.coordsText This holds the coordinates of all of the text that has been added to the chart. Even if the text is blank (ie no text) then the coordinates will be added to this variable.

Events

RGraph supports custom events that allow you to easily add interactivity to your charts if required. The following events are available:

new RGraph.Bar({
    id: 'cvs',
    data: [4,8,6,3,5,8,9],
    options: {
    }
}).on('draw', function (obj)
{
    console.log('The draw event has fired');
    
}).draw();

Effects

There's a stopAnimation() function that you can use to stop an animation immediately if you need to. There's a line chart demo called demos/line-effects-stop-animation.html in the download archive that demonstrates the use of this function.

• The wave effect (effects-bar-wave.html in the download archive)
• The grow effect (effects-bar-grow.html in the download archive)
• The colorwave effect (effects-bar-color-wave.html in the download archive)

<script>
    //
    // The optional callback function that's called when the effect is complete
    //
    function myCallback (obj)
    {
        // ...
    }

    obj = new RGraph.Bar({
        id: 'cvs',
        data: [3,4,7,5,6,9,8],
        options: {
            marginLeft: 35,
            marginInner: 60
        }
    }).wave({frames: 60}, myCallback);
    // .grow({frames: 60}, myCallback);
</script>