Fork Me on GitHub

Graph

An HTML5 x-y graph library

Last updated: 1 August 2012

Download this project as a .zip file Download this project as a tar.gz file
This plot represents observations of a gravitational microlensing event. Each data series shows the variation in brightness of the target star as measured by different telescopes in the ROBONET collaboration. See more examples

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...)

Dependencies and Limitations

For this library to work it has two dependencies:

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


This is some normal text in the same bounding box to show the background colour. This plot actually shows the dip in brightness of a star caused by a transiting planet. The depth of the dip can be used to estimate the relative size of the planet and star. Some points, such as the first three, show how you can write a function to customize the content of the hover box.
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();

Author

Stuart Lowe works for the Las Cumbres Observatory Global Telescope. LCOGT is a private operating foundation, building a global network of telescopes for professional research and citizen investigations.