playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Upstream merge conflict resolution.

pull/254/head
Brandon Bernal 11 years ago
parent
8361dd2c96 fdb755c49f
commit
4a60047d2b
28 changed files with 2241 additions and 1089 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      .gitignore
  2. 6
      README.md
  3. 2
      bower.json
  4. 8
      c3.css
  5. 2619
      c3.js
  6. 3
      c3.min.js
  7. 19
      component.json
  8. 6
      htdocs/data/c3_test2_ts.csv
  9. 6
      htdocs/data/c3_test_ts.csv
  10. 2
      htdocs/js/samples/requirejs.js
  11. 83
      htdocs/samples/api_axis_range.html
  12. 39
      htdocs/samples/axes_x_tick_culling.html
  13. 55
      htdocs/samples/axes_x_tick_rotate.html
  14. 9
      htdocs/samples/custom_x_scale.html
  15. 24
      htdocs/samples/custom_xs_scale.html
  16. 24
      htdocs/samples/data_hide.html
  17. 6
      htdocs/samples/data_label_format.html
  18. 10
      htdocs/samples/data_load.html
  19. 53
      htdocs/samples/data_load_timeseries.html
  20. 8
      htdocs/samples/grid_x_lines.html
  21. 8
      htdocs/samples/grid_y_lines.html
  22. 32
      htdocs/samples/grids.html
  23. 59
      htdocs/samples/padding.html
  24. 28
      htdocs/samples/point_r.html
  25. 48
      htdocs/samples/regions.html
  26. 5
      htdocs/samples/scatter.html
  27. 2
      htdocs/samples/simple.html
  28. 2
      package.json

2
.gitignore vendored
Unescape View File

@ -1,3 +1,5 @@
# npm modules # npm modules
node_modules node_modules
bower_components bower_components
d3.js
d3.min.js

6
README.md
Unescape View File

