$(document).ready(function() {

/* Done setting the chart up? Time to render it!*/
var data = [
  {
    values: [],
    key: 'Event queue length',
    color: '#000000'
  },
]

/*These lines are all chart setup.  Pick and choose which chart features you want to utilize. */
nv.addGraph(function() {
  var chart = nv.models.lineChart()
                .margin({right: 80})  //Adjust chart margins to give the x-axis some breathing room.
                .useInteractiveGuideline(true)  //We want nice looking tooltips and a guideline!
                .transitionDuration(350)  //how fast do you want the lines to transition?
                .showLegend(false)       //Show the legend, allowing users to turn on/off line series.
                .showYAxis(true)        //Show the y-axis
                .showXAxis(true)        //Show the x-axis
                .noData("Waiting for queue length data...")
  ;

  // Chart x-axis settings
  chart.xAxis
      .tickPadding(9)
      .tickFormat(function(d) {
          return d3.time.format('%H:%M:%S')(new Date(d))
      });

  // Chart y-axis settings
  chart.yAxis
      .tickPadding(7)
      .tickFormat(d3.format(',d'));

  d3.select('#chart svg')
      .datum(data)
      .call(chart);

  updateData();
  chart.update();

  // Poll every 5 seconds
  setInterval(function() {
      updateData()

      d3.select('#chart svg')
          .datum(data)
          .transition();

      d3.select("#chart svg rect")
          .style("opacity", 1)
          .style("fill", '#fff')

      chart.update()
  }, 3000);

  // Update the chart when window resizes.
  nv.utils.windowResize(function() { chart.update() });
  return chart;
});

function updateData() {
  var api_url = $('div#data-api-url').data('api-url');
  $.get(api_url + 'metrics?fields=event_queue_length', function(json) {
    var d = new Date().getTime();
    var value = {x: d, y: json.event_queue_length}
    data[0].values.push(value);

    // Remove old data, to keep the graph performant
    if (data[0].values.length > 100) {
      data[0].values.shift()
    }
  }, 'json')
}

});