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.
// 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);
When creating a new line chart you can set chart properties:
left
- the edge of the chart from the left-side of the chart arearight
- the edge of the chart from the right-side of the chart areatop
- the edge of the chart from the top-side of the chart areabottom
- the edge of the chart from the bottom-side of the chart areaaxis
- properties about the axesaxis.x
- properties for the x-axis (see below)axis.y
- properties for the y-axis (see below)key
- an object defining a keykey.show
- is a key visible (default = false
)You can also update the properties of the chart later using chart.setProperties(props)
.
label
- a title for the axisline
- an object defining the axis lineline.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 chartmax
- hardcode a maximum for the chartgrid
- an object defining the gridgrid.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/labelslabels.value
- an object describing the label for value
labels.value.label
- a string for the labellabels.value.fill
- a hex/rgb colour for the label filllabels.value.length
- the length of the ticklabels.value.align
- top
or bottom
(default) for the x-axis or left
(default) or right
for the y-axis tick markslabels.value.dx
- shift the label position horizontallylabels.value.dy
- shift the label position verticallyYou 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 pointspoints.show
- a boolean to set the point visibility (default = true)points.color
- the hex/rgb colour of the pointspoints.size
- either a number of function for setting the size of the pointspoints.stroke-width
- set the width of the strokeline
- an object styling the lineline.show
- a boolean to set the line visibility (default = true)line.color
- the hex/rgb colour of the lineline.stroke-width
- set the width of the strokeline.stroke-dasharray
- set the stroke's dash arraytooltip
- an object styling the tooltiptooltip.label
- either a fixed string or a function that generates the tooltip text using properties of the data.Once you've set everything up you can finally draw the chart using chart.draw()
.
This is a basic chart with one 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.
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.
This chart has a dashed line by setting the stroke-dasharray
property. The tooltip is styled using CSS.
Customised tick marks.