anchor.diff:      data="{{vm.availabilityDataPoints}}"
       chart-type="availability">
   </availability-chart>
  -
   ----
   The availability chart makes it easy to visualize the availability types:
   
  
positive.code: * down
  * unknown (no data was collected for this time period, so we don't know if it was up or down)
  
  on a time line.
  Hovering over one of the areas provides additional information such as: when the period started/ended, the duration
  of the period and the status of the period.
  
  
  ==== Other Chart Types
  Here is an screen shot from the Hawkular Console that uses the multi-line chart for displaying JVM metrics:
  
  image::img/jvm-heap-chart.png[JVM Heap Chart via Multi-line Chart]
  
  Don't like the charts we have? Take one of the existing charts and modify (there are many types in the code).
  
  == How to Get
  
negative.code: *Sample Stand Alone Example Page:*  https://github.com/hawkular/hawkular-charts/blob/master/stand-alone-chart-sample.html[stand-alone-chart-sample.html]
  This allows dashboard templates to be emailed around (although they need to be rendered behind a http server of your choice).
  
  == Data Formats
  
  Metric Time Series data is generally viewed as a Tuple: `{metric, time, value}`. The Hawkular charts version looks like
  this:
  
  === Availability Data
  
  .Table Availability Data Format
  |===
  |Name |Type |Required |Description
  
  |start
  |number
  |Yes
  |Integer representing Starting period timestamp - milli-seconds since epoch(unix)
  
  |end
  |number
  |Yes
  |Integer representing Ending period timestamp - milli-seconds since epoch(unix)
  
  |value
  |text
  |Yes
  |String enum of Availability Type('up','down','unknown')
  
  
  |duration
  |text
  |No
  |String with duration period to show in hover
  
  
  |message
  |text
  |No
  |String with message **Not Used Yet**
  |===
  
  _Example:_
  [source,javascript]
  ----
   var availChartData = [{"timestamp": 1438025381038, "value": "up"},
       {"timestamp": 1438031047504, "value": "down"}];
  ----
  
  
  
  === Metrics Data
  
  .Table Aggregated Metrics Data Format
  |===
  |Name |Type |Required |Description
  
  |timestamp
  |number
  |Yes
  |Integer representing milli-seconds since epoch(unix)
  
  |avg
  |number
  |Yes
  |Any valid number (int or decimal)
  
  |min
  |number
  |No
  |Any valid number (int or decimal)
  
  |max
  |number
  |No
  |Any valid number (int or decimal)
  
  
  |empty
  |boolean
  |No
  |boolean indicating if the chart should show *missing* data representation for this time period. This overrides the
  actual values.
  |===
  
  _Aggregate Metrics Example:_
  [source,javascript]
  ----
    var metricData = [{
          "timestamp": 1434476761167,
          "avg": 1912,
          "min": 1482,
          "max": 2342,
          "empty": false
        }, {
          "timestamp": 1434476791167,
          "avg": 1816,
          "min": 1816,
          "max": 1816,
          "empty": false
        }];
  ----
  
  TIP: If you don't have aggregate values then just populate the *avg* value with the desired metric value. Min, Max
  and Empty are optional.
  
  NOTE: Everything ends up being an aggregated value in time (usually after 8 hours). This is due to needing a
  consistently representable dataset that charts nicely. Raw datasets can easily become bottlenecks to the clients
  charting the data and unintended consequences of very large or small datasets can make for _strange_ looking charts.
  For this reason, we recommend bucketing data into a fixed set of datapoints that the charting client is comfortable
  handling performance-wise and that generally _fits_ the chart
  
  
  
  
  
  == Chart Customization
  
  