Диаграммы на Canvas

<aside class="chart vert">
  <canvas id="canPie" width="300" height="200" data-values='40, 30, 20, 60, 10, 50'>
  Этот браузер не поддерживает HTML5 Canvas.
  </canvas>
  <ol class="legend">
  <li class="key one">Первый</li>
  <li class="key two">Второй</li>
  <li class="key three">Третий</li>
  <li class="key four">Четвертый</li>
  <li class="key five">Пятый</li>
  <li class="key six">Шестой</li>
  </ol>
</aside>
<aside class="chart">
  <canvas id="canPeak" width="300" height="200" data-values='40, 30, 20, 60, 10, 50'>
  Этот браузер не поддерживает HTML5 Canvas.
  </canvas>
  <ol class="legend horiz">
  <li class="key one">1</li>
  <li class="key two">2</li>
  <li class="key three">3</li>
  <li class="key four">4</li>
  <li class="key five">5</li>
  <li class="key six">6</li>
  </ol>
</aside>
<aside class="chart">
  <canvas id="canBar" width="300" height="200" data-values='40, 30, 20, 60, 10, 50'>
  Этот браузер не поддерживает HTML5 Canvas.
  </canvas>
  <ol class="legend horiz">
  <li class="key one">1</li>
  <li class="key two">2</li>
  <li class="key three">3</li>
  <li class="key four">4</li>
  <li class="key five">5</li>
  <li class="key six">6</li>
  </ol>
</aside>

<script type="text/javascript">
var pieColors = ['rgb(236, 208, 120)', 'rgba(217, 91, 67, 0.7)', 'rgba(192, 41, 66, 0.7)', 'rgba(84, 36, 55, 0.7)', 'rgba(83, 119, 122, 0.7)', 'rgba(119, 146, 174, 0.7)'];

function getTotal( arr ){
  var j,
  myTotal = 0;
   
  for( j = 0; j < arr.length; j++) {
  myTotal += ( typeof arr[j] === 'number' ) ? arr[j] : 0;
  }
   
  return myTotal;
}

function drawPieChart( canvasId ) {
  var i,
  canvas = document.getElementById( canvasId ),
  pieData = canvas.dataset.values.split(',').map( function(x){ return parseInt( x, 10 )}),
  halfWidth = canvas.width * .5,
  halfHeight = canvas.height * .5,
  ctx = canvas.getContext( '2d' ),
  lastend = 0,
  myTotal = getTotal(pieData);

  ctx.clearRect( 0, 0, canvas.width, canvas.height );

  for( i = 0; i < pieData.length; i++) {
  ctx.fillStyle = pieColors[i];
  ctx.beginPath();
  ctx.moveTo( halfWidth, halfHeight );
  ctx.arc( halfWidth, halfHeight, halfHeight, lastend, lastend + ( Math.PI * 2 * ( pieData[i] / myTotal )), false );
  ctx.lineTo( halfWidth, halfHeight );
  ctx.fill();
  lastend += Math.PI * 2 * ( pieData[i] / myTotal );
  }
}

drawPieChart('canPie');

var peakColors = ['rgb(236, 208, 120)', 'rgba(217, 91, 67, 0.7)', 'rgba(192, 41, 66, 0.7)', 'rgba(84, 36, 55, 0.7)', 'rgba(83, 119, 122, 0.7)', 'rgba(119, 146, 174, 0.7)'];

function drawPeakChart( canvasId ) {
  var i, start, peakPoint,
  canvas = document.getElementById( canvasId ),
  peakData = canvas.dataset.values.split(',').map( function(x){ return parseInt( x, 10 )}),
  ctx = canvas.getContext( '2d' ),
  max = Math.max.apply( Math, peakData ),
  plotBase = canvas.width / peakData.length,
  overlap = plotBase * .4;
  plotBase += canvas.width * .05;
   
  ctx.clearRect( 0, 0, canvas.width, canvas.height );
   
  for( i = 0; i < peakData.length; i++) {
  start = i === 0 ? 0 : i * plotBase - i * overlap;
  peakPoint = canvas.height - Math.round( canvas.height * ( peakData[i] / max ) );
  ctx.fillStyle = peakColors[i];
  ctx.beginPath();
  ctx.moveTo( start, canvas.height );
  ctx.lineTo( start + plotBase * .5, peakPoint );
  ctx.lineTo( start + plotBase, canvas.height );
  ctx.lineTo( start, canvas.height );
  ctx.fill();
  }
}

drawPeakChart('canPeak');

var barColors = ['rgb(236, 208, 120)', 'rgba(217, 91, 67, 0.7)', 'rgba(192, 41, 66, 0.7)', 'rgba(84, 36, 55, 0.7)', 'rgba(83, 119, 122, 0.7)', 'rgba(119, 146, 174, 0.7)'];

function drawBarChart( canvasId ) {
  var i, start, top,
  canvas = document.getElementById( canvasId ),
  barData = canvas.dataset.values.split(',').map( function(x){ return parseInt( x, 10 )}),
  ctx = canvas.getContext( '2d' ),
  max = Math.max.apply( Math, barData ),
  padding = 20,
  plotWidth = canvas.width / barData.length - padding;
   
  ctx.clearRect(0, 0, canvas.width, canvas.height);
   
  for( i = 0; i < barData.length; i++) {
  start = i === 0 ? 0 : i * ( plotWidth + padding );
  top = canvas.height - Math.round( canvas.height * ( barData[i] / max ) );
  ctx.fillStyle = peakColors[i];
  ctx.fillRect( start, top, plotWidth, canvas.height - top);
  }
}

drawBarChart('canBar');
</script>

<style type="text/css">
body {
  font: normal normal 400 1rem/1.5 "Segoe UI", "Helvetica Neue", "DejaVu Sans", Helvetica, Arial, sans-serif;
}
aside {
  float: left;
  margin-right: 100px;
}
.chart {
  margin-bottom:0;
  margin-top:0;
}
.vert > canvas, .vert > ol {
  display:inline-block
}
.horiz > li {
  display: inline;
  padding-right: 20px;
}
.legend {
  vertical-align:top;
  padding-left:15px;
  list-style: none;
}
.key {
  position:relative;
}
.key:before {
  content:"";
  position:absolute;
  top:35%;
  left:-15px;
  width:10px;
  height:10px;
}
.one:before{background:rgb(236, 208, 120)}
.two:before{background:rgba(217, 91, 67, 0.7)}
.three:before{background:rgba(192, 41, 66, 0.7)}
.four:before{background:rgba(84, 36, 55, 0.7)}
.five:before{background:rgba(83, 119, 122, 0.7)}
.six:before{background:rgba(119, 146, 174, 0.7)}
</style>