Search code examples
htmlvisualizationdata-visualizationc3

Visualizing a chart using c3

I am trying to reproduce some code to generate a chart using c3. This script does not render anything though. Why? (the files listed in href are in the same folder)

<!DOCTYPE html>
<html>
<head>
  <!-- Load c3.css -->
  <link href="c3.css" rel="stylesheet" type="text/css">

  <!-- Load d3.js and c3.js -->
  <script src="d3.v3.min.js" charset="utf-8"></script>
  <script src="c3.min.js"></script>

  <meta charset="UTF-8">
  <title>title </title>
</head>
<body>
  <div id="chart"></div>
  <script>
  var chart = c3.generate({
    bindto: '#chart',
    data: {
      columns: [
        ['data1', 30, 200, 100, 400, 150, 250],
        ['data2', 50, 20, 10, 40, 15, 25]
      ]
    }
});
</script>
</body>
Solution

  • This is a working example so if chart is not loaded probably you are not referencing correctly to the libraries C3 and D3.

    Check in the web console (usage in Chrome here) of your browser if libraries are missing.

    Check this steps: