RGraph: HTML5 Javascript charts library - Line charts documentation

Line charts, along with Bar charts, are probably the most configurable of all the charts available.

The example file is here.

• Properties
• Methods
• Combining the Line and Bar charts
• Alternative colors
• Accumulative filled Line charts
• Custom tickmarks
• The coords2 array

<script>
    window.onload = function ()
    {
        var data = [10,4,17,50,25,19,20,25,30,29,30,29];
    
        var line = new RGraph.Line("myLine", data);
        line.Set('chart.background.barcolor1', 'rgba(255,255,255,1)');
        line.Set('chart.background.barcolor2', 'rgba(255,255,255,1)');
        line.Set('chart.background.grid.color', 'rgba(238,238,238,1)');
        line.Set('chart.colors', ['rgba(255,0,0,1)']);
        line.Set('chart.linewidth', 2);
        line.Set('chart.filled', true);
        line.Set('chart.hmargin', 5);
        line.Set('chart.labels', ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']);
        line.Set('chart.gutter.left', 40);
        line.Draw();
    }
</script>

Properties

You can use these properties to control how the Line chart apears. You can set them by using the Set() method. Eg:

myLine.Set('name', 'value');

• Background
• Labels and text
• Margins
• Colors
• Shadow
• Interactive features
• Titles
• Key
• Scale
• Axis properties
• Zoom
• Miscellaneous

Background

Labels and text

Margins

Colors

Shadow

Interactive features

Titles

Key

Scale

function myFormatter(obj, num)
{
    return num + 'F'; // An example of formatting
}
myGraph.Set('chart.scale.formatter', myFormatter);

Axis properties

Zoom

Miscellaneous

• dot
• circle
• filledcircle
• endcircle
• square
• endsquare
• filledsquare
• filledendsquare
• tick
• halftick
• endtick
• cross
• borderedcircle (same as dot)
• arrow
• filledarrow

Note that "arrow" and "filledarrow" look better with a thinner (1 or 2) linewidth setting. Also note that now (10th August 2010) as well as a string, this can be an array of different tickmark styles.
Default: null

chart.tickmarks.dot.color
This is the color of the BORDER around the dot/borderedcircle style tickmarks.
Default: #fff

chart.tickmarks.linewidth
This is the width of the line used when drawing the tickmarks. By default this is the same as the chart.linewidth setting.
Default: null

chart.stepped
Draws the line as stepped. Useful for showing stock performance for example.
Default: false

chart.linewidth
The width of the line (ie the actual line on the chart). Note: If your line is stepped and filled, and you don't want a trailing line indicating the last value, you can set this to zero.
Default: 1

chart.variant
At present this can only be 3d, and gives a small 3D effect.
Default: null

chart.animation.unfold.x
This is used by the Unfold Line chart animation and dictates whether the X value is unfolded.
Default: false

chart.animation.unfold.y
This is used by the Unfold Line chart animation and dictates whether the Y value is unfolded.
Default: true

chart.animation.unfold.initial
This property can be used to set the initial factor for the Unfold animation. Setting this to a value less than one will cause the line to expand outwards, whilst a value greater than one will cause the line to contract towards the correct values.
Default: 2

chart.chromefix
Since version 6, Chrome has had a shadow bug, which becomes apparent when you use shadow blurring. This value defaults to true and means that RGraph will skirt the bug with a small fix.
Default: true

chart.highlight.stroke
If you use tooltips, this controls the colour of the highlight stroke.
Default: black

chart.highlight.fill
If you use tooltips, this controls the colour of the highlight fill.
Default: rgba(255,255,255,0.5)

chart.curvy
If you prefer - this draws a more cuvy chart. Because of the curves these charts are not exact, and the inaccuracy increases with a greater curve factor (controlled by the next property). Being new, this property may not work with all the line chart features and should be used with caution.
Default: false

chart.curvy.factor
This controls the severity of the curves when the above property is used. It can be a decimal from 0 (not curvy at all) to 0.5 (quite curvy).
Default: 0.25

Methods

• The chart object
• The X coordinate
• The Y coordinate
• The numerical index of the point. This corresponds (for example) to the tooltips array, and the coordinates array

<canvas id="cvs" width="600" height="300">[No canvas support]</canvas>

<script src="RGraph.common.core.js"></script>
<script src="RGraph.line.js"></script>

<script>
    myGraph = new RGraph.Line('cvs', [10,4,2,4,1]);
    myGraph.Set('chart.hmargin', 10);
    myGraph.Set('chart.tickmarks', 'endcircle');
    myGraph.Set('chart.labels', ['Fred','John','Kev','Lou','Pete']);
    myGraph.Draw();


    RGraph.Register(myGraph);
    
    myGraph.canvas.onmousemove = function (e)
    {
        RGraph.FixEventObject(e);

        var canvas  = e.target;
        var context = canvas.getContext('2d');
        var obj     = e.target.__object__;
      
        // This is the new method which simplifies getting coordinates
        var point = obj.getPoint(e);
      
      
        if (point) {
            
            canvas.style.cursor = 'pointer';
            
            // Is this the same tooltip as the one (if any) that's already being shown
            if (RGraph.Registry.Get('chart.tooltip') && RGraph.Registry.Get('chart.tooltip').__index__ == point[3]) {
                return;
            }

            // Start afresh
            RGraph.Redraw();

            // Show the tooltip
            RGraph.Tooltip(canvas, obj.Get('chart.labels')[point[3]], e.pageX, e.pageY, point[3]);

            // Highlight the point
            context.strokeStyle = 'gray';
            context.fillStyle = 'white';
            context.beginPath();
            context.moveTo(point[1], point[2]);
            context.arc(point[1], point[2], 2, 0, 6.26, 0);
            context.stroke();
            context.fill();
            
            return;
        }
        
        canvas.style.cursor = 'default';
    }
    
    window.onclick = function ()
    {
        RGraph.Redraw();
    }
</script>

Combining the Line and Bar charts

You can combine the Bar and Line charts with a bit of magic. It's actually quite easy to do. Find out more here. In the same vein, you can have Y axes on both the left and right.

Alternative colors

Instead of a string stipulating the color, each element of the colors array can itself be a two element array, stipulating the up color, and the down color. To use alternating colors you must also stipulate the alternate property:

myLine.Set('chart.colors.alternate', true);
myLine.Set('chart.colors', ['red', ['blue', 'yellow'], 'green]);

Accumulative filled Line charts

The default behaviour of filled Line charts is to "stack" the lines on top of each other. This allows them all to be totally visible, no matter what (unless a line has a zero value of course). If this is not desired, then there is an option (chart.filled.accumulative - true/false) to change this behaviour so the lines are plotted "as-is". Keep in mind that if you set this option to false (ie the Lines are plotted as-is) it may be wiser to use semi-transparent colors or some parts of data sets (or even entire data sets) may be hidden by others. There's a comparison of the different modes here.

Custom tickmarks

If none of the available tickmark styles are suitable, you can instead specify a function object that draws the tickmark, enabling you to draw the tickmark yourself. For example:

<script>
    line.Set('chart.tickmarks', myTick);

    /**
    * The function that is called once per tickmark, to draw it
    * 
    * @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)
    {
        // Draw your custom tick here
    }
</script>

The coords2 array