Subprime Pie Charts

A flexible HTML5 Canvas API used for creating interactive Pie & Donut data visualization charts. Very simple to implement, configure and personalize. It is coded in pure javascript in order to avoid conflicts with libraries such as jQuery and Mootools.

Demo

See Subprime Pie Charts in action [here](http://subprimead.com/subprime_piecharts_static).

Basic Usage

Step 1

Include subprimecharts.js in the head section of your page. ```html <title></title> <script src="path/to/my/js/folder/subprimecharts.js"></script> ```

Step 2

Define the Canvas element on which the chart will be drawn. ```html <title></title> <script src="path/to/my/js/folder/subprimecharts.js"></script> ``` You can define multiple canvas elements and draw multiple charts width different sets of data and configuration.

Step 3

Initialize the chart and provide the required data. ```html <title></title> <script src="path/to/my/js/folder/subprimecharts.js"></script> <script> var myChart = new canvasPieChart();

	// Initialize the chart(container id,width,height).
	// if null values are passed for the width and/or height the parent element's dimentions will be assigned.
	// ex. myChart.init("myChart",null,null);
	myChart.init("myChart",500,500); 

	// Provide the data to be transfered on the chart
	// value : the actual numeric value of the data entry
	// color : the color of the corresponding pie slice
	// name  : the textual reference to the data entry
	var data = [
			{
				value : 57,
				color : "#50c0e9",
				name  : "iOS"
			},
			{
				value : 43,
				color : "#cb97e5",
				name  : "Android"
			},
			{
				value : 11,
				color : "#a8d324",
				name  : "BlackBerry"
			},
			{
				value : 24,
				color : "#ffa713",
				name  : "Symbian"
			},
			{
				value : 32,
				color : "#f83a3a",
				name  : "Windows OS"
			}
		];
		
	myChart.draw(data); // draw the chart
</script>

```

Customising

Adding a Legend

Create a container for the legend. ```html

``` The reason the Legend is defined in a different container is to provide maximum flexibility. You can put it wherever it feels right. Above the chart, below it, left, right, it's up to you.

Pass the option to the chart

var myChart = new canvasPieChart();

myChart.init("myChart",500,500); 

var data = [...]; // data object array as displayed above

var options = [{
                legend :
                [{
                        containerId : "myChart-legend",
                        title       : "Mobile operating Systems",
                        columns     : ["Operating systems","Awesomeness","%"],
                        showTotal   : true,
                        totalText   : " Total :"
                }]
            }];
    
myChart.draw(data,options); // draw the chart!

The generated table is not styled by default so that you are able to apply your own unique styling.

Chart Legend Options

Name	Type	Description	Default	Required
containerId	String	The id of the element that contains the legend table	-	required
title	String	The charts title	-	optional
columns	Array	The legend's table column name	-	At least one is required
showTotal	Boolean	Whether or not to display the total sum of data values	true	optional
totalText	String	The text that describes the sum of data values	Total :	depends on showTotal

Exploding Slices

You can define which slices will explode by default. ```javascript var data = [ { value : 57, color : "#50c0e9", name : "iOS", explode : true }, { value : 43, color : "#cb97e5", name : "Android" }, { value : 11, color : "#a8d324", explode : true } ]; ```

Focusing Slices

You can also define which slices will be focused by default. ```javascript var data = [ { value : 57, color : "#50c0e9", name : "iOS", focused : true }, { value : 43, color : "#cb97e5", name : "Android" }, { value : 11, color : "#a8d324", focused : true } ]; ```

Pie Chart Preferences

Name	Type	Description	Default
showSliceInfo	boolean	Whether or not to display the data and info of the corresponding slice by default	false
showInlinePercentages	boolean	Whether or not to display the percentage occupied by each data value inside the dorresponding slice	true
inlinePercentagesColor	HEX String	The text color of inline percentages	Black or white, depending on each slice's contrast
fontFace	String	The text's font.	segoe ui
fontSize	Number	The text's size in pixels.	16
strokeColor	HEX String	The color of each slice's stroke.	no stroke is applied
dataValuesPrefix	String	The text prefixing the each value as it is displayed on the chart.	-
dataValuesSuffix	String	The text that follows each data value as it is displayed on the chart.	-
interactivity	String	Enable/Disable Legend - Chart interactivity. Values : "enabled","disabled"	enabled
donutize	Boolean	Creates a donut chart.	false
donutHoleRadius	Number	The radius of the donut hole relative to the chart's radius (0-1).	0.5

Full Example : ```html <title></title> <script src="path/to/subprimecharts.js"></script>

<script> var chart = new canvasPieChart(); chart.init("canvas",null,null); var data = [ { value : 57, color : "#33b5e5", name : "iOS" }, { value : 43, color : "#c182e0", name : "Android" }, { value : 11, color : "#92c500", name : "BlackBerry" }, { value : 24, color : "#ff9909", name : "Symbian"

		},
		{
			value : 32,
			color : "#f83a3a",
			name  : "Windows OS"
		}
	];
	var options = [
			{
				showSliceInfo          : false,
				showInlinePercentages  : true,
				inlinePercentagesColor : "#FFFFFF",
				textColor              : "#555555",
				strokeColor            : "#FFFFFF",
				dataValuesPrefix       : "",
				dataValuesSuffix       : " thumbs-up",
				interactivity          : "enabled",
				donutize               : false,
				donutHoleRadius        : 0.5,
				fontFace               : "segoe ui",
				fontSize               : 16,
				legend                 :[{
						containerId : "canvas-legend",
						title       : "Mobile operating Systems",
						columns     : ["Operating systems","Awesomeness","%"],
						showTotal   : true,
						totalText   : "Total Awesomeness : "
				}]
			}
		];
	chart.draw(data,options);
	
	var chart2 = new canvasPieChart(); 
</script>

```