$(document).ready(function () {


$.get("Result.json", function(result, status){
      //alert("Data: " + result + "\nStatus: " + status);
  var resultdata = [];

  for (var j = 0; j < 8; ++j) {
    resultdata[j] = [j];
  }

  resultdata[0][0] = 5;
  resultdata[1][0] = 10;
  resultdata[2][0] = 15;
  resultdata[3][0] = 20;
  resultdata[4][0] = 25;
  resultdata[5][0] = 30;
  resultdata[6][0] = 35;
  resultdata[7][0] = 40;

  var labels = ['x'];
  var j = 1;
  result.forEach(function(data){
    labels[j] = data.runner_name;

    resultdata[0][j] = data.km5_lap;
    resultdata[1][j] = data.km10_lap;
    resultdata[2][j] = data.km15_lap;
    resultdata[3][j] = data.km20_lap;
    resultdata[4][j] = data.km25_lap;
    resultdata[5][j] = data.km30_lap;
    resultdata[6][j] = data.km35_lap;
    resultdata[7][j] = data.km40_lap;
    j++;
  });

  //makeGraph("few", 20, 50, false);
  //makeGraph("few", 10, 20, true);
  makeGraph("many", 75, 50, false, resultdata, labels);
  //makeGraph("many", 40, 50, true);

});


var makeGraph = function(className, numSeries, numRows, isStacked, data, labels) {
  var demo = document.getElementById('demo');
  var div = document.createElement('div');
  div.className = className;
  div.style.display = 'inline-block';
  div.style.margin = '4px';
  demo.appendChild(div);

  var g = new Dygraph(
      div,
      data,
      {
        width: 480,
        height: 320,
        labels: labels.slice(),
        stackedGraph: isStacked,

        highlightCircleSize: 2,
        strokeWidth: 1,
        strokeBorderWidth: isStacked ? null : 1,

        highlightSeriesOpts: {
          strokeWidth: 3,
          strokeBorderWidth: 1,
          highlightCircleSize: 5
        }
      });

  var onclick = function(ev) {
    if (g.isSeriesLocked()) {
      g.clearSelection();
    } else {
      g.setSelection(g.getSelection(), g.getHighlightSeries(), true);
    }
  };
  g.updateOptions({clickCallback: onclick}, true);
  g.setSelection(false, 's005');
  //console.log(g);
};

    }
);