Pie Chart

Code

new Proto.Chart($('piechart'), 
	[
	{ data: d1, label: "d1"},
	{ data: d2, label: "d2"},
	{ data: d3, label: "d3"},
	{ data: d4, label: "d4"},
	{ data: d5, label: "d5"},
	{ data: d6, label: "d6"},
	{ data: d7, label: "d7"}
	], 
	{
		/*
		This is how we tell the Chart engine that we 
		need a pie chart and it ignores all inline options 
		that you might have passed with the datasets.
		*/
		pies: {show: true, autoScale: true},
		legend: {show: true}
	});
				

Mix Chart

Code

new Proto.Chart($('mixChart'), 
	[
	{ data: d1, label: "Math.sin(x)" }, 
	{ data: d2, label: "Normal", bars: {show: true}},
	{ data: d3, label: "Math.cos(x)", points: {show: true}},
	{ data: d4, label: "Random Function", lines: {fill: true}},
	{ data: d5, label: "Random"}
	],
	{
		legend: {
			show: true,
			noColumns: 2,
			labelFormatter: function(str) { return ""+str+""},
			labelBoxBorderColor: "#dedede",
			position: "ne",
			backgroundColor: "#eee",
			backgroundOpacity: 0.3
		},
		grid: {
			borderWidth: 2,
			coloredAreas: [{y1: 5, y2:7}, {x1: 5, x2: 7.5}],
			coloredAreasColor: "#FFF2F9",
			drawXAxis: true,
			drawYAxis: true,
			clickable: true,
		},
		selection: {
			mode: "xy",
			color: "#A7CAFE"
		},
		xaxis: {
			min: 3,
			max: 13,
			tickSize: 2,	//increments ticks by this
			tickFormatter: function(str) {return ""+str+"";}
		},
		yaxis: {
			min: 0,
			max: 15,
			tickSize: 1,	//increments ticks by this
			tickFormatter: function(str) {return ""+str+"";}
		}
	});	
				

Bar Chart

Code

new Proto.Chart($('barchart'), 
	[
		{data: d6, label: "Data 1"},
		{data: d6, label: "Data 2"}
	],
	{
		bars: {show: true},
		xaxis: {min: 0, max: 14, tickSize: 1},
		
	});