Why isn't the C3 Chart appearing?

Question

I am trying to create a simple chart and it just doesn't work. Any help would be great. I followed the instructions found on the C3.js documentation website, but I still get a blank page.

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://rawgit.com/masayuki0812/c3/master/c3.css">
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/masayuki0812/c3/master/c3.js"></script>

<script>
var chart = c3.generate({
bindto: '#chart',
data: {
  columns: [
    ['data1', 30, 200, 100, 400, 150, 250],
    ['data2', 50, 20, 10, 40, 15, 25]
  ]
}
});

</script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

why there is C# in the title? It seems not to be related with .NET or C# — Stanislav Mekhonoshin, May 22 '15 at 15:19
@StanislavMekhonoshin he didn't let go of the shift key when typing the 3 in C3 — , May 22 '15 at 15:20
c3.js is an opensource javascript for chart building. i don't think it has anything to do with c# — Lee Denson, May 22 '15 at 15:23
I checked the javascript log in chrome and it keeps giving me errors in both javascripts. I guess I need a proper link to get working .js files. — Lee Denson, May 22 '15 at 15:34
Here is a working example of what I need: http://jsfiddle.net/Tropicalista/bt56r29q/1/ — Lee Denson, May 22 '15 at 15:37

Mr. Polywhirl · Accepted Answer · 2015-05-22T16:00:42.500

First, I would check for cross-origin exceptions. This is usually cause by using scripts that are hosted on other websites. If you are having issues such as this, look for a Content Delivery Network (CDN). These sites host scripts that can be run on any website.

But I believe your problem is that you are running JavaScript code before the document has finished loading. There are two ways to ensure that an element is loaded before you start performing JavaScript on the DOM.

Script in the HEAD (Using Timeout)

Your HTML page's source should look like this. You will need to wait for the element to be loaded first. This utilized pure JavaScript and does not need jQuery.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
    
    <script type="text/javascript">
      onReady('#chart', function() {
        var chart = c3.generate({
          data: {
            columns: [
              ['data1', 300, 350, 300, 0, 0, 0],
              ['data2', 130, 100, 140, 200, 150, 50]
            ],
            types: {
              data1: 'area',
              data2: 'area-spline'
            }
          },
          axis: {
            y: {
              padding: {
                bottom: 0
              },
              min: 0
            },
            x: {
              padding: {
                left: 0
              },
              min: 0,
              show: false
            }
          }
        });
      });
      
      // Set a timeout so that we can ensure that the `chart` element is created.
      function onReady(selector, callback) {
        var intervalID = window.setInterval(function() {
          if (document.querySelector(selector) !== undefined) {
            window.clearInterval(intervalID);
            callback.call(this);
          }
        }, 500);
      }
    </script>
  </head>
  <body>
    <div id="chart"></div>
  </body>
</html>

Script at DOM End (Without Timeout)

You could also run the script following the chart element. This script will be guaranteed to run, because the target object #chart has already been parsed by the browser and loaded.

<!DOCTYPE html>
<html>
  <head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
  </head>
  <body>
    <div id="chart"></div>

    <script type="text/javascript">
      var chart = c3.generate({
        data: {
          columns: [
            ['data1', 300, 350, 300, 0, 0, 0],
            ['data2', 130, 100, 140, 200, 150, 50]
          ],
          types: {
            data1: 'area',
            data2: 'area-spline'
          }
        },
        axis: {
          y: {
            padding: {
              bottom: 0
            },
            min: 0
          },
          x: {
            padding: {
              left: 0
            },
            min: 0,
            show: false
          }
        }
      });
    </script>
  </body>
</html>

Stack Overflow Snippet

Here is a working example. Make sure your paths are correct to your D3 and C3 files.

var chart = c3.generate({
  data: {
    columns: [
      ['data1', 300, 350, 300, 0, 0, 0],
      ['data2', 130, 100, 140, 200, 150, 50]
    ],
    types: {
      data1: 'area',
      data2: 'area-spline'
    }
  },
  axis: {
    y: {
      padding: {
        bottom: 0
      },
      min: 0
    },
    x: {
      padding: {
        left: 0
      },
      min: 0,
      show: false
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />

<div id="chart"></div>

Nice!! I actually got it working by referencing source https://code.jquery.com/jquery-1.10.1.min.js . Without it, the graph won't show on mine. — Lee Denson, May 22 '15 at 16:00

Why isn't the C3 Chart appearing?

1 Answers1

Script in the HEAD (Using Timeout)

Script at DOM End (Without Timeout)

Stack Overflow Snippet