Flot Example

Flot is a pure Javascript plotting library for jQuery. It produces graphical plots of arbitrary datasets on-the-fly client-side. The focus is on simple usage (all settings are optional), attractive looks and interactive features like zooming and mouse tracking. The plugin works with Internet Explorer 6+, Firefox 2.x+, Safari 3.0+, Opera 9.5+ and Konqueror 4.x+ with the HTML canvas tag (the excanvas Javascript emulation helper is used for IE < 9).

HTML

<script src="https://rawgithub.com/MasterAM/flot/master/jquery.flot.js"></script>
<script src="https://rawgithub.com/MasterAM/flot/master/jquery.flot.pie.js"></script>
<h1>Flot Examples</h1> 
<div id="star" style="width:200px;height:200px;background:grey"></div>

JavaScript

$(function () {
    var data = [{
        label: "Read",
        data: 50,
        color: '#614E43'
    }, {
        label: "Unread",
        data: 150,
        color: '#F5912D'
    }];
    $.plot($("#star"), data, {
        series: {

            pie: {
                radius: 0.2,
                innerRadius: 0.125,
                show: true,
                stroke: {
                    width: 0.1,
                    color: '#808080'
                },
                offset: {
                    top: -70,
                    left: -20
                }
            }
        },
        grid: {
            hoverable: true,
            clickable: true
        }
    });
});