Example page how to use the BarChart.

« Back to the Plotr page

Horizontal oriented BarChart

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

// Define options.
var options = {
	// Define a padding for the canvas node
	padding: {left: 30, right: 0, top: 10, bottom: 30},

	// Background color to render.
	backgroundColor: '#f2f2f2',

	// Use the predefined blue colorscheme.
	colorScheme: 'blue',

	// Render a horizontal oriented barchart.
	barOrientation: 'horizontal',

	// Set the labels.
   	xTicks: [
		{v:0, label:'day 1'},
      	{v:1, label:'day 2'},
      	{v:2, label:'day 3'},
      	{v:3, label:'day 4'}
	]
};

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

Vertical oriented BarChart

// 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'
});

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

Vertical oriented BarChart from table

// 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.
	backgroundColor: '#f2f2f2',

	// Set the labels.
   	xTicks: [
		{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);