Graph

Overview

There are many good Javascript/HTML5 graphing libraries already in existence e.g. Flot, D3 and Ico. However they don't easily make the simple x-y data graphs often used in scientific environments. This is an attempt to write a small jQuery plugin that could deal with large amounts of data, error bars, logarithmic axes, page resizing, and other features. This is still under active development.

Features (so far...)

• Draws x-y graphs.
• Can include error bars.
• Both axes (or just one) can be logarithmic.
• The x-axis can be time based.
• Automatically chooses "nice" gridline spacings.
• Multiple data series can be drawn with the following options:
  • Colour
  • Points shown or hidden
  • Points can be joined with lines
  • Line widths can be defined
  • Main plot area background colour can be set
  • Hover text on data points which can include custom text with replacable elements
• The graph will resize if the graph holder resizes (useful if you have adaptive CSS styling).
• On newer versions of FF/Safari/Chrome the graph can be made full-screen by double clicking.
• The graph inherits the font size/family from its parent elemet in the DOM (i.e. you can set it in the CSS).
• Can zoom in (click/drag) and zoom out (click).

Dependencies and Limitations

For this library to work it has two dependencies:

• jquery.js - your site may already use this excellent library
• excanvas.js - this is used to allow canvas support on Internet Explorer (41.6 kB). If only it wasn't needed.

Some features (e.g. fullscreen) are experimental and will only work in the latest versions of modern browsers.

Usage

You need to include the appropriate Javascript files:

<script src="jquery.js"></script>
<!--[if IE]><script src="excanvas.js"></script><![endif]-->
<script src="jquery.graph.js"></script>

Following those you'll need:

$(document).ready(function(){
  // First we'll build an array of data sets
  var dataset = [];

  // Add a data set
  dataset.push({
    // Data in the form [{x:x1,y:y1,err:err1},...{x:xn,y:yn,err:errn}]
    data: [{x:0,y:0.1},{x:1,y:0.2},{x:2,y:0.1},{x:3,y:0.25}],
    color: '#FFBBDD',
    points: { show: true },
    lines: { show: true ,width: 2 },
    clickable: false,
    hoverable: false,
    // Modify the default hover text with replacements
    hover: {
    	text: '{{xlabel}}: {{x}}<br />{{ylabel}}: {{y}}<br />Error: {{err}}',
    	before: '{{title}}<br />'
    },
    css: {
      'font-size': '0.8em',
      'background-color': obs.observatories[d].html_col
    }
  });

  // Define some options
  options = {
    xaxis:{ label:'Time (HJD)' },
    yaxis: { label: 'Delta (mag)' },
    grid: { hoverable: true, clickable: true }
  };

  // Attach to the DOM element with the ID 'lightcurve'
  graph = $.graph('lightcurve', dataset, options);
});

Examples

The top of the page is a live example that constructs the data series from a JSON file. Below are some more. Try making the browser window narrow to see how the graphs resize.

Example 2

// Create a fake data series
n = 200;
series = new Array(n);
for(var i=0 ; i < n ; i++){
	series[i] = { x: 14+i, y: Math.pow(i,2/3)+2 };
}

// Define some options
options.xaxis = { label: '' };
options.yaxis = { log: true, label: 'Power' };

dataset = [{
	data:series,
	color: "#9944ff",
	points: {
		show: false,
		radius: 1.5
	},
	lines: {
		show: true,
		width: 4
	}
}]

// Create the graph
graph2 = $.graph('lightcurve2', dataset, options);

Example 3

series2 = [{x:1,y:0.999,err:0.022},{x:2,y:1.002,err:0.012}...];

graph3 = $.graph('lightcurve3', [{
	data: series2,
	color: "#dd9901",
	points: { show: true, radius: 1.5 },
	lines: { show: false, width: 4 },
	hoverable: true,
	hover: {
		text: function(e){
			if(typeof e.data.note=="string") return "{{xlabel}}: {{x}}<br />{{ylabel}}: {{y}}<br />Error: {{err}}<br />Note: {{ note }}";
			else return "{{xlabel}}: {{x}}<br />{{ylabel}}: {{y}}<br />Error: {{err}}";
		}
	}
}],{
	xaxis: { log: false, label: 't' },
	grid: { show: false, background: 'rgb(255,255,255)' }
});

Example 4

series2 = [{x:1,y:0.999,err:0.022},{x:2,y:1.002,err:0.012}...];

graph4 = $.graph('lightcurve4', [{
	data: series2,
	color: "#44bb44",
	points: { show: true, radius: 1.5 },
	lines: { show: true, width: 2 },
	hoverable: true
}],{
	xaxis: { log: false, label: 't' },
	grid: { show: true, color:'rgb(255,0,0)' }
});

Example 5

Add a horizontal line to the plot.

series2 = [{x:1,y:0.999,err:0.022},{x:2,y:1.002,err:0.012}...];

graph5 = $.graph('lightcurve5', [{
	data: series2,
	points: { show: true, radius: 1.5 },
	lines: { show: true, width: 1 },
	hoverable: true
}]);
graph5.addLine({y:1.0,width:4,color:'rgba(0,0,0,0.6)'}).draw();

Example 6

Add two vertical lines to the plot.

series2 = [{x:1,y:0.999,err:0.022},{x:2,y:1.002,err:0.012}...];

graph6 = $.graph('lightcurve6', [{
	data: series2,
	color: "#44bb44",
	points: { show: true, radius: 1.5 },
	lines: { show: true, width: 2 },
	hoverable: true
}],{
	xaxis: { log: false, label: 't' },
	grid: { show: true, color:'rgb(255,0,0)' }
});
graph6.addLine({x:35,width:2,color:'rgb(51,102,221)'});
graph6.addLine({x:77,width:2,color:'rgb(51,102,221)'}).draw();

Example 7

An example that provides the number of milliseconds since the UNIX epoch (1970/1/1) as the x-axis and sets the x-axis mode to 'time'

series = [{ 'x':1336667967000, 'y':-0.8674, 'i':0}, { 'x':1336735075864, 'y':-0.09227, 'i':1},...

graph7 = $.graph('lightcurve7', [{
	data:series,
	lines: { show:true, width:2 },
	hoverable:true
}], {
	xaxis: { mode:'time' }
});
graph7.addLine({
	x: new Date('Sun Jun 24 2012 00:00:00 GMT').getTime(),
	width: 2,
	color:'rgb(51,102,221)'
}).draw();

Example 8

An example that can only zoom along the x-axis.

series = [{ 'x':1336667967000, 'y':-0.8674, 'i':0}, { 'x':1336735075864, 'y':-0.09227, 'i':1},...

graph8 = $.graph('lightcurve8', {
	data:series,
	lines: { show:true, width:2 },
	hoverable: true
}, {
	zoommode: "x"
	xaxis: { mode:'time' }
});

Example 9

An example that can only zoom along the y-axis.

series = [{ 'x':1336667967000, 'y':-0.8674, 'i':0}, { 'x':1336735075864, 'y':-0.09227, 'i':1},...

graph8 = $.graph('lightcurve8', {
	data:series,
	lines: { show:true, width:2 },
	hoverable: true
}, {
	zoommode: "y"
	xaxis: { mode:'time' }
});

Author

Stuart Lowe has created things for ODI Leeds, UNAWE LCOGT and Cardiff University.