Drawing multiple real time lines

I want to draw multiple real time lines using JSON files. I am basically retrieving the JSON file from a website, getting the time data (duration in seconds), converting them into minutes and pushing them into the data array. This code checks the JSON file for every second.

I want to add as many line as possible. For example, I want to add the average of the elements in data array (average duration) and plot it on the same plane. I tried to add another "line" and "path" variable, however I wasn't able to plot it at the same time.

The data array is an empty array with 44 elements in the beginning, and everytime the code checks the JSON file it replaces those zeroes with the retrieved duration data.

Here is my code to draw only one line.

  function graph() {

  var n = 43,
      duration = 1000,
      now = new Date(Date.now() - duration),
      count = 0,
      data = d3.range(n).map(function() { return 0; });

  var margin = {top: 10, right: 20, bottom: 30, left: 60},
      width = 1200 - margin.left-margin.right,
      height = 460 - margin.top - margin.bottom;

  var x = d3.time.scale()
      .domain([now - (n - 2) * duration, now - duration])
      .range([0, width]);

  var y = d3.scale.linear()
      .range([height, 0]);

  var line = d3.svg.line()
      .interpolate("basis")
      .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
      .y(function(d, i) { return y(d); });

  var line2 = d3.svg.line()
      .interpolate("basis")
      .x(function(d, i) { return x(now - (n - 1 - i) * duration); })
      .y(function(d, i) { return y(d); });

  var svg = d3.select("body").append("p").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
      .style("margin-left", -margin.left + "px")
    .append("g")
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

  svg.append("defs").append("clipPath")
      .attr("id", "clip")
    .append("rect")
      .attr("width", width)
      .attr("height", height);

  var axis = svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate( "+margin.left+"," + height + ")")
      .call(x.axis = d3.svg.axis().scale(x).orient("bottom"));


  var yaxis = svg.append("g")
      .attr("class", "y axis")
      .attr("transform", "translate(" + margin.left + ",0)")
      .call(y.axis = d3.svg.axis().scale(y).orient("left"));


  d3.select(".y.axis")
      .append("text")
      .text("Travel Time (min)")
      .attr("text-anchor", "middle")
      .attr("transform","rotate( -90, 200, 0)")
      .attr("y",-250);

  var path = svg.append("g")
      .attr("clip-path", "url(#clip)")
      .attr("transform", "translate(" + margin.left + ",0)")
      .append("path")
      .data([data])
      .attr("class", "line");

  tick();

  function tick() {

    d3.json("route.json",function(barzo){
      var tempdata = barzo.route;
      var len = tempdata.realTime;
      var lastdata = parseInt(len)/60; //this is the time variable I use.

    // update the domains
    now = new Date();
    x.domain([now - (n - 2) * duration, now - duration]);
    y.domain([0, d3.max(data)+5]);

   // push the time into the data
    data.push(count);
    count = lastdata;

    // redraw the line
    svg.select(".line")
        .attr("d", line)
        .attr("transform", null);

    // slide the x-axis left
    axis.transition()
        .duration(duration)
        .ease("linear")
        .call(x.axis);

    yaxis.transition()
        .duration(duration/10)
        .ease("linear")
        .call(y.axis);

    // slide the line left
    path.transition()
        .duration(duration)
        .ease("linear")
        .attr("transform", "translate(" + x(now - (n - 1) * duration) + ")")
        .each("end", tick);


    // pop the old data point off the front
    data.shift();

  });
  }
  };