Solutoire.com: Plotr - Piechart Example


PieChart (pieRadius = 0.4)

PieChart (pieRadius = 0.2)

// Define a dataset.
var dataset = {
	'myFirstDataset': 	[[0, 3], [1, 2], [2, 1.414], [3, 2.3]],
	'mySecondDataset': 	[[0, 1.4], [1, 2.67], [2, 1.34], [3, 1.2]],
	'myThirdDataset': 	[[0, 0.46], [1, 1.45], [2, 1.0], [3, 1.6]],
	'myFourthDataset': 	[[0, 0.3], [1, 0.83], [2, 0.7], [3, 0.2]]
};

// Define options.
var options = {
	// Define a padding for the canvas node.
	padding: {
		left: 30, 
		right: 0, 
		top: 10, 
		bottom: 30
	},				
	// Background color to render.
	background: {
		color: '#f2f2f2'
	},					
	// Use the predefined blue colorscheme.
	colorScheme: 'blue',				
	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:'January'}, 
		      	{v:1, label:'February'}, 
		      	{v:2, label:'March'},
		      	{v:3, label:'April'}
			]
		}	
	}
};

// Instantiate a new PieCart.
var pie = new Plotr.PieChart('pie1',options);
// Add a dataset to it.
pie.addDataset(dataset);
// Render it.
pie.render();

// Change some attributes.
Object.extend(options,{				
	// Use the predefined grey colorscheme.
	colorScheme: 'grey',
	
	// Change the radius to 0.2 (default = 0.4).
	pieRadius: '0.2',
	
	// Background color to render.
	background: {
		color: '#d8efb0'
	}
});
			
// Instead of instantiating a new PieChart object,
// you also can use reset(), that resets the options and datasets.
pie.reset();		
pie.addDataset(dataset);
// Render the PieChart.
pie.render('pie2', options);