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>
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:
- For C3 installation follow the guide: http://c3js.org/gettingstarted.html
- For D3 you can user the source remote connection: http://d3js.org/d3.v3.min.js
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.
