$(document).ready(function() {

renew();

setInterval(renew,5000);

});

function renew(){

$.getJSON($(location).attr('href')+"/renew.json",function(data){
  console.log(data);

  $('#cpu_chart').text('');
  $('#ram_chart').text('');
  $('#down_chart').text('');
  $('#up_chart').text('');

  var cpu_graph = new Rickshaw.Graph( {
    element: document.querySelector("#cpu_chart"), 
    renderer: 'line', 
    height: 200,
    max: 102,
    min: -2, 
    series: [{
        data: data.cpu,
        color: 'steelblue'
    }]
  }); 
  var down_graph = new Rickshaw.Graph( {
    element: document.querySelector("#down_chart"), 
    renderer: 'line', 
    height: 200, 
    series: [{
        data: data.down,
        color: 'steelblue'
    }]
  });
  var up_graph = new Rickshaw.Graph( {
    element: document.querySelector("#up_chart"), 
    renderer: 'line', 
    height: 200, 
    series: [{
        data: data.up,
        color: 'steelblue'
    }]
  });

  var ram_graph = new Rickshaw.Graph( {
    element: document.querySelector("#ram_chart"), 
    renderer: 'line', 
    height: 200,
    max: 102,
    min: -2, 
    series: [{
        data: data.ram,
        color: 'steelblue'
    }]
  });

  var yAxisCpu = new Rickshaw.Graph.Axis.Y({
    graph: cpu_graph
  });

  var yAxisDown = new Rickshaw.Graph.Axis.Y({
    graph: down_graph
  });
  var yAxisUp = new Rickshaw.Graph.Axis.Y({
    graph: up_graph
  });

  var yAxisRam = new Rickshaw.Graph.Axis.Y({
    graph: ram_graph
  });

  cpu_graph.render();
  ram_graph.render();
  down_graph.render();
  up_graph.render();
  yAxisDown.render();
  yAxisUp.render();
  yAxisCpu.render();
  yAxisRam.render();

  removeNotify($('#notification'));
}).fail(function() {
  createNotify('Connection lost!', $('#notification'));
});

}