@ -1,8 +1,6 @@
c3 [![Build Status](https://travis-ci.org/masayuki0812/c3.png?branch=master)](https://travis-ci.org/masayuki0812/c3) 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). More information is here: [http://c3js.org](http://c3js.org/)
Samples in [c3js.org](http://c3js.org/#basic)

2
bower.json
Unescape View File

@ -1,7 +1,7 @@
{ {
"name": "c3", "name": "c3",
"main": "c3.min.js", "main": "c3.min.js",
"version": "0.1.27", "version": "0.1.41",
"homepage": "https://github.com/masayuki0812/c3", "homepage": "https://github.com/masayuki0812/c3",
"authors": [ "authors": [
"Masayuki Tanaka <masayuki0812@mac.com>" "Masayuki Tanaka <masayuki0812@mac.com>"

8
c3.css
Unescape View File

@ -13,6 +13,14 @@
user-select: none; 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 { .c3-chart-arc path {
stroke: #fff; stroke: #fff;

2619
c3.js
View File

File diff suppressed because it is too large Load Diff

3
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

19
component.json
Unescape View File

@ -0,0 +1,19 @@
{
"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"
]
}

6
htdocs/data/c3_test2_ts.csv
Unescape View File

@ -0,0 +1,6 @@
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
1 x data1 data2 data3
2 2013-04-01 20 180 400
3 2013-04-02 40 150 310
4 2013-04-03 70 120 470
5 2013-04-04 50 170 400
6 2013-04-05 80 200 380

6
htdocs/data/c3_test_ts.csv
Unescape View File

@ -0,0 +1,6 @@
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
1 x data1 data2 data3
2 2012-12-31 120 80 200
3 2013-01-01 140 50 210
4 2013-01-02 170 100 250
5 2013-01-03 150 70 300
6 2013-01-04 180 120 280

2
htdocs/js/samples/requirejs.js
Unescape View File

@ -7,7 +7,7 @@ require.config({
require(["d3", "c3"], function(d3, c3) { require(["d3", "c3"], function(d3, c3) {
var chart = c3.generate({ window.chart = c3.generate({
data: { data: {
columns: [ columns: [
['sample', 30, 200, 100, 400, 150, 250] ['sample', 30, 200, 100, 400, 150, 250]

83
htdocs/samples/api_axis_range.html
Unescape View File

@ -0,0 +1,83 @@
<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>

39
htdocs/samples/axes_x_tick_culling.html
Unescape View File

@ -0,0 +1,39 @@
<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>

55
htdocs/samples/axes_x_tick_rotate.html
Unescape View File

@ -0,0 +1,55 @@
<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>

9
htdocs/samples/custom_x_scale.html
Unescape View File

@ -36,6 +36,15 @@
setTimeout(function () { setTimeout(function () {
chart.x([200, 210, 350, 400, 550, 750]); chart.x([200, 210, 350, 400, 550, 750]);
}, 2000); }, 2000);
setTimeout(function () {
chart.load({
columns: [
['data3', 300, 410, 350, 400, 500, 350],
]
});
}, 3000);
</script> </script>
</body> </body>
</html> </html>

24
htdocs/samples/custom_xs_scale.html
Unescape View File

@ -26,24 +26,38 @@
}, },
onenter: function (d) { console.log("onenter", d); }, onenter: function (d) { console.log("onenter", d); },
onleave: function (d) { console.log("onleave", d); } onleave: function (d) { console.log("onleave", d); }
}, }
}); });
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
columns: [ columns: [
['data1', 100, 210, 150, 200, null, 150], ['data1', 100, 210, 150, null, 200, 150],
['data2', 200, 310, 50, 400, 120, 250, 10], ['data2', 200, 310, 50, 400, 120, 250, 10],
] ]
}); });
}, 1000); }, 1000);
setTimeout(function () { setTimeout(function () {
chart.xs({ chart.load({
'data1': [200, 210, 350, 400, 600, 750] columns: [
// 'data2': [200, 210, 350, 400, 550, 750, 900] ['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); }, 2000);
setTimeout(function () {
chart.xs({
'data1': [200, 210, 350, 400, 600, 750],
'data2': [200, 210, 350, 400, 550, 750, 900]
});
}, 3000);
</script> </script>
</body> </body>
</html> </html>

24
htdocs/samples/data_hide.html
Unescape View File

@ -0,0 +1,24 @@
<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>

6
htdocs/samples/data_label_format.html
Unescape View File

@ -15,10 +15,10 @@
['data2', 50, 20, 10, 40, 15, 25] ['data2', 50, 20, 10, 40, 15, 25]
], ],
labels: { labels: {
// format: function (v) { return "Default Format"; }, // format: function (v, id) { return "Default Format on " + id; },
format: { format: {
y: function (v) { return "Y Format"; }, y: function (v, id) { return "Y Format on " + id; },
y2: function (v) { return "Y2 Format"; } y2: function (v, id) { return "Y2 Format on " + id; }
} }
}, },
axes: { axes: {

10
htdocs/samples/data_load.html
Unescape View File

@ -11,7 +11,10 @@
var chart = c3.generate({ var chart = c3.generate({
data: { data: {
url: '/data/c3_test.csv', url: '/data/c3_test.csv',
labels: true labels: true,
filter: function (t) {
return t.id !== 'data1';
}
}, },
subchart: { subchart: {
show: true show: true
@ -26,7 +29,10 @@
setTimeout(function () { setTimeout(function () {
chart.load({ chart.load({
url: '/data/c3_test2.csv' url: '/data/c3_test2.csv',
filter: function (t) {
return t.id !== 'data1';
}
}); });
}, 1000); }, 1000);

53
htdocs/samples/data_load_timeseries.html
Unescape View File

@ -0,0 +1,53 @@
<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>

8
htdocs/samples/grid_x_lines.html
Unescape View File

@ -20,21 +20,21 @@
}, },
grid: { grid: {
x: { 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 () { 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); }, 1000);
setTimeout(function () { setTimeout(function () {
chart.xgrids([{value: 2, text:'Lable 2'}]); chart.xgrids([{value: 2, text:'Label 2'}]);
}, 2000); }, 2000);
setTimeout(function () { setTimeout(function () {
chart.xgrids.add([{value: 3, text:'Lable 3', class:'hoge'}]); chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
}, 3000); }, 3000);
setTimeout(function () { setTimeout(function () {

8
htdocs/samples/grid_y_lines.html
Unescape View File

@ -20,21 +20,21 @@
}, },
grid: { grid: {
y: { 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 () { 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); }, 1000);
setTimeout(function () { setTimeout(function () {
chart.ygrids([{value: 130, text:'Lable 130', class: 'hoge'}]); chart.ygrids([{value: 130, text:'Label 130', class: 'hoge'}]);
}, 2000); }, 2000);
setTimeout(function () { setTimeout(function () {
chart.ygrids.add([{value: 230, text:'Lable 230'}]); chart.ygrids.add([{value: 230, text:'Label 230'}]);
}, 3000); }, 3000);
setTimeout(function () { setTimeout(function () {

32
htdocs/samples/grids.html
Unescape View File

@ -0,0 +1,32 @@
<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>

59
htdocs/samples/padding.html
Unescape View File

@ -0,0 +1,59 @@
<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>

28
htdocs/samples/point_r.html
Unescape View File

@ -0,0 +1,28 @@
<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>

48
htdocs/samples/regions.html
Unescape View File

@ -11,13 +11,57 @@
var chart = c3.generate({ var chart = c3.generate({
data: { data: {
columns: [ columns: [
['sample', 30, 200, 100, 400, 150, 250] ['sample', 30, 200, 100, 400, 150, 250, 300]
] ]
}, },
axis: {
rotated: true,
y2: {
// show: true,
}
},
regions: [ 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> </script>
</body> </body>
</html> </html>

5
htdocs/samples/scatter.html
Unescape View File

@ -27,7 +27,10 @@
}, },
axis: { axis: {
x: { x: {
label: 'Sepal.Width' label: 'Sepal.Width',
tick: {
fit: false
}
}, },
y: { y: {
label: 'Petal.Width' label: 'Petal.Width'

2
htdocs/samples/simple.html
Unescape View File

@ -6,7 +6,7 @@
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <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> <script>
var chart = c3.generate({ var chart = c3.generate({
bindto: '#chart', bindto: '#chart',

2
package.json
Unescape View File

@ -1,6 +1,6 @@
{ {
"name": "c3", "name": "c3",
"version": "0.1.27", "version": "0.1.41",
"description": "D3-based reusable chart library", "description": "D3-based reusable chart library",
"main": "c3.js", "main": "c3.js",
"scripts": { "scripts": {

Write Preview
Loading…
Cancel
Save