Line Chart Library

odi.linechart.js (22kB; 14kB 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 = ODI.linechart(document.getElementById('chart'),properties);
		

Chart properties

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

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

Axis properties

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:

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.

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.