Solutoire.com: Plotr - Barchart Example


Horizontal oriented BarChart

Vertical oriented BarChart

Vertical oriented BarChart from table

Heading Another Heading Yet Another Heading Heading over here
0.43 1.23 0.5 0.43
0.1 2.5 0.5 0.16
0.02 0.5 0.5 0.43
0.16 0.1 0.5 0.1

Code

// Define a dataset.
var dataset = {
	'myFirstDataset': [[0, 1], [1, 1], [2, 1.414], [3, 1.73]],
	'mySecondDataset': [[0, 0.3], [1, 2.67], [2, 1.34], [3, 1.73]],
	'myThirdDataset': [[0, 0.46], [1, 1.45], [2, 2.5], [3, 1.2]],
	'myFourthDataset': [[0, 0.86], [1, 0.83], [2, 3], [3, 1.73]]
};

var options = {
	// Use the predefined blue colorscheme.
	colorScheme: 'blue',
	// Render a horizontal oriented barchart.
	barOrientation: 'horizontal',				
	// Define a padding for the canvas node
	padding: {
		left: 30, 
		right: 0, 
		top: 10, 
		bottom: 30
	},
	background: {
		color: '#f2f2f2'
	},				
	axis: {
		// The fontcolor of the labels is black.
		labelColor: '#000000',
		// Add the ticks. Keep in mind, x and y axis are swapped
		// when the BarOrientation is horizontal.
		x: {
			ticks: [
				{v:0, label:'day 1'}, 
		      	{v:1, label:'day 2'}, 
		      	{v:2, label:'day 3'},
		      	{v:3, label:'day 4'}
			]
		}	
	},
	// Shift the legend to the right.
	legend: {
		position:{
			left: '420px'	
		}	
	}				
};
						
// Instantiate a new BarCart.
var horizontal = new Plotr.BarChart('bars1',options);
// Add a dataset to it.
horizontal.addDataset(dataset);
// Render it.
horizontal.render();

// Change some attributes.
Object.extend(options,{				
	// Render a vertical ortiented barchart.
	barOrientation: 'vertical',
	
	// Use the predefined grey colorscheme.
	colorScheme: 'grey',
	
	// Background color to render.
	background:{
		color: '#d8efb0'
	},
	// Put the legend back in default position
	legend: {
		position: {
			top: '20px', 
			left: '40px'
		}	
	}
});

// Instantiate a new BarCart.
var vertical = new Plotr.BarChart('bars2',options);
// Add a dataset to it.
vertical.addDataset(dataset);
// Render it.
vertical.render();

// Change some attributes.
Object.extend(options,{				
	// Render a vertical ortiented barchart.
	barOrientation: 'vertical',
	
	// Use the predefined grey colorscheme.
	colorScheme: 'grey',
	
	// Background color to render.
	backgroundColor: '#d8efb0'
});

// Instead of instantiating a new BarChart object,
// you also can use reset(), that resets the options and datasets.
vertical.reset();

// Change some attributes.
Object.extend(options,{
	// Use the predefined red colorscheme.
	colorScheme: 'red',
	
	// Background color to render.
	background:{
		color: '#f2f2f2'
	},
	
	axis: {
		// Add the ticks. Keep in mind, x and y axis are swapped
		// when the BarOrientation is horizontal.
		x: {
			ticks: [
				{v:0, label:'IE6'}, 
		      	{v:1, label:'IE7'}, 
		      	{v:2, label:'FF2'},
		      	{v:3, label:'Opera 9'}
			]
		}	
	}
});
// Parse the table.
vertical.addTable('table');
// Render the BarChart.
vertical.render('bars3', options);