Trace

Introduction

Trace is a dynamic JavaScript charting library which utilises d3. It supports a wide variety of data and is easily extensible with new graph types. Trace is less than 20kb (even smaller when gzipped).

Download (v0.1)

tldr;

Download the trace-min.js reference this together with d3 in your <head> section.

<!-- D3 loaded from CDN recommended by d3js.org -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script type="text/javascript" src="trace-min.js"></script>

Create a div with an ID of mychart. The following script will help to get you started, this will create a simple line chart.

new Trace.lineChart({
  'div': '#mychart',
  'data': {
    'series1': [[0,0],[1,2],[2,4],[3,6]]
  }
});

It should roughly look like the following, if it doesn’t take a look at our FAQ

Getting Started

Chart Types

Options

Name Type Default Description
div string   A CSS selector string to the containing element you would like to be populated with a chart
data object   An object containing the formatted data, please see the section on formatting for more information
width int 500 Width in Pixels
height int 500 Height in Pixels
legend boolean true Show or hide the legend
margin array [20,20,20,20] The margin around the graph [top, left, bottom, right], this is the negative space needed for labels
xTickCount int 5 The number of ticks to be shown on the x axis
yTickCount int 5 The number of ticks to be shown on the y axis
xTickFormat function   Alter the output of the labels on the x axis
yTickFormat function   Alter the output of the labels on the y axis
tooltips function   Show, hide or format the tooltips, these require CSS styling in order to be seen
colors array   An Array of hex color codes

Line Chart

The line chart is useful when you have a continuous set of data.

new Trace.lineChart(options)

Options

Name Type Default Description
showpoints boolean true Show dots for each of the points of data
interpolate string linear The interpolation between the points. See line.interpolate for more options
brush function false Using the brush will let you drag a rectangle over the chart

Please see Trace options

Formatting the Data

The line chart uses the standard model for data within Trace.

{
	'series1': [[1,1],[2,2], [3,4], [4,1]],
	'series2': [[1,2],[2,1], [3,1], [4,5]]
}

Animating

To animate the Line Chart you can pass through a new set of data to the update method.

var data = {
	'series1': [[1,2],[2,1], [3,1], [4,5]],
	'series2': [[1,1],[2,2], [3,4], [4,1]]
}
mychart.update(data);

Bar Chart

new Trace.barChart(options)

Options

Please see Trace options

Formatting the Data

The Bar Chart uses the standard model for data within Trace.

{
	'series1': [[1,1],[2,2], [3,4], [4,1]],
	'series2': [[1,2],[2,1], [3,1], [4,5]]
}

Animating

To animate the Bar Chart you can pass through a new set of data to the update method.

var data = {
	'series1': [['x1',2],['x2',1], ['x3',1], ['x4',5]],
	'series2': [['x1',1],['x2',2], ['x3',4], ['x4',1]]
}
mychart.update(data);

Pie Chart

new Trace.pieChart(options)

Options

Please see Trace options

Formatting the Data

The Pie Chart uses a slightly different format of data. Please be aware that the Pie Chart will sort the data largest -> smallest clockwise around the pie.

{
	'Male': 1,
	'Female': 2,
	'Unknown': 3
}

Animating

To animate the Pie Chart you can pass through a new set of data to the update method.

var data = {
	'Male': 3,
	'Female': 2,
	'Unknown': 1
};
mychart.update(data);

Diverging Bar Chart

Also known as a Tornado Chart, the Diverging Bar allow you to compare 2 sets of data across a common set of criteria.

new Trace.likert(options)

Options

Please see Trace options

Formatting the Data

The Diverging bar chart uses a slightly different format for the data object.

{
	'series1': [
		'yaxis1': [1,1],
		'yaxis2': [2,2]
	],
	'series2': [
		'yaxis1': [1,1],
		'yaxis2': [2,2]
	]
}