Highchart

Chart in PHP

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/highcharts-more.js"></script>
<script src="http://code.highcharts.com/modules/solid-gauge.src.js"></script>
<div style="width: 600px; height: 400px; margin: 0 auto">
  <div id="container-speed" style="width: 300px; height: 200px; float: left"></div>
</div>

JavaScript

$(function() {

  var gaugeOptions = {

    chart: {
      type: 'solidgauge',
      height: 80,
      width: 120,
      backgroundColor: null
    },

    title: null,

    pane: {
      center: ['50%', '60%'],
      size: '100%',
      startAngle: -90,
      endAngle: 90,
      background: {
        innerRadius: '60%',
        outerRadius: '100%',
        shape: 'arc'
      }
    },
    credits: {
      enabled: false
    },

    tooltip: {
      enabled: false
    },

    plotOptions: {
      solidgauge: {
        dataLabels: {
          y: 5,
          borderWidth: 0,
          useHTML: true
        },
         dial: {
        baseWidth: 1,
        topWidth: 1
      },
      pivot: {
        radius: 1
      }
      }
    }
  };

  // The speed gauge
  $('#container-speed').highcharts(Highcharts.merge(gaugeOptions, {
    yAxis: {
      min: 0,
      max: 5,
      tickPositions: [],
      plotBands: [{ // mark the weekend
        color: {
          linearGradient: [0, 0, 300, 0],
          stops: [
            [0.1, '#55BF3B'], // green
            [0.2, '#DDDF0D'], // yellow
            [0.3, '#DF5353']
          ]
        },
        from: 0,
        to: 5,
        innerRadius: '60%',
        outerRadius: '100%',
      }],
    },
    series: [{
      name: 'Ship Average',
      type: 'gauge',
      data: [2],
     
      color: {
        linearGradient: [0, 0, 300, 0],
        stops: [
          [0.1, '#55BF3B'], // green
          [0.25, '#DDDF0D'], // yellow
          [0.4, '#DF5353']
        ]
      },
      dataLabels: {
        format: '<span style="font-size:10px;color:grey;">{y} delays</span></div>',
        y: 30,
        borderWidth: 0
      },
      tooltip: {
        valueSuffix: ' days'
      }
    }]

  }));
});