Line Chart Library

oi.linechart.js (23kB; 15kB minified; 6kB minified and gzipped) is our small, customisable, standalone, Javascript library for making simple SVG graphs. There are some examples below.

Setting up the chart

			// Set up the chart object
			// The first argument is the DOM element
			// The second argument is an object setting optional properties
			var chart = OI.linechart(document.getElementById('chart'),properties);
		

Chart properties

When creating a new line chart you can set chart properties:

• left - the edge of the chart from the left-side of the chart area
• right - the edge of the chart from the right-side of the chart area
• top - the edge of the chart from the top-side of the chart area
• bottom - the edge of the chart from the bottom-side of the chart area
• axis - properties about the axes
• axis.x - properties for the x-axis (see below)
• axis.y - properties for the y-axis (see below)
• key - an object defining a key
• key.show - is a key visible (default = false)

You can also update the properties of the chart later using chart.setProperties(props).

Axis properties

• label - a title for the axis
• line - an object defining the axis line
• line.show - a boolean value to set the visibility of the line (default = true)
• line.stroke - the stroke (default = black)
• line.stroke-width - the stroke width (default = 1)
• min - hardcode a minimum for the chart
• max - hardcode a maximum for the chart
• grid - an object defining the grid
• grid.show - a boolean value to set the visibility of the grid lines (default = false)
• grid.stroke - the stroke (default = black)
• grid.stroke-width - the stroke width (default = 1)
• labels - an object of hard-coded tick marks/labels
• labels.value - an object describing the label for value
• labels.value.label - a string for the label
• labels.value.fill - a hex/rgb colour for the label fill
• labels.value.length - the length of the tick
• labels.value.align - top or bottom (default) for the x-axis or left (default) or right for the y-axis tick marks
• labels.value.dx - shift the label position horizontally
• labels.value.dy - shift the label position vertically

Add a series

You can add a series using chart.addSeries(data,attr) where data is of the form [{x:1,y:0.1},{x:2,y:0.2},{x:3,y:0.3}] and attr is of the form:

• points - an object styling the points
• points.show - a boolean to set the point visibility (default = true)
• points.color - the hex/rgb colour of the points
• points.size - either a number of function for setting the size of the points
• points.stroke-width - set the width of the stroke
• line - an object styling the line
• line.show - a boolean to set the line visibility (default = true)
• line.color - the hex/rgb colour of the line
• line.stroke-width - set the width of the stroke
• line.stroke-dasharray - set the stroke's dash array
• tooltip - an object styling the tooltip
• tooltip.label - either a fixed string or a function that generates the tooltip text using properties of the data.

Draw the chart

Once you've set everything up you can finally draw the chart using chart.draw().

Example 1 - basic

This is a basic chart with one series.

Example 2 - multiple series

This example has two data series representing the monthly minimum and maximum temperatures in Leeds, UK. The points have a tooltip that shows the value. We show a key, gridlines on the y-axis, and remove the y-axis line.

Example 3 - update series

This chart displays randomly generated data and we define the scale on the y-axis. We can update the data with an animation by setting animation-duration on the chart with CSS. We'll make the y-axis gridlines silver.

Randomise data

Example 4 - dashed line, label alignment, and style tooltip

This chart has a dashed line by setting the stroke-dasharray property. The tooltip is styled using CSS.

Example 5 - tick marks

Customised tick marks.