score:2

Accepted answer

You can do it this way:

First you need to define the object like this:

var rects = svg.selectAll('rect')
.data(sales, function(d){/*Unique ID of a record*/ return d.product;});

Now create rectangle like this:

  newRects.append('rect');

Now update all the rect with new width and height.

  //do update
  d3.selectAll("rect")
  .attr('class', "rects")
  .attr('x', function(d) {
    console.log(d)
    return x(d.product);
    })
  .attr('y', function(d, i) {
    return y(d.count);
  })
  .attr('width', x.rangeBand())
  .attr('height', function(d, i) {
    return 400 - y(d.count);
  });

Finally remove bars for which data has been removed:

  //remove not there
    rects.exit().remove()

The problem why your code was not updating:

When you do this the attribute update only on create

newRects.append('rect')
        .attr('x', function(d) {
            return x(d.product);
        })
    .attr('y', function(d, i) {
        return y(d.count);
    })
    .attr('width', x.rangeBand())
    .attr('height', function(d, i) {
      return 400 - y(d.count);
    });

Working code here

Hope this helps!

score:0

You can use setInterval() function to call particular function for a given period. So you just written an update function to update graph and set it as an argument of setInterval function.

For Example:

<!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {

var dps1 = []; // dataPoints
var dps2 = []; // dataPoints
var dps3 = []; // dataPoints
var dps4= []; // dataPoints

var chart = new CanvasJS.Chart("chartContainer", {
    title :{
        text: "Dynamic Data"
    },
    axisY: {
        includeZero: false
    },      
    data: [{
        type: "spline",
        dataPoints: dps1
    },{
        type: "spline",
        dataPoints: dps2
    },{
        type: "spline",
        dataPoints: dps3
    },{
        type: "spline",
        dataPoints: dps4
    }
    ]
});

var xVal = 0;
var yVal = 100; 
var updateInterval = 1000;
var dataLength = 20; // number of dataPoints visible at any point

var updateChart = function (count) {

    count = count || 1;

    for (var j = 0; j < count; j++) {
        yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
        dps1.push({
            x: xVal,
            y: yVal
        });
        yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
        dps2.push({
            x: xVal,
            y: yVal
        });
        yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
        dps3.push({
            x: xVal,
            y: yVal
        });
        yVal = yVal +  Math.round(5 + Math.random() *(-5-5));
        dps4.push({
            x: xVal,
            y: yVal
        });

        xVal++;
    }

    if (dps1.length > dataLength) {
        dps1.shift();
    }
    if (dps2.length > dataLength) {
        dps2.shift();
    }
    if (dps3.length > dataLength) {
        dps3.shift();
    }
    if (dps4.length > dataLength) {
        dps4.shift();
    }

    chart.render();
};

updateChart(dataLength);
setInterval(function(){updateChart()}, updateInterval);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; max-width: 920px; margin: 0px auto;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</body>
</html>

Here I update my chart in every one seconds.


Related Query