Bookmark and share:

RGraph: HTML5 canvas graph library - Line chart documentation

The line chart, along with the bar chart, is probably the most configurable of all the charts available.

The example file is here.

• Properties
• Methods
• Combining the Line and Bar charts
• Alternative colors
• Custom tickmarks

<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', 40);
        line.Draw();
    }
</script>

Properties

You can use these properties to control how the bar graph 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

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.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 line graph). 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.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

Methods

• The graph 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]);

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 graph 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>