Alert Duration Chart

by aljordan82

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:800px;" ></div>

CSS

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

JavaScript

var alertSeverityMap = {
    0: 'none',
    1: '#0f0',
    2: '#00f',
    3: '#ffa500 ',
    4: '#ffff00 ',
    5: '#f00'
};

var $scope = {}
var rawData = {  "alertRules": [
                    {
                      "alertSeverity": 5,
                      "alertCondition": {
                        "minimum": {
                          "value": 3840
                        },
                        "maximum": {
                          "value": 90000
                        }
                      }
                    }  ,
                        {
                      "alertSeverity": 2,
                      "alertCondition": {
                        "minimum": {
                          "value": 600
                        },
                        "maximum": {
                          "value": 3840
                        }
                      }
                    },
                    {
                      "alertSeverity": 1,
                      "alertCondition": {
                        "minimum": {
                          "value": 0
                        },
                        "maximum": {
                          "value": 600
                        }
                      }
                    }
                  ]
                }

var data = []
var seriesConfiguration =[]





               $scope.data= [];

                  var seriesConfiguration = [];
                  var sortedArray =[]; 
                  var yMin = 0;// lowest y axis value
                  var yMax;
                  var xMin = Infinity;
                  var xMax = -Infinity;

                  // Set maximum X axis Value. This is the Highest value for an alert.
                  function setXMax(val){
                    if (val > xMax) {
                      xMax = val;
                    }
                  }

                  function setXMin(val){
                    if (val < xMin) {
                      xMin = val;
                ...