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=".css">
<script src=".v3.min.js" charset="utf-8"></script>
<script src=".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>
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./masayuki0812/c3/master/c3.css">
<script src="http://d3js/d3.v3.min.js" charset="utf-8"></script>
<script src="https://rawgit./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 Commented May 22, 2015 at 15:19
- @StanislavMekhonoshin he didn't let go of the shift key when typing the 3 in C3 – user1228 Commented May 22, 2015 at 15:20
- well, now it is fixed and looks ok – Stanislav Mekhonoshin Commented May 22, 2015 at 15:21
- c3.js is an opensource javascript for chart building. i don't think it has anything to do with c# – Lee Denson Commented May 22, 2015 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 Commented May 22, 2015 at 15:34
1 Answer
Reset to default 7First, 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./ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare./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./ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare./ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare./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./ajax/libs/d3/3.5.5/d3.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/c3/0.4.10/c3.min.js"></script>
<link href="https://cdnjs.cloudflare./ajax/libs/c3/0.4.10/c3.min.css" rel="stylesheet" />
<div id="chart"></div>