line chart in real time

30 views

Skip to first unread message

Maitep

unread,

Jun 19, 2017, 1:05:32 PM6/19/17

to d3-js

Hi guys, I am using D3 V3 to add items to a line chart, I obtain my data from a API, so first I create my plot with the last minute so I obtain the last 60 points I create my plot

function create_lines(){
  var timeNameFormat = d3.time.format("%I:%M:%S");


  minDate = d3.min(all_data, function(d) { 
    return new Date(d.date); 
  });


  maxDate = d3.max(all_data, function(d) { return new Date(d.date); });
  


  minDateValue = d3.min(all_data, function(d) { 
    return d.value; 
  });


  maxDateValue = d3.max(all_data, function(d) { return d.value; });


  var vis = d3.select("#visualisation"),
    WIDTH = 1000,
    HEIGHT = 500,
    MARGINS = {
        top: 20,
        right: 20,
        bottom: 20,
        left: 50
    },

  xScale = d3.time.scale().range([MARGINS.left, WIDTH-MARGINS.right]).domain([minDate,maxDate]),
  yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([minDateValue,maxDateValue]),

  xAxis = d3.svg.axis().scale(xScale),
  yAxis = d3.svg.axis().scale(yScale).orient("left");
  
  vis.append("svg:g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
    .call(xAxis);


  vis.append("svg:g")
    .attr("class", "axis")
    .attr("transform", "translate("+(MARGINS.left)+",0)")
    .call(yAxis);

  var dataGroup = d3.nest()
    .key(function(d) {
        return d.name;
    })
    .entries(all_data);


  var lineGen = d3.svg.line()
    .x(function(d){
       return xScale(new Date(d.date));
    })
    .y(function(d){
      return yScale(d.value);
    })
    .interpolate("basis");

  dataGroup.forEach(function(d, i) {
    vis.append('svg:path')
      .attr('d', lineGen(d.values))
      .attr('stroke', 'blue')
      .attr('stroke-width', 2)
      .attr('fill', 'none');
  });

  var inter = setInterval(function() { 
    update_sensor =[]; 
    updateData();
    }, 1000);

this show this plot

Now I want to add new point to this plot each second, I use this call to do that

var inter = setInterval(function() { 
    update_sensor =[]; 
    updateData();
    }, 1000);

this add new point to my plot I use that

function updateData(){    
    var new_obj = {};
    for (var i = 0; i < sensor_type.length; i++) {
      getInfoCurrentSensor(sensor_type[i]).then(function(result){
        var new_obj = {};
        new_obj['name'] = "";
        new_obj['data'] = final_data.reverse()
        update_sensor.push(new_obj);
        size = update_sensor.length-1;
        update_sensor[size]["name"]= sensor_type[size];
        // console.log(update_sensor.length);
        if (update_sensor.length >= sensor_type.length ){
          
          for (var i = 0; i < update_sensor.length; i++) {
            key = update_sensor[i]['name']
            $.each(update_sensor[i]['data'], function( index, value ){
                value.name = key;
                all_data.push(value);
            })
          }

          xScale = d3.time.scale().range([MARGINS.left, WIDTH-MARGINS.right]).domain([minDate,maxDate]),
          yScale = d3.scale.linear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([minDateValue,maxDateValue]),
          xAxis = d3.svg.axis().scale(xScale),
          yAxis = d3.svg.axis().scale(yScale).orient("left");

          var dataGroup = d3.nest()
            .key(function(d) {
                return d.name;
            })
            .entries(all_data);

          var lineGen = d3.svg.line()
            .x(function(d){
               return xScale(new Date(d.date));
            })
            .y(function(d){
              return yScale(d.value);
            })
            .interpolate("basis");

          dataGroup.forEach(function(d, i) {
            vis.append('svg:path')
              .attr('d', lineGen(d.values))
              .attr('stroke', 'blue')
              .attr('stroke-width', 2)
              .attr('fill', 'none');
          });
          all_data.shift();
        }  
      })
    }
  }

But this generate something like that.

I don't know how to update new point in xAxis and move the plot to the left when I add a new point... any idea about that