How can I bind at a later time a billboardjs chart?

Question

The docs say that when the chart is not bound, it'll start observing the chart.element property. I've tried not setting the bindto property for the options object passed to generate, and also setting it to null. But if I later set the chart.element property to anything i.e. chart.element = document.getElementById("#chart-here"), nothing happens.

What is the correct approach of doing this? Or is it something that I misunderstood? Thanks.

score 1 · Accepted Answer · answered Jan 18 '18 at 18:04

You just need to use setTimeout https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout

var generateChart = function () {
  bb.generate({
    data: {
      columns: [
    ["data1", 30, 200, 100, 400, 150, 250],
    ["data2", 50, 20, 10, 40, 15, 25]
      ]
    },
    bindto: "#chart-here"
  });
};
setTimeout(generateChart, 2000)

<title>billboard.js</title>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css">
Chart will appear in 2 seconds...
<div id="chart-here"></div>

I actually completely forgot about setTimeout, which was in the end the chosen way. Thanks! — knee pain, Jan 26 '18 at 13:56

How can I bind at a later time a billboardjs chart?

1 Answers1