Graphs Charts Pie Charts Bar Charts Line Graphs
Graphs

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:
  • PHP
  • ASP
  • ASP.Net
  • MVC
  • Java Servlets
  • JSP
  • ColdFusion
  • Lotus Domino
  • Ruby on Rails (RoR)
This allows the values you feed in to your pie chart to be retrieved from a database, including:
  • Microsoft SQL Server
  • Microsoft Access
  • Oracle
  • MySQL
  • PostgreSQL
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
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
HTML5 Pie Chart Examples    Free Download