$(function () {
  var data = [5, 10, 15, 20, 15, 30, 40],
    totalPoints = 100;
  function getRandomData() {
    if (data.length > 0) data = data.slice(1);
    // Do a random walk
    while (data.length < totalPoints) {
      var prev = data.length > 0 ? data[data.length - 1] : 10,
        y = prev + Math.random() * 10 - 5;
      if (y < 0) {
        y = 0;
      } else if (y > 100) {
        y = 100;
      }
      data.push(y);
    }
    // Zip the generated y values with the x values
    var res = [];
    for (var i = 0; i < data.length; ++i) {
      res.push([i, data[i]]);
    }
    return res;
  }
  // Set up the control widget
  var updateInterval = 1000;
  $("#updateInterval")
    .val(updateInterval)
    .change(function () {
      var v = $(this).val();
      if (v && !isNaN(+v)) {
        updateInterval = +v;
        if (updateInterval < 1) {
          updateInterval = 1;
        } else if (updateInterval > 1000) {
          updateInterval = 1000;
        }
        $(this).val("" + updateInterval);
      }
    });
  var plot = $.plot("#placeholder1", [getRandomData()], {
    series: {
      shadowSize: 1, // Drawing is faster without shadows
      lines: { fill: true, fillColor: "transparent" },
    },
    yaxis: {
      min: 0,
      max: 100,
      show: true,
    },
    xaxis: {
      show: false,
    },
    colors: ["#fe5419"],
    grid: {
      color: "#AFAFAF",
      hoverable: true,
      borderWidth: 0,
      backgroundColor: "transparent",
    },
    tooltip: true,
    tooltipOpts: {
      content: "Visits: %x",
      defaultTheme: false,
    },
  });
  window.onresize = function (event) {
    $.plot($("#placeholder1"), [getRandomData()]);
  };
  function update() {
    plot.setData([getRandomData()]);
    // Since the axes don't change, we don't need to call plot.setupGrid()
    plot.draw();
    setTimeout(update, updateInterval);
  }
  update();
});