Alert Chart

HTML

<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/jqplot/1.0.8/jquery.jqplot.min.css">
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.barRenderer.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.categoryAxisRenderer.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.pointLabels.min.js"></script>
<script src="http://cdn.jsdelivr.net/jqplot/1.0.8/plugins/jqplot.canvasTextRenderer.min.js"></script>
<div id="container" style="height:200px;width:400px;" ></div>

CSS

/* Don't use CSS to set dimentions*/
#container {
    width:400px;
    height: 200px,
}

JavaScript

var rawData = { 
              "alertRules": [
                {
                 "alertSeverity": 4,
                  "alertCondition": {
                    "minimum": 1,
                    "maximum": 3
                  },
                },
                {
                  "alertSeverity": 2,
                  "alertCondition": {
                    "minimum": 2,
                    "maximum": 4
                  },
                },
                {
                  "alertSeverity": 1,
                  "alertCondition": {
                    "minimum": 3,
                    "maximum": 5
                  },
                },
                {
                  "alertSeverity": 5,
                  "alertCondition": {
                    "minimum": 4,
                    "maximum": 6
                  },
                }
              ]
            }

var data = []

for(var i= 0; i < rawData.alertRules.length;i++){
    var alert = rawData.alertRules[i];  
           
    data.push([[alert.alertCondition.minimum, i ,''],[alert.alertCondition.maximum,i,'']])   
}





$(document).ready(function() {


    
    function timeFormatter(format, time){
     //   debugger
    var date = new Date(time)
    
    
    return date.getHours() + ":" + date.getMinutes();
    }
    
    data.length = 2
    var len = (data.length * 30 +50 )
    console.log(len)
   $('#container').height( len + 'px')
    
    
        plot1 = $.jqplot('container', data,{ 
            height :'600px',
            axes: {
              yaxis: {
                renderer: $.jqplot.DateAxisRenderer, // can be deleted        
                    tickRenderer: $.jqplot.CanvasAxisTickRenderer,
                    tickOptions: {
                      // formatString: '%H',
                       // angle: 0
                        show: false,
                        showLabel: true,
                    },
                 // pad: 0,
                  // ticks: ['green','red','blue'],
      ...