Progress pie chart

The progress pie chart widget, from the SaVaGe library, if a simple and easy to use pie chart with only two slices, that is commonly used to show the progress or level of completition of a task or event.

How to use it

In order to use it, you must only include the D3.js and SaVaGe scripts in your page.

<html>
    <head>
        <script src="d3.v3.min.js" type="text/javascript"></script>
        <script src="savage.progress-pie-chart.min.js" type="text/javascript"></script>
    </head>
    <body>
        <script type="text/javascript">
            // Add a pie chart at the end of 'body'.
            SaVaGe.ProgressPieChart();
        </script>
    </body>
</html>

Examples

Basics

The ProgressPieChart() method accepts, as paramater, a single object, whose attributes can be used to customize the widget.

The most fundamental of them are the container attribute, which allows to define (using CSS selectors) the element which is going to serve as container for the widget, and the value attribute (a value between 0 and 1), which is used to define progress that must be represented by the slices.

Code

<div id="basic1"></div>
<div id="basic2"></div>
<script type="text/javascript">
    SaVaGe.ProgressPieChart({container: "#basic1", value: 0.9});
    SaVaGe.ProgressPieChart({container: "#basic2", value: 0.4});
</script>

Result

Radius

The radius attributes allows to define the size of the pie chart while the innerRadius allows to define the radius of the hole inside the chart (in case that you want to create a donut chart).

Code

<div id="small"></div>
<div id="big"></div>
<div id="donut"></div>
<script type="text/javascript">
    SaVaGe.ProgressPieChart({container: "#small", radius: 10});
    SaVaGe.ProgressPieChart({container: "#big", radius: 40});
    SaVaGe.ProgressPieChart({container: "#donut", radius: 30, innerRadius: 20});
</script>

Result

Rotation and colors

The rotate attributes allows to define the degrees that the pie chart must be rotated (over his own axis). The colors attribute allows to specify the color of each slice.

Code

<div id="rotated"></div>
<div id="colored"></div>
<script type="text/javascript">
    SaVaGe.ProgressPieChart({container: "#rotated", rotate: 180});
    SaVaGe.ProgressPieChart({container: "#colored", colors: {completed: "darkblue", pending: "lightblue"}});
</script>

Result

Labels

The label attributes allows to define if a label must be show, in the middle of the pie chart, and which with size, color and font.

Code

<div id="label1"></div>
<div id="label2"></div>
<div id="label3"></div>
<script type="text/javascript">
    SaVaGe.ProgressPieChart({container: "#label1", label: {show: true}});
    SaVaGe.ProgressPieChart({container: "#label2", label: {show: true, text: "Good!"}});
    SaVaGe.ProgressPieChart({container: "#label3", label: {show: true, size: "20px", color:"white", family: "Verdana"}});
</script>

Result