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>
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>
Related
I have used doughnut chart in my application, I need border radius but not working, I am using this borderRadius:30, could you please solve this issues.
$(function() {
//get the doughnut chart canvas
var ctx1 = $("#doughnut-chartcanvas-1");
//doughnut chart data
var data1 = {
labels: ["match1", "match2", "match3", "match4", "match5"],
datasets: [{
label: "TeamA Score",
borderRadius: 30,
data: [10, 50, 25, 70, 40],
backgroundColor: [
"#DEB887",
"#A9A9A9",
"#DC143C",
"#F4A460",
"#2E8B57"
],
borderColor: [
"#CDA776",
"#989898",
"#CB252B",
"#E39371",
"#1D7A46"
]
}]
};
//options
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "Doughnut Chart",
fontSize: 18,
fontColor: "#111",
},
borderRadius: 100,
legend: {
display: true,
position: "bottom",
labels: {
fontColor: "#333",
fontSize: 16
}
}
};
//create Chart class object
var chart1 = new Chart(ctx1, {
type: "doughnut",
data: data1,
options: options
});
});
<!DOCTYPE html>
<html>
<head>
<title>ChartJS - Doughnut</title>
<link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
<div class="chart-container">
<div class="doughnut-chart-container">
<canvas id="doughnut-chartcanvas-1"></canvas>
</div>
</div>
<!-- javascript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.9.1/chart.min.js"></script>
</body>
</html>
enter image description here
I need bend each corner in our doughnut chart . So how to use this properties inside of our code (outerStart, outerEnd, innerStart, innerRight). could you please let me know. How do I solve this.
You can use:
var data1 = {
borderRadius: [{ innerEnd: 200, outerEnd: 200, innerStart: 200, outerStart: 200}],
spacing: -300,
}
Following one example we can format the tick text. I see that this is set to multiline: true by default, which is fine, but I also want to be able to control where the line breaking happens. Is there a way to do that?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="tick"></div>
<script>
var chart = bb.generate({
data: {
x: "x",
columns: [
["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
["sample", 30, 200, 100, 400, 150, 250]
]
},
size: {
width: 500,
height: 250
},
legend: {
show: false
},
axis: {
x: {
height: 100,
type: "timeseries",
tick: {
rotate: -75,
format: function (x) {
return x.getFullYear() + ' control this line breaking ';
}
}
}
},
bindto: "#tick",
});
</script>
</body>
</html>
There's no <br> for svg text nodes. To line break, it needs to add a <tspan> node for each line of text.
For this moment, you can handle line-breaking with the axis.x.tick.width option.
axis: {
x: {
tick: {
width: 80
}
}
},
UPDATE - billboard.js now supports multiline
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.min.css" />
<script src="https://cdn.jsdelivr.net/npm/billboard.js/dist/billboard.pkgd.min.js"></script>
<title>JS Bin</title>
</head>
<body>
<div id="tick"></div>
<script>
var chart = bb.generate({
data: {
x: "x",
columns: [
["x", "2010-01-01", "2011-01-01", "2012-01-01", "2013-01-01", "2014-01-01", "2015-01-01"],
["sample", 30, 200, 100, 400, 150, 250]
]
},
size: {
width: 500,
height: 250
},
legend: {
show: false
},
axis: {
x: {
height: 100,
type: "timeseries",
tick: {
//rotate: -20,
format: function (x) {
return x.getFullYear() + ' \ncontrol \nthis \nline \nbreaking ';
}
}
}
},
bindto: "#tick",
});
</script>
</body>
</html>
I've created a chart diagram with C3.js.
It is generating chart perfectly.
<!DOCTYPE html>
<html>
<head>
<title>D3</title>
<!-- Load c3.css -->
<link href="c3_library/c3.css" rel="stylesheet">
<!-- Load d3.js and c3.js -->
<script src="d3_lib/d3.v3.min.js" charset="utf-8"></script>
<script src="c3_library/c3.min.js"></script>
<script src="jquery/jquery-3.2.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
</head>
<body>
<div id="chart1"></div>
<button onclick="loadData()">Load Data 2</button>
<script type="text/javascript">
var chart = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
xFormat: '%H:%M',
columns: [
['x', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43', '10:44', '10:45', '10:46', '10:47', '10:48', '10:49', '10:50', '10:51', '10:52'],
['User Logins', 0, 2, 0, 0, 0, 8, 0, 0, 0, 10, 0, 0, 0, 5, 0, 0]
]
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: true,
tick: {
format: '%H:%M'
}
}
}
});
function loadData() {
chart.load({
bindto: '#chart1',
data: {
x: 'x',
xFormat: '%H:%M',
columns: [
['x', '10:28', '10:29', '10:30', '10:31', '10:32', '10:33', '10:34', '10:35', '10:36', '10:37', '10:38', '10:39', '10:40', '10:41', '10:42', '10:43'],
['User Logins', 50, 2, 0, 2, 3, 4, 0, 0, 0, 10, 2, 0, 9, 5, 0, 0]
]
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: true,
tick: {
format: '%H:%M'
}
}
}
});
}
</script>
</body>
</html>
But when call chart.load() function it is not changing the chart. Also not showing any error. code snippet is attached here with. Here I've created a chart with using both x and y axis datasets.
You cannot load all in the load method (you can load rows, and columns) try this:
chart.load({
columns: [
[ 'x','10:28','10:29','10:30','10:31','10:32','10:33','10:34','10:35','10:36','10:37','10:38','10:39','10:40','10:41','10:42','10:43' ],
[ 'User Logins',50,2,0,2,3,4,0,0,0,10,2,0,9,5,0,0]
]
});
I want to make a simple graph, before advancing with the task I copied some of C3's chart samples which i save to an html file and open it with a browser and am ending up with a blank page.
An example of the code am trying to run is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>d3 | c3 Timeseries Chart test</title>
<link href="c3.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/c3/0.4.4/c3.min.js"></script>
<style>
body {font-family: monospace; line-height: 140%; font-size: 18px; }
</style>
</head>
<body>
<div class='chart'>
<div id='chart'></div>
</div>
<h4> Chart </h4>
<script type="text/javascript">
var chart = c3.generate({
data: {
x: 'x',
// xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
columns: [
['x', '2014-01-01', '2014-01-02', '2014-01-03', '2014-01-04', '2014-01-05', '2014-01-06'],
// ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350],
['data3', 70, 220, 200, 100, 600, 512]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['data4', 400, 500, 450, 700, 600, 100]
]
});
}, 1000);
</script>
</body>
</html>
</html>
Because C3.js is probably a huge file, downloading it takes a considerable amount of time. Meanwhile the browser runs your script, but because the file is still in a downloading state, c3 won't be defined.
To fix this, you have multiple options:
a) Put your script in a different file and add the defer tag to the script tag:
<script src="yourscript.js" defer="defer"></script>
b) Put your code in the window.onload function:
window.onload = function() {
// Your script goes here
}
I have an old web project that uses prototype.js and I'm trying to add charting to it using C3.
Unfortunately there's an error since prototype seems to add a bunch of methods to arrays and this specific method in c3.js checkValueInTargets uses Object.keys which grabs all the random methods in the array and then throws an error.
Is there a way to "hide" my charting code from prototype or a way to use the default JS arrays?
I can't remove or upgrade prototype unfortunately.
Thanks
sample project:
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
http://jsfiddle.net/Yq3DW/269/
One easy way to fix it would be to move the prototype script loading to after c3.js chart initialization call.
...
<link href="lib/c3.js/c3.css" rel="stylesheet" />
</head>
<body>
...
<div id="chart"></div>
...
<script src="lib/d3/d3.js" charset="utf-8"></script>
<script src="lib/c3.js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
</script>
<script src="lib/prototype/prototype.js"></script>
<!-- prototype code --->
</body>
If this is not possible, you could have a script block to store a reference to the native Object.keys and swap it out and back again when calling the C3 code, like so
<!DOCTYPE html>
<html lang="en">
<head>
<title>C3</title>
<meta charset="utf-8" />
<script>
var originalKeys = Object.keys;
</script>
<script src="lib/prototype/prototype.js"></script>
</head>
<body>
<div id="chart"></div>
<script src="lib/d3/d3.js" charset="utf-8"></script>
<script src="lib/c3.js/c3.js"></script>
<link href="lib/c3.js/c3.css" rel="stylesheet" />
<script>
var prototypeKeys = Object.keys;
Object.keys = originalKeys;
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
Object.keys = prototypeKeys;
</script>
</body>
</html>
Luckily tooltips don't cause any problems
Fiddle - http://jsfiddle.net/td433xt1/