|
||||||||
|
|
|
|
|
|
|
|
|
|
||||||||
|
SuperPie - Free HTML5 pie chart library documentation
Using the free SuperPie HTML5 pie chart library to display pie charts on
your web pages is very easy. A simple implementation would look as follows:
<!DOCTYPE html>
<html>
<head>
<title>Pie Chart Example</title>
<script src="pie.1.3.js" type="text/javascript"></script>
<script type="text/javascript">
function createPieCharts() {
var labels = new Array('Otters', 'Badgers', 'Stoats', 'Bears');
var values = new Array(5.3, 4.2, 4.1, 3.6);
var colors = new Array('#EAA83A','#FEC56B','#51C5D4','#80D4DF');
drawPie(labels, values, colors, 'cPie1');
}
</script>
</head>
<body onload="createPieCharts()">
<canvas id="cPie1" width="340" height="210"></canvas>
</body>
</html>
Labels, Values and Colors
The labels, values and colors arrays can have as many elements as you like (one value for each slice of the pie). You can set these values directly in your page, or you can optionally use the SuperPie piechart library with a server-side web application platform such as:
Sizing
The size of the pie chart is determined by the size of the canvas that contains it. This can be set using CSS just like any other HTML element.
The drawChart Function
HTML5 Pie Chart Examples
Free Download
function drawChart(labels, values, colors, canvasId, [options])
labels
Array of labels to display for each value
values
Array of values for the pie chart
colors
Array of hex color codes to apply to each segment of the pie
canvasId
The ID attribute of the canvas element you are drawing your pie chart to
options
This optional parameter can be used to set additional rendering options for your pie chart. Example: { textSize: 14, pieBorder: 4, pad: 12, padLegend: 8, legendBorder: 1, donut: 12 }
textSize - Size (in px) of text for legend
pieBorder - Size of border around pie segments pad - Padding around the pie chart padLegend - Padding within the legend box legendBorder - 1 = display border, 0 = no border donut - Diameter of donut hole if required |
|
| Pie Charts | Bar Charts | Line Graphs | Pricing | Purchase | Contact Us | ||
