RGraph: Line chart documentation

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

The example file is here. 

<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.border', 'rgba(255,255,255,1)');
        line.Set('chart.gutter', 40);
        line.Draw();
    }
</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.

Available properties

You can use these properties to control how the bar graph apears.

chart.background.barcolor1 The color of the background bars (1 of 2).
Default: #dce5fe		 chart.background.barcolor2 The color of the background bars (2 of 2).
Default: #f6f6f6
chart.background.grid Whether to show the background grid or not.
Default: true		 chart.background.grid.color The color of the background grid.
Default: #eee
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.colors An array of line colors.
Default: ['#f00', '#0f0', '', '#00f', '#f0f', '#ff0', '#0ff']
chart.border.color The color of the border of the graph. If you're not displaying the background grid, you will probably want to set this to false (ie turn it off).
Default: #090 		chart.hmargin The size of the horizontal margin. This is on the inside of the axes.
Default: 0
chart.tickmarks What kind of tickmarks to use on the graph. This can be:
  • circle
  • filledcircle
  • endcircle
  • square
  • endsquare
  • filledsquare
  • filledendsquare
  • tick
  • halftick
  • endtick
  • cross
  • borderedcircle
  • arrow
  • filledarrow

Note that "arrow" and "filledarrow" look better with a thinner (1 or 2) linewidth setting.

Default: null 		chart.background.hbars An array of information stipulating horizontal coloured bars. You can use these to indicate limits. Eg: myLine.Set('hbars', [[75, 10, 'yellow'], [85, 15, 'red']]); This would give you two bars, one red and a lower yellow bar. The units correspond to your scale, and are the starting point and the height.
Default: null
chart.ticksize The size of the tick marks. This only affects certain styles of tickmarks.
Default: 3		 chart.gutter The gutter of the graph. This is the bit of the graph that the labels are in.
Default: 25
chart.tickdirection Whether the ticks are above or below the axis.
Default: -1 (-1 is below, 1 is above)		 chart.background.grid.hsize The horizontal size of the grid.
Default: 25
chart.background.grid.vsize The vertical size of the grid.
Default: 25		 chart.filled Whether the area under the graph is filled or not. This looks best when there is no horizontal margin.
Default: false
chart.xaxispos The position of the X axis. It can be either bottom or center.
Default: bottom		 chart.text.size The height/size of the text.
Default: 12
chart.shadow If true a shadow will be applied to the line.
Default: false		 chart.shadow.color The colour of the shadow.
Default: rgba(0,0,0,0.5)
chart.shadow.offsetx The X offset in pixels for the shadow.
Default: 3		 chart.shadow.offsety The Y offset in pixels for the shadow.
Default: 3
chart.shadow.blur The severity of the shadow blurring effect.
Default: 3
 chart.xticks The number of X tickmarks.
Default: null (linked to number of datapoints)
chart.tooltips These are tooltips for the line(s). It should be an array of tooltips. If you have multiple lines, simply pass multiple arrays to the Set() method. Eg: 
myObj.Set('tooltips', ['Tooltips'])

Default: [] (An empty array) 		chart.title The title of the chart.
Default: none
chart.stepped Draws the line as stepped. Useful for showing stock performance for example.
Default: false 		chart.key An array of key information.
Default: [] (An empty array)
chart.key.background The colour of the key background. Typically white, you could set this to something like rgba(255,255,255,0.7) to allow people to see things behind it.
Default: white		 chart.key.position Determines the position of the key.Either graph (default), or gutter.
Default: graph
chart.background.grid.width The width of the background grid.
Default: 1		 chart.text.angle The angle of the horizontal text labels (at the bottom of the graph). This can be one of three values - 0, 45 or 90.
Default: 0 (Horizontal)
chart.noaxes Whether the axes are drawn
Default: false (the axes ARE drawn) 		chart.units.post The units (if any) that the Y axis is measured in (gets appended to the number)
Default: none
chart.units.pre The units (if any) that the Y axis is measured in (gets preppended to the number)
Default: none		 chart.key.shadow Whether a small drop shadow is applied to the key.
Default: false
chart.tooltip.effect The animated effect used for showing tooltips. Can be either fade or expand.
Default: fade 		chart.scale.decimals Determines the precision of the numbers used as the scale.
Default: 0
chart.ymax The optional maximum Y scale value. If not specified then it will be calculated.
Default: null (It's calculated)		 chart.tickmarks.dot.color This is the color of the BORDER around the dot/borderedcircle style tickmarks.
Default: #fff
chart.crosshairs If true, you will get a crosshair centering on the current mouse position.
Default: false		 chart.crosshairs.color The color of the crosshairs.
Default: #333
chart.contextmenu An array of context menu items. Unlike the bar chart, you CAN have context menus at the same time as tooltips. More information on context menus is here.
Default: [] (An empty array) 		chart.yaxispos Specifies the Y axis position. Can be left or right.
Default: left
chart.annotatable Whether annotations are enabled for the chart (ie you can draw on the chart interactively.
Default: false 		chart.annotate.color If you do not allow the use of the palette, then this will be the only colour allowed for annotations.
Default: black
chart.fillstyle A single color or an array of colours that filled line charts will use.

Important: This used to be a string, and still can be, but can now also be an array.
Default: null		 chart.title.vpos This allows you to completely override the vertical positioning of the title. It should be a number between 0 and 1, and is multiplied with the gutter and then used as the vertical position. It can be useful if you need to have a large gutter.
Default: null
chart.title.color The color of the title.
Default: black		 chart.axesontop A minor option, this sets the axes to be redrawn after the graph has been drawn. This is only useful in a certain set of circumstances - the graph is filled and the line width is small.
Default: false
chart.filled.range This is useful for indicating a range. Exactly two datasets are required, with the space between them filled. This is useful for indicating a range.The line chart examples page demonstrates this in action.
Default: false 		chart.variant At present this can only be 3d, and gives a small 3D effect.
Default: null
chart.background.grid.border Determines whether a border line is drawn around the grid.
Default: true
chart.background.grid.hlines Determines whether to draw the horizontal grid lines.
Default: true		 chart.background.grid.vlines Determines whether to draw the vertical grid lines.
Default: true

You can set these properties by using the Set() method. Eg:

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