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

Merge remote-tracking branch 'original/master' into x-axis-position

pull/205/head
Tony Aldridge 11 years ago
parent
e171206195 c8cec6f6bf
commit
abd55b56e8
17 changed files with 616 additions and 271 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      bower.json
  2. 575
      c3.js
  3. 6
      c3.min.js
  4. 6
      htdocs/data/c3_test2_ts.csv
  5. 6
      htdocs/data/c3_test_ts.csv
  6. 39
      htdocs/samples/axes_x_tick_culling.html
  7. 55
      htdocs/samples/axes_x_tick_rotate.html
  8. 9
      htdocs/samples/custom_x_scale.html
  9. 24
      htdocs/samples/custom_xs_scale.html
  10. 24
      htdocs/samples/data_hide.html
  11. 53
      htdocs/samples/data_load_timeseries.html
  12. 8
      htdocs/samples/grid_x_lines.html
  13. 8
      htdocs/samples/grid_y_lines.html
  14. 32
      htdocs/samples/grids.html
  15. 28
      htdocs/samples/point_r.html
  16. 2
      htdocs/samples/simple.html
  17. 2
      package.json

2
bower.json
Unescape View File

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

575
c3.js
View File

File diff suppressed because it is too large Load Diff

6
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

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

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 () {
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>

24
htdocs/samples/custom_xs_scale.html
Unescape View File

@ -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>

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>

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: {
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 () {

8
htdocs/samples/grid_y_lines.html
Unescape View File

@ -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 () {

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>

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>

2
htdocs/samples/simple.html
Unescape View File

@ -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',

2
package.json
Unescape View File

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

Write Preview
Loading…
Cancel
Save