Skip to content

C
c3-closed
Commit 4a60047d authored by Brandon Bernal's avatar Brandon Bernal
Browse files
Options

Upstream merge conflict resolution.

parents 8361dd2c fdb755c4
Hide whitespace changes
Inline Side-by-side
Showing with 522 additions and 32 deletions
.gitignore
View file @ 4a60047d
# npm modules
node_modules
bower_components
d3.js
d3.min.js
\ No newline at end of file
README.md
View file @ 4a60047d
c3 [![Build Status](https://travis-ci.org/masayuki0812/c3.png?branch=master)](https://travis-ci.org/masayuki0812/c3)
==
c3 is a D3-based chart library that allows you to integrate charts into web applications more deeply.
c3 is a D3-based reusable chart library that enables deeper integration of charts into web applications.
More information in [the wiki](https://github.com/masayuki0812/c3/wiki).
Samples in [c3js.org](http://c3js.org/#basic)
More information is here: [http://c3js.org](http://c3js.org/)
bower.json
View file @ 4a60047d
{
"name": "c3",
"main": "c3.min.js",
"version": "0.1.27",
"version": "0.1.41",
"homepage": "https://github.com/masayuki0812/c3",
"authors": [
"Masayuki Tanaka <masayuki0812@mac.com>"
......
c3.css
View file @ 4a60047d
......@@ -13,6 +13,14 @@
user-select: none;
}
.c3-legend-item-tile,
.c3-xgrid-focus,
.c3-ygrid,
.c3-event-rect,
.c3-bars path {
shape-rendering: crispEdges;
}
.c3-chart-arc path {
stroke: #fff;
......
c3.js
View file @ 4a60047d
This source diff could not be displayed because it is too large. You can view the blob instead.
c3.min.js
View file @ 4a60047d
This source diff could not be displayed because it is too large. You can view the blob instead.
component.json 0 → 100644
View file @ 4a60047d
{
"name": "c3",
"repo": "masayuki0812/c3",
"description": "A D3-based reusable chart library",
"version": "0.1.41",
"keywords": [],
"dependencies": {
"mbostock/d3": "*"
},
"development": {},
"license": "MIT",
"main": "c3.js",
"scripts": [
"c3.js"
],
"styles": [
"c3.css"
]
}
htdocs/data/c3_test2_ts.csv 0 → 100644
View file @ 4a60047d
x,data1,data2,data3
2013-04-01,20,180,400
2013-04-02,40,150,310
2013-04-03,70,120,470
2013-04-04,50,170,400
2013-04-05,80,200,380
\ No newline at end of file
htdocs/data/c3_test_ts.csv 0 → 100644
View file @ 4a60047d
x,data1,data2,data3
2012-12-31,120,80,200
2013-01-01,140,50,210
2013-01-02,170,100,250
2013-01-03,150,70,300
2013-01-04,180,120,280
\ No newline at end of file
htdocs/js/samples/requirejs.js
View file @ 4a60047d
......@@ -7,7 +7,7 @@ require.config({
require(["d3", "c3"], function(d3, c3) {
var chart = c3.generate({
window.chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
......@@ -15,4 +15,4 @@ require(["d3", "c3"], function(d3, c3) {
}
});
});
\ No newline at end of file
});
htdocs/samples/api_axis_range.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data1: 'y',
data2: 'y2',
}
},
axis: {
x: {
label: 'X Label'
},
y: {
label: {
text: 'Y Axis Label',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Y2 Axis Label',
position: 'outer-middle'
}
}
},
tooltip: {
// enabled: false
},
zoom: {
// enabled: true
},
subchart: {
// show: true
}
});
setTimeout(function () {
chart.axis.min({x: -10})
chart.axis.max({x: 10})
}, 1000);
/*
setTimeout(function () {
chart.axis.max(500);
}, 1000);
setTimeout(function () {
chart.axis.min(-500);
}, 2000);
setTimeout(function () {
chart.axis.max({y: 600, y2: 100});
}, 3000);
setTimeout(function () {
chart.axis.min({y: -600, y2: -100});
}, 4000);
setTimeout(function () {
chart.axis.range({max: 1000, min: -1000});
}, 5000);
setTimeout(function () {
chart.axis.range({max: {y: 600, y2: 100}, min: {y: -100, y2: 0}});
}, 6000);
*/
</script>
</body>
</html>
htdocs/samples/axes_x_tick_culling.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
axis: {
x: {
tick: {
culling: {
max: 2
}
}
}
},
tooltip: {
// enabled: false
},
zoom: {
// enabled: true
},
subchart: {
// show: true
}
});
</script>
</body>
</html>
htdocs/samples/axes_x_tick_rotate.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 100, 600],
['data2', 50, 20, 10, 40, 15, 25],
]
},
axis: {
// rotated: true,
x: {
tick: {
format: function () { return "hogehogehogehogehoge"; },
rotate: 30,
},
label: {
text: 'Hogehoge',
position: 'outer-middle'
},
height: 90,
},
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
}
},
subchart: {
show: true
}
});
setTimeout(function () {
chart.load({
columns: [
// ['data1', 30, 200, 100, 400, 150, 250, 100, 400],
['data1', 1030, 2000, 1000, 1400, 1500, 1250, 1100, 140000],
]
})
}, 1000);
</script>
</body>
</html>
htdocs/samples/custom_x_scale.html
View file @ 4a60047d
......@@ -36,6 +36,15 @@
setTimeout(function () {
chart.x([200, 210, 350, 400, 550, 750]);
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['data3', 300, 410, 350, 400, 500, 350],
]
});
}, 3000);
</script>
</body>
</html>
htdocs/samples/custom_xs_scale.html
View file @ 4a60047d
......@@ -26,24 +26,38 @@
},
onenter: function (d) { console.log("onenter", d); },
onleave: function (d) { console.log("onleave", d); }
},
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 210, 150, 200, null, 150],
['data1', 100, 210, 150, null, 200, 150],
['data2', 200, 310, 50, 400, 120, 250, 10],
]
});
}, 1000);
setTimeout(function () {
chart.xs({
'data1': [200, 210, 350, 400, 600, 750]
// 'data2': [200, 210, 350, 400, 550, 750, 900]
chart.load({
columns: [
['x2', 150, 220, 230, 400, 540, 600, 800],
['data2', 200, 310, 50, 400, 120, 250, 10],
['data3', 300, 410, 350, 600, 420, 550, 310],
],
xs: {
data3: 'x2'
}
});
}, 2000);
setTimeout(function () {
chart.xs({
'data1': [200, 210, 350, 400, 600, 750],
'data2': [200, 210, 350, 400, 550, 750, 900]
});
}, 3000);
</script>
</body>
</html>
htdocs/samples/data_hide.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
],
// hide: ['data1', 'data3']
hide: true // hide all data
}
});
</script>
</body>
</html>
htdocs/samples/data_label_format.html
View file @ 4a60047d
......@@ -15,10 +15,10 @@
['data2', 50, 20, 10, 40, 15, 25]
],
labels: {
// format: function (v) { return "Default Format"; },
// format: function (v, id) { return "Default Format on " + id; },
format: {
y: function (v) { return "Y Format"; },
y2: function (v) { return "Y2 Format"; }
y: function (v, id) { return "Y Format on " + id; },
y2: function (v, id) { return "Y2 Format on " + id; }
}
},
axes: {
......
htdocs/samples/data_load.html
View file @ 4a60047d
......@@ -11,7 +11,10 @@
var chart = c3.generate({
data: {
url: '/data/c3_test.csv',
labels: true
labels: true,
filter: function (t) {
return t.id !== 'data1';
}
},
subchart: {
show: true
......@@ -26,7 +29,10 @@
setTimeout(function () {
chart.load({
url: '/data/c3_test2.csv'
url: '/data/c3_test2.csv',
filter: function (t) {
return t.id !== 'data1';
}
});
}, 1000);
......
htdocs/samples/data_load_timeseries.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
data: {
x: 'x',
url: '/data/c3_test_ts.csv',
labels: true
},
axis: {
x: {
type: 'timeseries'
}
},
subchart: {
show: true
},
zoom: {
enabled: true
},
});
setTimeout(function () {
chart.load({
url: '/data/c3_test2_ts.csv'
});
}, 1000);
setTimeout(function () {
chart.unload('data2');
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['data1', 30, 20, 50, 40, 60, 50],
],
unload: true,
// unload: ['data2', 'data3'],
// unload: ['data2']
});
}, 3000);
</script>
</body>
</html>
htdocs/samples/grid_x_lines.html
View file @ 4a60047d
......@@ -20,21 +20,21 @@
},
grid: {
x: {
lines: [{value: 3, text:'Lable 3'}, {value: 4.5, text: 'Lable 4.5'}]
lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
}
}
});
setTimeout(function () {
chart.xgrids([{value: 1, text:'Lable 1'}, {value: 4, text: 'Lable 4'}]);
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 1000);
setTimeout(function () {
chart.xgrids([{value: 2, text:'Lable 2'}]);
chart.xgrids([{value: 2, text:'Label 2'}]);
}, 2000);
setTimeout(function () {
chart.xgrids.add([{value: 3, text:'Lable 3', class:'hoge'}]);
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
}, 3000);
setTimeout(function () {
......
htdocs/samples/grid_y_lines.html
View file @ 4a60047d
......@@ -20,21 +20,21 @@
},
grid: {
y: {
lines: [{value: 30, text:'Lable 30'}, {value: 250, text: 'Lable 250'}]
lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
}
}
});
setTimeout(function () {
chart.ygrids([{value: 130, text:'Lable 130'}, {value: 50, text: 'Lable 50'}]);
chart.ygrids([{value: 130, text:'Label 130'}, {value: 50, text: 'Label 50'}]);
}, 1000);
setTimeout(function () {
chart.ygrids([{value: 130, text:'Lable 130', class: 'hoge'}]);
chart.ygrids([{value: 130, text:'Label 130', class: 'hoge'}]);
}, 2000);
setTimeout(function () {
chart.ygrids.add([{value: 230, text:'Lable 230'}]);
chart.ygrids.add([{value: 230, text:'Label 230'}]);
}, 3000);
setTimeout(function () {
......
htdocs/samples/grids.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
// rotated: true,
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
</script>
</body>
</html>
htdocs/samples/padding.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
<style type="text/css">
<!--
.c3 svg {
font-size: 13px;
}
-->
</style>
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
padding: {
top: 20,
// left: 60
bottom: 20
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
legend: {
// position: 'right'
},
subchart: {
// show: true
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
}
});
</script>
</body>
</html>
htdocs/samples/point_r.html 0 → 100644
View file @ 4a60047d
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 600, 250, 150]
],
},
point: {
// r: 10
r: function (d) {
return d.id === 'data2' ? 10 : 2.5;
}
}
});
</script>
</body>
</html>
htdocs/samples/regions.html
View file @ 4a60047d
......@@ -11,13 +11,57 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
['sample', 30, 200, 100, 400, 150, 250, 300]
]
},
axis: {
rotated: true,
y2: {
// show: true,
}
},
regions: [
{start:2,end:4,class:'region1'}
]
{end:1,class:'region1'},
{start:2,end:4,class:'region1'},
{start:5,class:'region1'},
{end:50,axis:'y'},
{start:100,end:200,axis:'y'},
{start:300,axis:'y'},
],
zoom: {
// enabled: true
}
});
setTimeout(function () {
chart.load({
columns: [
['sample', -100, 200, 50, 100, 400, 299]
]
});
}, 1000);
setTimeout(function () {
chart.regions([]);
}, 2000);
setTimeout(function () {
chart.regions([{start:0.5,end:2.5}]);
}, 3000);
setTimeout(function () {
chart.regions.add([{start:4.5}]);
}, 4000);
setTimeout(function () {
chart.regions.add([{start:3,end:3.5,class:"region1"}, {start:4,end:4.5,class:"region2"}]);
}, 4000);
setTimeout(function () {
chart.regions.remove({classes:['region1', 'region2'], duration: 0});
}, 5000);
</script>
</body>
</html>
htdocs/samples/scatter.html
View file @ 4a60047d
......@@ -27,7 +27,10 @@
},
axis: {
x: {
label: 'Sepal.Width'
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
......
htdocs/samples/simple.html
View file @ 4a60047d
......@@ -6,7 +6,7 @@
<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.min.js"></script>
<script src="/js/c3.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
......
package.json
View file @ 4a60047d
{
"name": "c3",
"version": "0.1.27",
"version": "0.1.41",
"description": "D3-based reusable chart library",
"main": "c3.js",
"scripts": {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment