2

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>
giulio
  • 659
  • 2
  • 8
  • 22

2 Answers2

9

For anyone else following this thread I would like to suggest you can use the following content delivery network (CDN) resources to load your D3.js, and C3.js libraries:

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">  
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>

I loaded your chart without a problem coding these resources into the <head> section of my document.

WebFixItMan
  • 231
  • 2
  • 9
5

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:

aberna
  • 5,594
  • 2
  • 28
  • 33
  • I followed the instructions for installation, but the error is "ReferenceError: c3 is not defined". Yet, I am not referencing c3 anywhere – giulio Feb 14 '15 at 19:49
  • quick solution. copy the c3.min.js in the directory of the html file. If it works start reasoning how to structure your project in directories (example js/c3.min.js) – aberna Feb 14 '15 at 19:51