score:0

var data_set = [{
    'Date': '2009-03-23',
    'Raw': 25,
    'Raw2': 25,
    'Asset': 'A'
  },
  {
    'Date': '2009-03-24',
    'Raw': 28,
    'Raw2': 25.4,
    'Asset': 'A'
  },
  {
    'Date': '2009-03-25',
    'Raw': 26,
    'Raw2': 25.37,
    'Asset': 'A'
  },
  {
    'Date': '2009-03-26',
    'Raw': 22,
    'Raw2': 25.03,
    'Asset': 'A'
  },
  {
    'Date': '2009-03-27',
    'Raw': 19,
    'Raw2': 24.42,
    'Asset': 'A'
  },
  {
    'Date': '2009-03-28',
    'Raw': 23,
    'Raw2': 24.28,
    'Asset': 'A'
  }
]


var margin = {
  top: 30,
  right: 50,
  bottom: 30,
  left: 50
};
var svgWidth = 600;
var svgHeight = 1000;
var graphWidth = svgWidth - margin.left - margin.right;
var graphHeight = svgHeight - margin.top - margin.bottom;
// var parseDate = d3.timeParse("%d/%m/%Y");
var parseDate = d3.timeParse("%Y-%m-%d");

var x = d3.scaleTime().range([0, graphWidth]);
var y = d3.scaleLinear().range([graphHeight, 0]);
var z = d3.scaleOrdinal(d3.schemeCategory10); // for colours
var xAxis = d3.axisBottom().scale(x).ticks(10);
var yAxis = d3.axisLeft().scale(y).ticks(10);

// Need to create the lines manually for each bit of data
var line = d3.line()
  .x(function(d) {
    return x(d.date);
  })
  .y(function(d) {
    return y(d.y);
  });

// Creates the SVG area within the div on the dom 
// Just doing this once 
var svg = d3.select("#graphDiv")
  .append("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight)
var g = svg.append("g")
  .attr("transform",
    "translate(" + margin.left + "," + margin.top + ")")
  .call(d3.zoom().on("zoom", function() {
    svg.attr("transform", d3.event.transform)
  }));

// Add the X Axis
g.append("g").attr("class", "x axis")
  .attr("transform", "translate(0," + graphHeight + ")")
  .call(xAxis);
// Text label for x axis 
g.append("text")
  .style("text-anchor", "middle")
  .text("timeseries dates")
  .attr("transform", "translate(" + (graphWidth / 2) + " ," + (graphHeight + margin.top) + ")");

// Add the Y Axis
g.append("g")
  .attr("class", "y axis")
  .call(yAxis);
// text label for the y axis
g.append("text")
  .attr("transform", "rotate(-90)")
  .attr("y", 0 - margin.left)
  .attr("x", 0 - (graphHeight / 2))
  .attr("dy", "1em")
  .style("text-anchor", "middle")
  .text("price points");


function drawGraph(data_set) {

  let pathData = []
  //assume 2 paths
  pathData.push([])
  pathData.push([])

  // Pass in the data here 
  data_set.forEach(function(d) {

    let path0 = {}
    let path1 = {}

    path0.date = parseDate(d.Date)
    path1.date = parseDate(d.Date)

    path0.y = +d.Raw
    path1.y = +d.Raw2

    pathData[0].push(path0)
    pathData[1].push(path1)

  });

  x.domain(d3.extent(data_set, function(d) {
    return parseDate(d.Date);
  }));

  y.domain([
    d3.min(data_set, function(d) {
      return Math.min(d.Raw, d.Raw2)
    }),
    d3.max(data_set, function(d) {
      return Math.max(d.Raw, d.Raw2)
    })
  ]);

  var lines = g.selectAll(".path")
    .data(pathData)

  lines.exit().remove()

  var enter = lines.enter()
    .append("path")
    .attr("class", "path")
    .style("stroke", (d, i) => z(i))

  var merge = enter.merge(lines)
    .attr("d", line)



}
// display initial chart
window.onload = drawGraph(data_set)
// Push new data every 5 seconds for a specific date
var h = setInterval(function() {
  data_set.push({
    'Date': '2009-03-29',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-03-30',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-03-31',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-04-01',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-04-02',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  }, {
    'Date': '2009-04-03',
    'Raw': Math.floor(Math.random() * 50),
    'Raw2': Math.floor(Math.random() * 25),
    'Asset': 'A'
  });
  drawGraph(data_set);
  clearInterval(h); //doing this so that it doesnt spam - if i uncomment this, it will keep spamming new lines
}, 5000); >
body {
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

path {
  fill: none;
  stroke: black
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<div id="graphDiv"></div>

There are few issues with your current code that need addressing:

  1. To create 2 lines based on data, it would be best for the array to contain 2 elements, each with its own array of data points. This will allow the line function to work as intended and be resuable across each line you want to create. In the example below, I create a new dataset ('pathData') to achieve this.

  2. The enter/update/merge pattern needs to updating so that you only create the lines once, and thereafter just update the path ('d' attr) when new data arrives


Related Query

More Query from same tag