top msg abbott_1

author(s): Torstein Hønsi

by tin nguyen

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>

<input type="checkbox" name="vehicle" value="Bike">
<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

CSS

<style type="text/css">
    
    table {
    border: 1px solid black;
    text-align: center;
    background-color: #4CAF50;
    
}
td {
    background-color: #4CAF50;
    color: white;
}
</style>

JavaScript

$(function() {

  $('#container').highcharts({
			exporting : {
				allowHTML :  true,
			},
    chart: {
      type: 'heatmap',
      marginTop: 40,
      //marginLeft: 300,
      //marginRight: 300,
      marginBottom: 80,
      plotBorderWidth: 1
    },


    title: {
      text: 'Sales per employee per weekday'
    },

    xAxis: {
      categories: [' ', ' ', ' '],
      //visible:false,
      plotBands: [
                        {
                            color: 'red', // Color value
                            from: -0.5, // Start of the plot band
                            to: 0.5 // End of the plot band
                        },
                        {
                            color: 'blue', // Color value
                            from: 0.5, // Start of the plot band
                            to: 1.5 // End of the plot band
                        },
                        {
                            color: 'yellow', // Color value
                            from: 1.5, // Start of the plot band
                            to: 2.5 // End of the plot band
                        },
                    ],
    },

    yAxis: [{
      categories: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
      title: null,
      //visible:false,
      tickLength: 0,
      
    }, {
      linkedTo: 0,
      tickLength: 100,
      tickWidth: 2,
      opposite: true,
      title: null,
      lineWidth: 2,
      categories: ['a', 'a', 'a', 'a', 'a'],
      plotBands: [
                        {
                            color: 'red', // Color value
                            from: -0.5, // Start of the plot band
                            to: 0.5 // End of the plot band
                        },
                        {
                            color: 'blue', // Color value
                            from: 0.5, // Start of the plot band
                            to: 1.5 // End of the plot band
                        },
             ...