Highcharts Day Activty

One area bar shown for each day of week

by Ben Clayton

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id="container"></div>

JavaScript

function draw(sdata) {

  Highcharts.chart('container', {

      chart: {
        type: 'arearange',
        zoomType: 'x',
        marginLeft: 26
      },

      title: {
        text: 'Activity over day'
      },


      xAxis: {
        type: 'datetime',
        tickInterval: 3600 * 1000,
        labels: {
          formatter: function() {
            return Highcharts.dateFormat("%H", this.value);
          }
        }
      },


      yAxis: {
        title: {
          text: null
        },
        gridLineColor: 'transparent',

        labels: {
          enabled: false
        }
      },

      legend: {
        enabled: false
      },
			tooltip:{enabled:false},

      series: sdata

    },
    function(chart) {
		for (var dow = 0; dow < chart.series.length; dow++) {
      chart.renderer.text(chart.series[dow].name, 0, (dow * 37 + 113) )
        .attr({
          zIndex: 5
        })
        .css({
          fontSize: '12px'
        })
        .add();
		}
    });
}



var alldata = [{
    name: 'Sun',
		color:"#CCDDCC",
    data: []
  },
  {
    name: 'Mon',
		color:'#8080FF',
    data: []
  },
  {
    name: 'Tue',
		color:'#8080FF',
    data: []
  },
  {
    name: 'Wed',
		color:'#8080FF',
    data: []
  },
  {
    name: 'Thu',
		color:'#8080FF',
    data: []
  },
  {
    name: 'Fri',
		color:'#8080FF',
    data: []
  },
  {
    name: 'Sat',
		color:"#CCDDCC",
    data: []
  }
];
var oneday = 24 * 1000 * 3600;
var mins10 = 10 * 60 * 1000;
var oneweek = oneday * 7;
// put in example hourly pattern
var fiddle = [0.1,0,0,0.1,0.2,0.3,0.5,1,1,1,1,1,1,0.8,0.8,1,1,1,1,1,1,1,0.9,0.2];

for (var x = 0; x < oneweek; x=x+mins10) {
  //var point = origdata[x];
  // var d = new Date(point[0]);
  var d = new Date(x);
  var dow = d.getDay();
  var didx = 14 - (dow * 2);
  // var v = Math.abs(point[1]) / 10;
  var v = Math.random();
  if (v > 0.6) v = 0.6;
	v = v * fiddle[d.getHours()]
  var dd = d.getTime() % oneday;
	// each point = [ time , low , high ]
 ...