JSFiddle - React, Tailwind, and code Playground

by dzul1983

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.css">
<div id="barChart" class="chart__rtm-status--bar"></div>
<div id="pieChart" class="chart__rtm-status--pie"></div>

<button>Randomize</button>

JavaScript

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

function randomize(id) {
  return [
    id,
    getRandomInt(0, 100),
    getRandomInt(0, 100),
    getRandomInt(0, 100),
    getRandomInt(0, 100),
    getRandomInt(0, 100)
  ]
}

let data = randomize('data1');
console.log(data)

const chart = c3.generate({
  bindto: '#barChart',
  data: {
    columns: [
      data
    ],
    types: {
      data1: 'bar'
    }
  }
});

const chart2 = c3.generate({
  bindto: '#pieChart',
  data: {
    columns: [
      ['data1', getRandomInt(0, 100)],
      ['data2', getRandomInt(0, 100)],
      ['data3', getRandomInt(0, 100)],
      ['data4', getRandomInt(0, 100)],
      ['data5', getRandomInt(0, 100)],
    ],
    type: 'pie',
    order: null
  }
});

$('button').on('click', function() {
  chart.load({
    columns: [
      randomize('data1')
    ]
  });

  chart2.load({
    columns: [
      ['data1', getRandomInt(0, 100)],
      ['data2', getRandomInt(0, 100)],
      ['data3', getRandomInt(0, 100)],
      ['data4', getRandomInt(0, 100)],
      ['data5', getRandomInt(0, 100)],
    ]
  })
})