<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
  </head>
  <body>
    <div id="chart1"></div>
    <div id="chart2"></div>

    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script src="/js/c3.js"></script>
    <script>

      var chart1 = c3.generate({
        data: {
          columns: [
            ['sample', 30, 200, 100, null, 150, 250]
          ],
        },
      });

      var chart2 = c3.generate({
        data: {
          columns: [
            ['sample', 30, 200, 100, null, 150, 250]
          ],
          type: 'bar'
        }
      });

      document.getElementById('chart1').appendChild(chart1.element);

      $('#chart2').append(chart2.element);

    </script>
  </body>
</html>