Easy Pie chart

Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These chars are highly customizable and very easy to implement. For more info visit http://rendro.github.com/easy-pie-chart/. 

<div id="easy-pie-chart" data-percent="55">
  55%
</div>

$('#easy-pie-chart').easyPieChart({
  animate: 2000,
  scaleColor: false,
  lineWidth: 12,
  lineCap: 'square',
  size: 100,
  trackColor: '#e5e5e5',
  barColor: '#3da0ea'
});
55%

jQuery Sparklines

jQuery Sparklines plugin generates sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript. For more info visit http://omnipotent.net/jquery.sparkline/. 

<span id="sparkline-line">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
<span class="sparkline-bar">-3,1,2,0,3,-1</span>
<span class="sparkline-bar">0:2,2:4,4:2,4:1</span>
<span id="sparkline-compositeline">8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10</span>
<span id="sparkline-discrete">4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5</span>
<span id="sparkline-tristate">1,1,0,1,-1,-1,1,-1,0,0,1,1</span>

$('#sparkline-line').sparkline();

// Bar charts using inline values
$('.sparkline-bar').sparkline('html', {type: 'bar'});

// Composite line charts, the second using values supplied via javascript
$('#sparkline-compositeline').sparkline('html', { fillColor: false, changeRangeMin: 0, chartRangeMax: 10 });
$('#sparkline-compositeline').sparkline([4,1,5,7,9,9,8,7,6,6,4,7,8,4,3,2,2,5,6,7], { composite: true, fillColor: false, lineColor: 'red', changeRangeMin: 0, chartRangeMax: 10 });

// Discrete charts
$('#sparkline-discrete').sparkline('html', { type: 'discrete', lineColor: 'blue', thresholdColor: 'red', thresholdValue: 4 });

// Tri-state charts using inline values
$('#sparkline-tristate').sparkline('html', {type: 'tristate'});

8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10    -3,1,2,0,3,-1    0:2,2:4,4:2,4:1    8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10    4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5    1,1,0,1,-1,-1,1,-1,0,0,1,1

Simple Plot plugin

Simple Plot plugin helps you to easily add charts on your pages. It uses Flot.js for jQuery. To add a chart, just call $(container).simplePlot(data, flot_options, simpleplot_options).

Data Format

Data format has the same syntax like Flot's data format. The difference is that you can add filledPoints: true to fill graph points.

Flot Options Defaults

Option Value
series[shadowSize] 0
grid[color] #646464
grid[borderColor] transparent
grid[borderWidth] 20
grid[hoverable] true
xaxis[tickColor] transparent
legend[show] false

Simple Plot Options

Option Default Description
pointsRadius 4 Radius of graph points.
height null Height of container. By default it is calculated dynamically when the container width changing. When the height option is passed then the container height does not depend on the container width.
heightRatio 0.5 heightRatio is used when the container height is calculated dynamically. containerHeight = containerWidth * heightRatio.
tooltipText 'x - y' Warning Tooltip text is passed to a JavaScript's eval function.

Line Chart example 

<div id="visits-line-chart"></div>

$('#visits-line-chart').simplePlot(visitsChartData, {
  series: {
	points: {
	  show: true,
	  radius: 5
	},
	lines: { show: true }
  },
  xaxis: { tickDecimals: 2 },
  yaxis: { tickSize: 1000 }
}, { tooltipText: "y + ' visitors at ' + x + '.00h'" });

Bar Chart example 

<div id="visits-bar-chart"></div>

$('#visits-bar-chart').simplePlot(visitsChartData, {
  series: {
	bars: {
	  show: true,
	  barWidth: .9,
	  align: 'center'
	}
  },
  xaxis: { tickDecimals: 2 },
  yaxis: { tickSize: 1000 }
}, { tooltipText: "y + ' visitors at ' + x + '.00h'" });

Donut Chart Example 

<div id="donut-chart"></div>

$('#donut-chart').simplePlot(donutChartData, {
  series: {
	pie: { 
	  show: true,
	  radius: 1,
	  innerRadius: 0.5,
	  label: {
		show: true,
		radius: 3/4,
		formatter: function(label, series) {
		  return '<div style="font-size:14px;text-align:center;padding:2px;color:white;">' + Math.round(series.percent) + '%</div>';
		},
		background: { opacity: 0 }
	  }
	}
  }
});