set space at bottom of heatmap chart - Javascript highcharts

Javascript examples for highcharts:Heatmap Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Heatmap Chart

Description

set space at bottom of heatmap chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function () {/*from   ww  w  . ja  v a2  s  . c  om*/
    var chart_data = [];
    var num_jobs = 0;
    var max_cores = 12;
   var j = 0; var k = 0;
    for (var i = 0; i < 208; i++) {
        var num_jobs = (i*12)/24;
        chart_data.push({
            x: j,
            y: k,
            value: num_jobs * 10 / max_cores * 10,
            num_jobs: num_jobs,
            num_cores: max_cores,
            name: 'test',
            url: ''
        });
        j+=1;
        if (j >= 8) {
            j = 0;
            k+=1;
        }
    }
    $('#container').highcharts({
        chart: {
            type: 'heatmap',
            marginTop: 26,
            marginLeft: 5,
            marginRight: 5,
            marginBottom: 5,
            width: 200, // - width when in one row
            height: 250,
            borderWidth: 3,
            borderColor: 'grey',
            borderRadius: 5,
            plotBackgroundColor: '#FFFFFF',
            plotShadow: true
        },
        title: {
            text: 'Node Status', //'' for nothing
            align: 'left',
            style: {
                "color": "#333333",
                    "fontSize": "10px"
            }
        },
        xAxis: {
            labels: {
                enabled: false
            }
        },
        yAxis: {
            labels: {
                enabled: false
            },
            title: null,
            reversed: true
        },
        colorAxis: {
            min: 0,
            max: 100,
            stops: [
                [0, '#9DFF9D'],
                [0.2, '#fffbbc'],
                [0.7, '#fffbbc'],
                [0.9, '#E6532E']
            ]
        },
        legend: {
            enabled: false
        },
        exporting: {
            enabled: false
        },
        tooltip: {
            formatter: function () {
                return this.point.num_jobs + ' of ' + this.point.num_cores + '</b> jobs on <br>' + this.point.name + '</a>';
            }
        },
        series: [{
            name: 'Jobs per Node',
            borderWidth: 1,
            data: chart_data,
            dataLabels: {
                enabled: false
            },
            point: {
                events: {
                    click: function () {
                        window.open(
                        this.options.url,
                            '_blank');
                    }
                }
            }
        }],
        credits: {
            enabled: false
        },
    });
});

      </script> 
   </head> 
   <body> 
      <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> 
      <div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials