Burndown

A burndown chart with Highcharts.js

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<div id="container-burndown" style="max-width: 510px; height: 400px;" data-highcharts-chart="0"></div>

JavaScript

jQuery(document).ready(function() {
var doc = $(document);
$('#container-burndown').highcharts({
    title: {
      text: 'Burndown Chart of Project',
      x: -10 //center
    },
	scrollbar: {
                barBackgroundColor: 'gray',
                barBorderRadius: 7,
                barBorderWidth: 0,
                buttonBackgroundColor: 'gray',
                buttonBorderWidth: 0,
                buttonBorderRadius: 7,
                trackBackgroundColor: 'none',
                trackBorderWidth: 1,
                trackBorderRadius: 8,
                trackBorderColor: '#CCC'
            },
    colors: ['red', 'red'],
    plotOptions: {
      line: {
        lineWidth: 3
      },
      tooltip: {
        hideDelay: 200
      }
    },
    subtitle: {
      text: 'All Project Team Summary',
      x: -10
    },
    xAxis: {
      categories:      document.getElementById('data').innerHTML },
    
    yAxis: {
      title: {
        text: 'Remaining work (days)'
		
      },
			 type: 'linear',
			 max:11, // Anzahl User Stories //
			 min:0,
			 tickInterval :1
	 
    },
	
    tooltip: {
      valueSuffix: ' day',
      crosshairs: true,
      shared: true
    },
    legend: {
     layout: 'horizontal',
      align: 'center',
      verticalAlign: 'bottom',
      borderWidth: 0
    },
    series: [{
      name: 'Ideal Burn',
      color: 'rgba(255,0,0,0.25)',
      lineWidth: 2,
	  
 //rote linie verlauf
      data: [10,9,8,7,6,5,4,3,2,1,0]    }, {
      name: 'Actual Burn',
      color: 'rgba(0,120,200,0.75)',
      marker: {
        radius: 6
      },
      data: [0,1,1,1,4]    }]
  });
    });