# 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);