composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-04-29 21:48:45 +02:00
Code Issues Packages Projects Releases Wiki Activity

N°5621 Move C3 0.4.11 to NPM

Browse Source
This commit is contained in:
Pierre Goiffon
2024-02-16 16:42:42 +01:00
parent ff079f7d01
commit f3fbce7459
609 changed files with 84517 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
node_modules/c3/htdocs/samples/angularjs.html generated vendored Normal file
View File

@@ -0,0 +1,18 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
<script src="/js/angular.min.js"></script>
<script src="/js/d3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script src="/js/samples/angularjs.js"></script>
</head>
<body ng-app="myApp">
<div ng-controller="myCtrl">
<div ng-hide="loading">
<p>Hello, {{text}}</p>
<div id="chart"></div>
</div>
</div>
</body>
</html>

70
node_modules/c3/htdocs/samples/api_axis_label.html generated vendored Normal file
View File

@@ -0,0 +1,70 @@
<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.labels({
x: 'New X Axis Label',
y: 'New Y Axis Label',
y2: 'New Y2 Axis Label',
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 300, 600, 200, 400, 500]
]
});
chart.axis.labels({y: 'New Y Axis Label Again'});
}, 2000);
</script>
</body>
</html>

81
node_modules/c3/htdocs/samples/api_axis_range.html generated vendored Normal file
View File

@@ -0,0 +1,81 @@
<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.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({min: {y: 1000}, max: {y: 2000}});
}, 6000);
setTimeout(function () {
chart.axis.range({max: {y: 600, y2: 100}, min: {y: -100, y2: 0}});
}, 7000);
</script>
</body>
</html>

48
node_modules/c3/htdocs/samples/api_category.html generated vendored Normal file
View File

@@ -0,0 +1,48 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<div id="message"></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',
columns: [
['x', '1e-3', '1e-2', '1'],
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'categorized'
}
}
});
setTimeout(function () {
d3.select('#message').node().innerHTML = "chart.categories() =>" + chart.categories();
}, 1000);
setTimeout(function () {
chart.categories(['updated 1', 'updated 2', 'updated 3', 'updated 4']);
d3.select('#message').node().innerHTML = "";
}, 2000);
setTimeout(function () {
d3.select('#message').node().innerHTML = "chart.category(1) =>" + chart.category(1);
}, 3000);
setTimeout(function () {
chart.category(1, 'UPDATED 1');
d3.select('#message').node().innerHTML = "";
}, 4000);
</script>
</body>
</html>

33
node_modules/c3/htdocs/samples/api_data_colors.html generated vendored Normal file
View File

@@ -0,0 +1,33 @@
<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({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
},
axis: {
x: {
type: 'category'
}
}
});
setTimeout(function () {
chart.data.colors({data1: '#000'});
}, 1000);
</script>
</body>
</html>

223
node_modules/c3/htdocs/samples/api_flow.html generated vendored Normal file
View File

@@ -0,0 +1,223 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
<style>
.c3-region-1 {
fill: #dd3333;
fill-opacity: 0.8
}
</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 padding = {}, types = {}, chart, generate = function () { return c3.generate({
data: {
columns: [
['data1'],
['data2'],
],
types: types,
labels: true
},
bar: {
width: 10
},
axis: {
x: {
padding: padding
},
y: {
/*
min: -100,
max: 1000
*/
}
},
grid: {
x: {
show: true,
lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
},
y: {
show: true
}
},
regions: [
{start:2, end:4, class:'region1'},
{start:100, end:200, axis:'y'},
],
});
};
function run() {
chart = generate();
setTimeout(function () {
// Load only one data
chart.flow({
rows: [
['data1', 'data2', 'data3'],
[500, 100, 200],
[200, null, null],
[100, 50, null]
],
duration: 1500,
done: function () {
// Load 2 data without data2 and remove 1 data
chart.flow({
columns: [
['data1', 200, 300],
['data3', 100, 100]
],
length: 0,
duration: 1500,
done: function () {
chart.flow({
columns: [
['data1', 200, 300],
['data2', 200, 300],
['data3', 100, 100]
],
length: 2,
duration: 1500,
done: function () {
chart.flow({
columns: [
['data1', 500],
['data2', 100],
['data3', 200]
],
length: 1,
duration: 1500,
});
}
});
}// done
});
},
});
}, 1000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 250],
['data2', 350],
['data3', 150]
],
length: 0
});
}, 9000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 100],
['data2', 50],
['data3', 300]
],
length: 2
});
}, 10000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 600],
['data2', 400],
['data3', 500]
],
to: 2,
});
}, 11000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 100],
['data2', 200],
['data3', 300]
]
});
}, 12000);
setTimeout(function () {
chart = generate();
}, 13000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 500, 100],
['data2', 100, 200],
['data3', 200, 300],
],
duration: 1500,
done: function () {
chart.flow({
columns: [
['data1', 200],
['data3', 100]
],
// duration: 1000,
length: 1
});
},
});
}, 14000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 200],
['data2', 300],
['data3', 100]
],
to: 1,
});
}, 18000);
setTimeout(function () {
chart.flow({
columns: [
['data1', 200],
['data2', 300],
['data3', 400]
]
});
}, 19000);
}
run();
// Test for no padding
setTimeout(function () {
padding = {left: 0, right: 0};
run();
}, 22000);
// Test for other chart types
setTimeout(function () {
types = {
data2: 'area',
data3: 'bar',
};
run();
}, 45000);
</script>
</body>
</html>

173
node_modules/c3/htdocs/samples/api_flow_timeseries.html generated vendored Normal file
View File

@@ -0,0 +1,173 @@
<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 padding = {}, types = {};
var generate = function () { return c3.generate({
data: {
x: 'x',
columns: [
['x', ],
['data1', ],
['data2', ],
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-10', '2013-01-11', '2013-01-12'],
// ['data1', 30, 200, 100, 400, 150, 250],
// ['data2', 310, 400, 200, 100, 450, 150],
// ['data3', 310, 400, 200, 100, null, 150],
],
types: types,
// labels: true
},
bar: {
width: 10
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d',
},
padding: padding
},
y: {
/*
min: -100,
max: 1000
*/
}
},
/* not supported yet
grid: {
x: {
show: true
},
y: {
show: true
}
}
*/
}); }, chart;
function run() {
chart = generate();
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-01-21'],
['data1', 500],
['data3', 200],
],
duration: 1500
});
}, 1000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-02-01', '2013-02-08', '2013-02-15'],
['data1', 200, 400, 300],
['data2', 100, 300, 200],
['data3', 100, 200, 50]
],
length: 1,
duration: 1500
});
}, 4000);
setTimeout(function () {
console.log("Flow 1");
chart.flow({
columns: [
['x', '2013-03-01', '2013-03-08'],
['data1', 200, 500],
['data2', 300, 400],
['data3', 400, 200]
],
to: '2013-02-08',
duration: 1500
});
}, 7000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-03-15', '2013-05-01'],
['data1', 200, 500],
['data2', 300, 400],
['data3', 400, 200]
],
length: 0,
duration: 1500
});
}, 10000);
setTimeout(function () {
chart = generate();
}, 14000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-01-21', '2013-01-25', '2013-01-26'],
['data1', 500, 300, 100],
['data3', 200, 150, null],
],
duration: 1500
});
}, 15000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-02-01'],
['data1', 200],
['data2', 100],
['data3', 100]
],
length: 0,
duration: 1500
});
}, 18000);
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-03-01'],
['data1', 200],
['data2', 300],
['data3', 400]
],
to: '2013-02-01',
duration: 1500
});
}, 21000);
};
run();
setTimeout(function () {
padding = {left: 0, right: 0};
run();
}, 25000);
setTimeout(function () {
types = {
data2: 'area',
data3: 'bar',
}
run();
}, 50000);
</script>
</body>
</html>

136
node_modules/c3/htdocs/samples/api_legend.html generated vendored Normal file
View File

@@ -0,0 +1,136 @@
<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 columns = [];
for (var i = 0; i < 5; i++ ) {
columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i, 30 * i];
}
var chart = c3.generate({
data: {
columns: columns,
},
axis: {
x: {
type: 'category'
}
}
});
setTimeout(function () {
chart.legend.hide();
}, 1000);
setTimeout(function () {
chart = c3.generate({
data: {
columns: columns,
},
axis: {
x: {
type: 'category'
}
},
legend: {
position: 'right'
}
});
}, 2000);
setTimeout(function () {
chart.legend.hide();
}, 3000);
setTimeout(function () {
chart = c3.generate({
data: {
columns: columns,
},
axis: {
rotated: true
}
});
}, 4000);
setTimeout(function () {
chart.legend.hide();
}, 5000);
setTimeout(function () {
chart = c3.generate({
data: {
columns: columns,
},
legend: {
position: 'right'
},
axis: {
rotated: true
}
});
}, 6000);
setTimeout(function () {
chart.legend.hide();
}, 7000);
setTimeout(function () {
chart = c3.generate({
data: {
columns: columns,
},
legend: {
show: false
}
});
}, 8000);
setTimeout(function () {
chart.legend.show();
}, 9000);
setTimeout(function () {
chart = c3.generate({
data: {
columns: columns,
},
legend: {
show: false
},
axis: {
rotated: true
}
});
}, 10000);
setTimeout(function () {
chart.legend.show();
}, 11000);
setTimeout(function () {
chart = c3.generate({
data: {
columns: columns,
},
legend: {
position: 'right',
show: false
}
});
}, 12000);
setTimeout(function () {
chart.legend.show();
}, 13000);
</script>
</body>
</html>

38
node_modules/c3/htdocs/samples/api_tooltip_show.html generated vendored Normal file
View File

@@ -0,0 +1,38 @@
<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({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
}
});
setTimeout(function () {
chart.tooltip.show({ x: 1 });
}, 1000);
setTimeout(function () {
chart.tooltip.show({ index: 3 });
}, 2000);
setTimeout(function () {
chart.tooltip.show({ data: {x: 2} });
}, 3000);
setTimeout(function () {
chart.tooltip.hide();
}, 4000);
</script>
</body>
</html>

70
node_modules/c3/htdocs/samples/api_transform.html generated vendored Normal file
View File

@@ -0,0 +1,70 @@
<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({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
},
});
setTimeout(function () {
chart.transform('bar');
}, 1000);
setTimeout(function () {
chart.transform('pie');
}, 2000);
setTimeout(function () {
chart.transform('donut');
}, 3000);
setTimeout(function () {
chart.transform('area');
}, 4000);
setTimeout(function () {
chart.transform('spline');
}, 5000);
setTimeout(function () {
chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data1_x', 50, 20, 10, 40, 15, 25],
['data2_x', 30, 200, 100, 400, 150, 250],
],
xs: {
data1: 'data1_x',
data2: 'data2_x',
},
type: 'scatter'
},
});
}, 7000);
setTimeout(function () {
chart.transform('pie');
}, 8000);
setTimeout(function () {
chart.transform('scatter');
}, 9000);
</script>
</body>
</html>

125
node_modules/c3/htdocs/samples/api_xgrid_lines.html generated vendored Normal file
View File

@@ -0,0 +1,125 @@
<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 axis_rotated = false, axis_x_type = "";
var generate = function () { return c3.generate({
bindto: '#chart',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
rotated: axis_rotated,
x: {
type: axis_x_type
}
},
grid: {
x: {
// lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
}
}
}); }, chart = generate();
var queue = [
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
},
function () {
axis_rotated = true;
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
},
function () {
axis_rotated = false;
axis_x_type = 'category';
chart = generate();
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
},
function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
},
function () {
chart.xgrids.remove({value:2});
},
function () {
chart.xgrids.remove({class:'hoge'});
},
function () {
chart.xgrids.remove([{value: 1}, {value: 4}]);
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
},
function () {
chart.xgrids.remove();
},
];
var i = 0;
queue.forEach(function (f) {
setTimeout(f, 1000 * i++);
});
</script>
</body>
</html>

50
node_modules/c3/htdocs/samples/api_ygrid_lines.html generated vendored Normal file
View File

@@ -0,0 +1,50 @@
<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: {
y: {
// lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
}
}
});
setTimeout(function () {
chart.ygrids([{value: 130, text:'Label 130'}, {value: 50, text: 'Label 50'}]);
}, 1000);
setTimeout(function () {
chart.ygrids([{value: 130, text:'Label 130', class: 'hoge'}]);
}, 2000);
setTimeout(function () {
chart.ygrids.add([{value: 230, text:'Label 230', class: 'hoge'}]);
}, 3000);
setTimeout(function () {
chart.ygrids.remove({value: 230});
}, 4000);
setTimeout(function () {
chart.ygrids.remove({class: 'hoge'});
}, 5000);
</script>
</body>
</html>

25
node_modules/c3/htdocs/samples/area_zerobased.html generated vendored Normal file
View File

@@ -0,0 +1,25 @@
<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', 1030, 1200, 1100, 1400, 1150, 1250],
['data2', 2130, 2100, 2140, 2200, 2150, 1850]
],
type: 'area',
},
area: {
zerobased: false
}
});
</script>
</body>
</html>

62
node_modules/c3/htdocs/samples/axes_padding.html generated vendored Normal file
View File

@@ -0,0 +1,62 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 300, 2000, 1000, 4000, 1500, 2500],
],
axes: {
data2: 'y2'
}
},
axis: {
y: {
padding: {
top: 0.1,
bottom: 0.1,
unit: 'ratio'
}
},
y2: {
show: true,
padding: {
top: 200,
bottom: 200,
}
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 3000, 20000, 10000, 40000, 15000, 25000],
],
},
axis: {
y: {
padding: {
top: 0.1,
bottom: 0.1,
unit: 'ratio'
}
}
}
});
</script>
</body>
</html>

87
node_modules/c3/htdocs/samples/axes_range.html generated vendored Normal file
View File

@@ -0,0 +1,87 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['sample', 100, 200, 100, 400, 150, 250]
],
},
axis: {
x: {
min: -10,
max: 10,
}
},
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['sample', 100, 200, 100, 400, 150, 250]
],
},
axis: {
x: {
type: 'timeseries',
min: new Date('2012-12-20'),
max: '2013-03-01',
tick : {
format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
setTimeout(function () {
chart1.axis.max({x: 20});
}, 1000);
setTimeout(function () {
chart1.axis.min({x: -5});
}, 2000);
setTimeout(function () {
chart1.axis.range({max: {x: 5}, min: {x: 0}});
}, 3000);
setTimeout(function () {
chart2.axis.max({x: new Date('2013-02-01')});
}, 1000);
setTimeout(function () {
chart2.axis.min({x: new Date('2012-12-01')});
}, 2000);
setTimeout(function () {
chart2.axis.range({max: {x: '2013-01-06'}, min: {x: '2013-01-01'}});
}, 3000);
setTimeout(function () {
chart2.axis.max({y: 1000});
}, 4000);
setTimeout(function () {
chart2.axis.min({y: -1000});
}, 5000);
setTimeout(function () {
chart2.axis.range({max: {y: 400}, min: {y: 0}});
}, 6000);
</script>
</body>
</html>

76
node_modules/c3/htdocs/samples/axes_x_extent.html generated vendored Normal file
View File

@@ -0,0 +1,76 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 100, 200, 50, 300, 400, 290],
['data2', 10, 20, 50, 30, 10, 100],
],
},
axis: {
x: {
extent: [2, 4.5]
}
},
subchart: {
show: true
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
x: 'x',
columns: [
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'],
['data1', 100, 200, 50, 300, 400, 290],
['data2', 10, 20, 50, 30, 10, 100],
],
},
axis: {
x: {
type: 'timeseries',
extent: ['2014-03-01', '2014-04-20']
}
},
subchart: {
show: true
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', 100, 200, 50, 300, 400, 290],
['data2', 10, 20, 50, 30, 10, 100],
],
},
axis: {
x: {
extent: [1, 4.2]
}
},
zoom: {
enabled: true
},
subchart: {
show: true
}
});
</script>
</body>
</html>

137
node_modules/c3/htdocs/samples/axes_x_localtime.html generated vendored Normal file
View File

@@ -0,0 +1,137 @@
<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 data, axis_x_localtime;
var data1 = {
x : 'date',
columns: [
['date', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
};
var data2 = {
x : 'date',
columns: [
['date', 1356966000000, 1357052400000, 1357138800000, 1357225200000, 1357311600000],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
};
var data3 = {
x : 'date',
columns: [
['date', new Date(1356966000000), new Date(1357052400000), new Date(1357138800000), new Date(1357225200000), new Date(1357311600000)],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
};
var data4 = {
x : 'date',
x_format : '%Y%m%d',
columns: [
['date', '20130101', '20130102', '20130103', '20130104', '20130105'],
['sample', 1030, 1200, 1100, 1400, 1150],
['sample2', 130, 300, 200, 450, 250]
]
};
var data5 = {
x : 'date',
x_format : '%Y%m%d %H:%M:%S',
columns: [
['date', '20130101 00:00:00', '20130102 00:00:00', '20130103 00:00:00', '20130104 00:00:00', '20130105 00:00:00'],
['sample', 30, 200, 100, 400, 150],
['sample2', 1130, 1300, 1200, 1450, 1250]
]
};
var generate = function () { return c3.generate({
bindto: '#chart',
data: data,
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d %H:%M:%S" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
},
localtime: axis_x_localtime
}
}
}); };
setTimeout(function () {
data = data1;
axis_x_localtime = true;
chart = generate();
}, 1000);
setTimeout(function () {
data = data1;
axis_x_localtime = false;
chart = generate();
}, 2000);
setTimeout(function () {
data = data2;
axis_x_localtime = true;
chart = generate();
}, 3000);
setTimeout(function () {
data = data2;
axis_x_localtime = false;
chart = generate();
}, 4000);
setTimeout(function () {
data = data3;
axis_x_localtime = true;
chart = generate();
}, 5000);
setTimeout(function () {
data = data3;
axis_x_localtime = false;
chart = generate();
}, 6000);
setTimeout(function () {
data = data4;
axis_x_localtime = true;
chart = generate();
}, 7000);
setTimeout(function () {
data = data4;
axis_x_localtime = false;
chart = generate();
}, 8000);
setTimeout(function () {
data = data5;
axis_x_localtime = true;
chart = generate();
}, 9000);
setTimeout(function () {
data = data5;
axis_x_localtime = false;
chart = generate();
}, 10000);
</script>
</body>
</html>

57
node_modules/c3/htdocs/samples/axes_x_range_timeseries.html generated vendored Normal file
View File

@@ -0,0 +1,57 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
"bindto": "#chart1",
"axis": {
"x": {
"type": "timeseries",
"min": 1401879600000,
"max": 1401969600000,
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
var chart2 = c3.generate({
"bindto": "#chart2",
"axis": {
"x": {
"type": "timeseries",
"min": new Date(1401879600000),
"max": new Date(1401969600000),
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
</script>
</body>
</html>

39
node_modules/c3/htdocs/samples/axes_x_tick_culling.html generated vendored Normal file
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>

35
node_modules/c3/htdocs/samples/axes_x_tick_fit.html generated vendored Normal file
View File

@@ -0,0 +1,35 @@
<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({
data: {
x: 'x',
columns: [
['x', '2013-10-31', '2013-11-30', '2013-12-31', '2014-01-31', '2014-02-28'],
// ['x', 30, 70, 150, 200, 350],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 500, 250]
]
},
axis : {
x : {
type : 'timeseries',
tick: {
fit: true
}
}
},
subchart: {
// show: true
}
});
</script>
</body>
</html>

55
node_modules/c3/htdocs/samples/axes_x_tick_rotate.html generated vendored Normal file
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>

55
node_modules/c3/htdocs/samples/axes_x_tick_values.html generated vendored Normal file
View File

@@ -0,0 +1,55 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
},
axis: {
x : {
tick: {
values: [2, 4]
}
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
x : 'date',
xFormat : '%Y%m%d',
columns: [
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 130, 300, 200, 450, 250, 350]
]
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%e %b %y", // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
values: ['20130103', '20130104']
}
}
}
});
</script>
</body>
</html>

30
node_modules/c3/htdocs/samples/axes_y2.html generated vendored Normal file
View File

@@ -0,0 +1,30 @@
<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: {
y2: {
show: true
}
}
});
</script>
</body>
</html>

26
node_modules/c3/htdocs/samples/axes_y_default.html generated vendored Normal file
View File

@@ -0,0 +1,26 @@
<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({
data: {
columns: [
['data1'],
['data2'],
],
},
axis: {
y: {
default: [-100, 100]
}
}
});
</script>
</body>
</html>

25
node_modules/c3/htdocs/samples/bar_zerobased.html generated vendored Normal file
View File

@@ -0,0 +1,25 @@
<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', 1030, 1200, 1100, 1400, 1150, 1250],
['data2', 2130, 2100, 2140, 2200, 2150, 1850]
],
type: 'bar',
},
bar: {
zerobased: false
}
});
</script>
</body>
</html>

41
node_modules/c3/htdocs/samples/bindto.html generated vendored Normal file
View File

@@ -0,0 +1,41 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1" style="height:300px;"></div>
<div class="chart2" style="height:150px;"></div>
<div class="chart3" style="height:150px;"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 130, 210, 120, 440, 250, 350]
]
}
});
var chart2 = c3.generate({
bindto: '.chart2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
]
}
});
var chart3 = c3.generate({
bindto: document.getElementsByClassName('chart3')[0],
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
]
}
});
</script>
</body>
</html>

54
node_modules/c3/htdocs/samples/categorized.html generated vendored Normal file
View File

@@ -0,0 +1,54 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: [
['x', '1e-3', '1e-2', '1'],
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'categorized'
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
categories: ['1e-3', '1e-2', '1e-1', '0', 'hoge'],
type: 'categorized'
}
}
});
setTimeout(function () {
chart1.load({columns:[['data2', 30, 20, 50, 40, 60, 50, 100, 200, 300,100]]});
}, 1000);
setTimeout(function () {
chart2.load({columns:[['data2', 30, 20, 50, 40, 60, 50, 100, 200, 300,100]]});
}, 2000);
</script>
</body>
</html>

88
node_modules/c3/htdocs/samples/chart_area.html generated vendored Normal file
View File

@@ -0,0 +1,88 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<h3>Zerobased</h3>
<div id="chart1"></div>
<h3>Not zerobased because of axis.y.min</h3>
<div id="chart2"></div>
<h3>Zerobased</h3>
<div id="chart3"></div>
<h3>Not zerobased because of axis.y.min</h3>
<div id="chart4"></div>
<h3>+/- vaulues</h3>
<div id="chart5"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area'
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area'
},
axis: {
y: {
min: 100,
}
},
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area'
}
});
var chart4 = c3.generate({
bindto: '#chart4',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area'
},
axis: {
y: {
max: -100,
}
}
});
var chart5 = c3.generate({
bindto: '#chart5',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area'
}
});
</script>
</body>
</html>

66
node_modules/c3/htdocs/samples/chart_area_gradient.html generated vendored Normal file
View File

@@ -0,0 +1,66 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area'
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area'
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area'
}
});
// Insert gradient
var SVG_URL = 'http://www.w3.org/2000/svg';
var grad = document.createElementNS(SVG_URL, 'linearGradient');
grad.setAttribute('id', 'GRADIENTID')
d3.select('svg defs').node().appendChild(grad);
// create color stop 1 and add to gradient
var stop1 = document.createElementNS(SVG_URL, 'stop');
stop1.setAttributeNS(null, 'style', 'stop-color:#c4f');
stop1.setAttributeNS(null, 'offset', 0);
grad.appendChild(stop1);
// create color stop 2 and add to gradient
var stop2 = document.createElementNS(SVG_URL, 'stop');
stop2.setAttributeNS(null, 'style', 'stop-color:#a45');
stop2.setAttributeNS(null, 'offset', 1);
grad.appendChild(stop2);
</script>
</body>
</html>

49
node_modules/c3/htdocs/samples/chart_area_spline.html generated vendored Normal file
View File

@@ -0,0 +1,49 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area-spline'
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area-spline'
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area-spline'
}
});
</script>
</body>
</html>

52
node_modules/c3/htdocs/samples/chart_area_spline_stacked.html generated vendored Normal file
View File

@@ -0,0 +1,52 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 0, 140, 200, 0, 50],
],
type: 'area-spline',
groups: [['data1', 'data2']],
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, -100],
['data2', -130, 0, -140, -200, 0, -50]
],
type: 'area-spline',
groups: [['data1', 'data2']],
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 100],
['data2', -130, 0, 140, -200, 150, -50]
],
type: 'area-spline',
groups: [['data1', 'data2']],
}
});
</script>
</body>
</html>

52
node_modules/c3/htdocs/samples/chart_area_stacked.html generated vendored Normal file
View File

@@ -0,0 +1,52 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 0, 140, 200, 0, 50],
],
type: 'area',
groups: [['data1', 'data2']],
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, -100],
['data2', -130, 0, -140, -200, 0, -50]
],
type: 'area',
groups: [['data1', 'data2']],
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 100],
['data2', -130, 0, 140, -200, 150, -50]
],
type: 'area',
groups: [['data1', 'data2']],
}
});
</script>
</body>
</html>

49
node_modules/c3/htdocs/samples/chart_area_step.html generated vendored Normal file
View File

@@ -0,0 +1,49 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area-step'
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area-step'
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area-step'
}
});
</script>
</body>
</html>

52
node_modules/c3/htdocs/samples/chart_area_step_stacked.html generated vendored Normal file
View File

@@ -0,0 +1,52 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'area-step',
groups: [['data1', 'data2']],
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -300, -350, -300, 0, 0, 0],
['data2', -130, -100, -140, -200, -150, -50]
],
type: 'area-step',
groups: [['data1', 'data2']],
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -300, 350, -300, 0, 0, 0],
['data2', -130, -100, 140, -200, 150, -50]
],
type: 'area-step',
groups: [['data1', 'data2']],
}
});
</script>
</body>
</html>

38
node_modules/c3/htdocs/samples/chart_bar.html generated vendored Normal file
View File

@@ -0,0 +1,38 @@
<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', 1030, 1200, 1100, 1400, 1150, 1250],
['data2', 2130, 2100, 2140, 2200, 2150, 1850]
// ['data1', 30, 200, 100, 400, 150, 250],
// ['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar',
onclick: function (d, element) { console.log("onclick", d, element); },
onmouseover: function (d) { console.log("onmouseover", d); },
onmouseout: function (d) { console.log("onmouseout", d); }
},
axis: {
x: {
type: 'categorized'
}
},
bar: {
width: {
ratio: 0.3,
// max: 30
},
}
});
</script>
</body>
</html>

91
node_modules/c3/htdocs/samples/chart_bar_stacked.html generated vendored Normal file
View File

@@ -0,0 +1,91 @@
<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 axis_x_type = 'category',
axis_rotated = false;
var generate = function () { return c3.generate({
data: {
columns: [
['data1', 30, 200, 200, 400, 150, -250],
['data2', 130, -100, 100, 200, 150, 50],
['data3', 230, -200, 200, 0, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},
axis: {
x: {
type: axis_x_type
},
rotated: axis_rotated
},
grid: {
y: {
lines: [{value:0}]
}
},
}); }, chart = generate();
function update1() {
chart.groups([['data1', 'data2', 'data3']])
}
function update2() {
chart.load({
columns: [['data4', 100, 50, 150, -200, 300, -100]]
});
}
function update3() {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}
setTimeout(update1, 1000);
setTimeout(update2, 2000);
setTimeout(update3, 3000);
setTimeout(function () {
axis_rotated = true;
chart = generate();
}, 4000);
setTimeout(update1, 5000);
setTimeout(update2, 6000);
setTimeout(update3, 7000);
setTimeout(function () {
axis_x_type = '';
axis_rotated = false;
chart = generate();
}, 8000);
setTimeout(update1, 9000);
setTimeout(update2, 10000);
setTimeout(update3, 11000);
setTimeout(function () {
axis_x_type = '';
axis_rotated = true;
chart = generate();
}, 12000);
setTimeout(update1, 13000);
setTimeout(update2, 14000);
setTimeout(update3, 15000);
</script>
</body>
</html>

41
node_modules/c3/htdocs/samples/chart_combination.html generated vendored Normal file
View File

@@ -0,0 +1,41 @@
<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],
['data4', 200, 130, 90, 240, 130, 220],
['data5', 130, 120, 150, 140, 160, 150],
['data6', 90, 70, 20, 50, 60, 120],
],
types: {
data1: 'bar',
data2: 'bar',
data3: 'spline',
data4: 'line',
data5: 'bar',
data6: 'area'
},
groups: [
['data1','data2']
]
},
axis: {
x: {
type: 'categorized'
}
}
});
</script>
</body>
</html>

60
node_modules/c3/htdocs/samples/chart_donut.html generated vendored Normal file
View File

@@ -0,0 +1,60 @@
<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({
data: {
columns: [
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
["setosa", 30],
// ["versicolor", 40],
// ["virginica", 50],
],
type : 'donut',
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
onclick: function (d, i) { console.log("onclick", d, i, this); },
order: null // set null to disable sort of data. desc is the default.
},
axis: {
x: {
label: 'Sepal.Width'
},
y: {
label: 'Petal.Width'
}
},
donut: {
label: {
// format: function (d, ratio) { return ""; }
},
title: "Iris Petal Width",
width: 70
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 30, 20, 50, 40, 60, 50],
]
});
}, 1000);
setTimeout(function () {
chart.unload({
ids: 'virginica'
});
}, 2000);
</script>
</body>
</html>

181
node_modules/c3/htdocs/samples/chart_gauge.html generated vendored Normal file
View File

@@ -0,0 +1,181 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></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: [
[ 'data', 91.4 ]
],
type: 'gauge',
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
onclick: function (d, i) { console.log("onclick", d, i, this); },
},
gauge: {
label: {
// format: function(value, ratio) {
// return value;
// },
// show: false // to turn off the min/max labels.
},
// min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
// max: 100, // 100 is default
// units: ' %',
// width: 39 // for adjusting arc thickness
},
color: {
pattern: ['#FF0000', '#F6C600', '#60B044'], // the three color levels for the percentage values.
threshold: {
// unit: 'value', // percentage is default
// max: 200, // 100 is default
values: [30, 60, 90] // alternate first value is 'value'
}
}
});
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data', 75.0]
],
type: 'gauge',
},
gauge: {
min: 50,
max: 100
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data', 0.0]
],
type: 'gauge',
},
gauge: {
min: -100,
max: 100
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data', -75.0]
],
type: 'gauge',
},
gauge: {
min: -100,
max: -50
}
});
var cycleDemo = function () {
setTimeout(function () {
d3.select('#chart .c3-chart-arcs-background')
.transition()
.style('fill', '#333');
}, 1000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 10 ]]
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 50 ]]
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 91.4 ]]
});
}, 4000);
setTimeout(function () {
d3.select('#chart .c3-chart-arcs-background')
.transition()
.style('fill', '#e0e0e0');
}, 5000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 0 ]]
});
}, 6000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 50 ]]
});
}, 7000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 91.4 ]]
});
}, 8000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 0 ]]
});
}, 9000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 50 ]]
});
}, 10000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 91.4 ]]
});
}, 11000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 0 ]]
});
}, 12000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 50 ]]
});
}, 13000);
setTimeout(function () {
chart.load({
columns: [[ 'data', 91.4 ]]
});
}, 14000);
}
cycleDemo();
// setInterval(cycleDemo, 30000);
</script>
</body>
</html>

52
node_modules/c3/htdocs/samples/chart_pie.html generated vendored Normal file
View File

@@ -0,0 +1,52 @@
<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({
data: {
columns: [
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
["setosa", 30],
// ["versicolor", 40],
// ["virginica", 50],
],
type : 'pie',
onmouseover: function (d, i) { console.log("onmouseover", d, i, this); },
onmouseout: function (d, i) { console.log("onmouseout", d, i, this); },
onclick: function (d, i) { console.log("onclick", d, i, this); },
},
axis: {
x: {
label: 'Sepal.Width'
},
y: {
label: 'Petal.Width'
}
}
});
setTimeout(function () {
chart.load({
columns: [
["setosa", 130],
]
});
}, 1000);
setTimeout(function () {
chart.unload({
ids: 'virginica'
});
}, 2000);
</script>
</body>
</html>

93
node_modules/c3/htdocs/samples/chart_pie_sort.html generated vendored Normal file
View File

@@ -0,0 +1,93 @@
<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 sort = true;
var generate = function () { return c3.generate({
data: {
columns: [
// ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
["setosa", 30],
// ["versicolor", 40],
// ["virginica", 50],
],
type : 'pie',
},
axis: {
x: {
label: 'Sepal.Width'
},
y: {
label: 'Petal.Width'
}
},
pie: {
sort: sort,
onmouseover: function (d, i) { console.log(d, i); },
onmouseout: function (d, i) { console.log(d, i); },
onclick: function (d, i) { console.log(d, i); },
}
}); }, chart = generate();
setTimeout(function () {
chart.load({
columns: [
["setosa", 130],
]
});
}, 1000);
setTimeout(function () {
chart.unload({
ids: 'virginica'
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
["new data", 300],
]
});
}, 3000);
setTimeout(function () {
sort = false;
chart = generate();
}, 4000);
setTimeout(function () {
chart.load({
columns: [
["setosa", 130],
]
});
}, 5000);
setTimeout(function () {
chart.unload({
ids: 'virginica'
});
}, 6000);
setTimeout(function () {
chart.load({
columns: [
["new data", 300],
]
});
}, 7000);
</script>
</body>
</html>

42
node_modules/c3/htdocs/samples/chart_scatter.html generated vendored Normal file
View File

@@ -0,0 +1,42 @@
<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({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
virginica: 'virginica_x'
},
columns: [
["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
],
type : 'scatter',
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
</script>
</body>
</html>

25
node_modules/c3/htdocs/samples/chart_spline.html generated vendored Normal file
View File

@@ -0,0 +1,25 @@
<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, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'spline',
data2: 'spline'
}
}
});
</script>
</body>
</html>

38
node_modules/c3/htdocs/samples/chart_step.html generated vendored Normal file
View File

@@ -0,0 +1,38 @@
<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', 300, 350, 300, 0, 0, 0],
// ['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'step',
data2: 'area-step'
},
onclick: function (d) { console.log('clicked', d); }
},
subchart: {
show: true
},
});
setTimeout(function () {
chart.load({
columns: [
['data2', 130, 100, 140, 200, 150, 50]
]
});
}, 1000);
</script>
</body>
</html>

50
node_modules/c3/htdocs/samples/chart_step_category.html generated vendored Normal file
View File

@@ -0,0 +1,50 @@
<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',
columns: [
['x', 'hogehoge', 'aaa', 'aaaaaa', 'a', 'b'],
['data1', 300, 350, 300, 0, 0, 0],
// ['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'step',
data2: 'area-step'
},
empty: {
abort: false,
label: {
text: 'hoge'
}
}
},
axis: {
x: {
type: 'categorized'
}
},
subchart: {
show: true
},
});
setTimeout(function () {
chart.load({
columns: [
['data2', 130, 100, 140, 200, 150, 50]
]
});
}, 1000);
</script>
</body>
</html>

86
node_modules/c3/htdocs/samples/custom_x_categorized.html generated vendored Normal file
View File

@@ -0,0 +1,86 @@
<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: {
x : 'x',
columns: [
['x', 'www.google.com', 'www.amazon.com', 'www.facebook.com', 'www.apple.com'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'categorized',
label: 'X Label'
},
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['x', 'www.yahoo.com', 'www.rakuten.com', 'www.mixi.com', 'www.sony.com'],
['download', 130, 300, 200, 470],
['loading', 190, 130, 240, 340],
],
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['x', 'www.hogehoge.com', 'www.aaaa.com', 'www.aaaa.com'],
['download', 130, 300, 200],
['loading', 190, 130, 240],
],
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['x', 'www.yahoo.com', 'www.rakuten.com', 'www.mixi.com', 'www.sony.com'],
['download', 130, 300, 200, 470],
['loading', 190, 130, 240, 340],
],
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [
['download', 30, 30, 20, 170],
['loading', 90, 30, 40, 40],
],
});
}, 4000);
setTimeout(function () {
chart.load({
url: '/data/c3_test3.csv'
});
}, 5000);
</script>
</body>
</html>

59
node_modules/c3/htdocs/samples/custom_x_scale.html generated vendored Normal file
View File

@@ -0,0 +1,59 @@
<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: {
x : 'x',
columns: [
['x', 100, 120, 130, 200, 240, 500],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 300, 200, 250, 350],
],
selection: {
enabled: true
},
onmouseover: function (d) { console.log("onmouseover", d); },
onmouseout: function (d) { console.log("onmouseout", d); }
},
});
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 210, 150, 200, 100, 150],
]
});
}, 1000);
setTimeout(function () {
chart.x([200, 210, 350, 400, 550, 750]);
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['data3', 300, 410, 350, 400, 500, 350],
]
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [
['x', 130, 140, 200, 300, 450, 550],
['sample', 200, 350, 100, 200, 50, 100]
]
})
}, 4000);
</script>
</body>
</html>

64
node_modules/c3/htdocs/samples/custom_xs_scale.html generated vendored Normal file
View File

@@ -0,0 +1,64 @@
<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: {
xs : {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 100, 120, 130, 200, 240, 500],
['x2', 150, 220, 230, 400, 540, 600, 800],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 300, 200, 250, 350, 100],
],
selection: {
enabled: true
},
onclick: function (d) { console.log("onclick", d); },
onmouseover: function (d) { console.log("onmouseover", d); },
onmouseout: function (d) { console.log("onmouseout", d); }
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 210, 150, null, 200, 150],
['data2', 200, 310, 50, 400, 120, 250, 10],
]
});
}, 1000);
setTimeout(function () {
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>

22
node_modules/c3/htdocs/samples/data_columned.html generated vendored Normal file
View File

@@ -0,0 +1,22 @@
<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]
]
}
});
</script>
</body>
</html>

24
node_modules/c3/htdocs/samples/data_hide.html generated vendored Normal file
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>

90
node_modules/c3/htdocs/samples/data_json.html generated vendored Normal file
View File

@@ -0,0 +1,90 @@
<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: {
json: {
data1: [30, 20, 50, 40, 60, 50],
data2: [200, 130, 90, 240, 130, 220],
data3: [300, 200, 160, 400, 250, 250]
}
}
});
setTimeout(function () {
chart = c3.generate({
data: {
json: [{
"date": "2014-06-03",
"443": "3000",
"995": "500"
}, {
"date": "2014-06-04",
"443": "1000",
}, {
"date": "2014-06-05",
"443": "5000",
"995": "1000"
}],
keys: {
x: 'date',
value: [ "443", "995" ]
}
},
axis: {
x: {
type: "category"
}
}
});
}, 1000);
setTimeout(function () {
chart = c3.generate({
data: {
// x: 'name',
json: [
{ id: 1, name: 'abc', visits: 200 },
{ id: 2, name: 'efg', visits: 400 },
{ id: 3, name: 'pqr', visits: 150 },
{ id: 4, name: 'xyz', visits: 420 },
],
keys: {
x: 'name',
value: ['visits'],
}
},
axis: {
x: {
type: 'categorized'
}
}
});
}, 2000);
setTimeout(function () {
chart.load({
json: [
{ id: 1, name: 'abc', visits: 1200 },
{ id: 2, name: 'efg', visits: 900 },
{ id: 3, name: 'pqr', visits: 1150 },
{ id: 4, name: 'xyz', visits: 1020 },
],
keys: {
x: 'name',
value: ['visits'],
}
});
}, 3000);
</script>
</body>
</html>

225
node_modules/c3/htdocs/samples/data_label.html generated vendored Normal file
View File

@@ -0,0 +1,225 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<div id="chart7"></div>
<div id="chart8"></div>
<div id="chart9" style="width:33%;"></div>
<div id="chart10"></div>
<div id="chart11"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', -190, -200, -190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', -190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
}
});
var chart4 = c3.generate({
bindto: '#chart4',
data: {
columns: [
['data1', 190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
rotated: true
}
});
var chart5 = c3.generate({
bindto: '#chart5',
data: {
columns: [
['data1', -190, -200, -190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
rotated: true
}
});
var chart6 = c3.generate({
bindto: '#chart6',
data: {
columns: [
['data1', -190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
rotated: true
}
});
var chart7 = c3.generate({
bindto: '#chart7',
data: {
columns: [
['data1', 30, 200, 100, 500, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 250, 220, 210, 240, 215, 225]
],
groups: [['data1', 'data2', 'data3']],
labels: true,
type: 'bar',
},
axis: {
rotated: true
}
});
var chart8 = c3.generate({
bindto: '#chart8',
data: {
columns: [
['data1', -30, -200, -100, -500, -150, -250],
['data2', -50, -20, -10, -40, -15, -25],
['data3', -250, -220, -210, -240, -215, -225]
],
groups: [['data1', 'data2', 'data3']],
labels: true,
type: 'bar',
},
axis: {
rotated: true
}
});
var chart9 = c3.generate({
bindto: '#chart9',
data: {
columns: [
['data1', -19000000000000, 200, 19000000000000, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
rotated: true
}
});
var chart10 = c3.generate({
bindto: '#chart10',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 0, 140, 200, 0, 50],
['data3', 130, 0, 140, 200, 0, 50],
['data4', 130, 0, 140, 200, 0, 50],
],
type: 'area',
groups: [['data1', 'data2', 'data3', 'data4']],
labels: true
}
});
var chart11 = c3.generate({
bindto: '#chart11',
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 0, 140, 200, 0, 50],
['data3', 130, 0, 140, 200, 0, 50],
['data4', 130, 0, 140, 200, 0, 50],
],
groups: [['data1', 'data2', 'data3', 'data4']],
labels: true
}
});
</script>
</body>
</html>

46
node_modules/c3/htdocs/samples/data_label_format.html generated vendored Normal file
View File

@@ -0,0 +1,46 @@
<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]
],
labels: {
// format: function (v, id) { return "Default Format on " + id; },
format: {
data1: function (v, id) { return "data1 Format"; },
data2: function (v, id) { return "data2 Format"; }
}
},
axes: {
data1: 'y',
data2: 'y2',
}
},
axis: {
y2: {
show: true
}
},
tooltip: {
// enabled: false
},
zoom: {
// enabled: true
},
subchart: {
// show: true
}
});
</script>
</body>
</html>

131
node_modules/c3/htdocs/samples/data_load.html generated vendored Normal file
View File

@@ -0,0 +1,131 @@
<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: {
url: '/data/c3_test.csv',
labels: true,
filter: function (t) {
return t.id !== 'data1';
}
},
subchart: {
show: true
},
zoom: {
enabled: true
},
transition: {
duration: 500
}
});
var queue = [
function () {
chart.load({
url: '/data/c3_test2.csv',
filter: function (t) {
return t.id !== 'data1';
}
});
},
function () {
chart.load({
rows: [
['data4', 'data5', 'data6'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
[1090, 1220, 1320],
]
});
},
function () {
chart.unload({
ids: ['data4', 'data5']
});
},
function () {
chart.unload({
ids: 'data6'
});
},
function () {
chart.load({
columns:[
['data1', 30, 20, 50, 40, 60, 50, 100, 200],
['data7', 230, 220, 250, 240, 260, 250, 300, 400]
]
});
},
function () {
chart.load({
json: {
data1: [1030, 1020, 1050, 1040, 1060, 1050, 1100, 1200],
data7: [430, 420, 450, 440, 460, 550, 400, 200]
}
});
},
function () {
chart.load({
columns: [
['data8', 30, 20, 50, 40, 60, 50],
],
unload: true,
});
},
function () {
chart.load({
columns: [
['data9', 130, 120, 150, 140, 160, 150],
],
unload: ['data7', 'data8'],
});
},
function () {
chart.load({
unload: ['data1', 'data2'],
});
},
function () {
chart.unload();
},
function () {
chart.load({
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
]
});
},
function () {
chart.unload({
ids: ['data2', 'data3']
});
},
];
var i = 0;
queue.forEach(function (f) {
setTimeout(f, 1500 * i++);
});
</script>
</body>
</html>

55
node_modules/c3/htdocs/samples/data_load_timeseries.html generated vendored Normal file
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: {
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({
ids: '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>

25
node_modules/c3/htdocs/samples/data_region.html generated vendored Normal file
View File

@@ -0,0 +1,25 @@
<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]
],
regions: {
sample: [{start:1, end:3}]
}
},
regions: [{start:1, end:3}],
});
</script>
</body>
</html>

34
node_modules/c3/htdocs/samples/data_region_timeseries.html generated vendored Normal file
View File

@@ -0,0 +1,34 @@
<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: {
x : 'date',
xFormat : '%Y%m%d',
columns: [
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['sample', 30, 200, 100, 400, 150, 250]
],
regions: {
sample: [{start:'20130103', end:'20130105'}]
}
},
regions: [{start:'20130103', end:'20130105'}],
axis : {
x : {
type : 'timeseries'
}
}
});
</script>
</body>
</html>

26
node_modules/c3/htdocs/samples/data_rowed.html generated vendored Normal file
View File

@@ -0,0 +1,26 @@
<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: {
rows: [
['data1', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
]
}
});
</script>
</body>
</html>

59
node_modules/c3/htdocs/samples/data_url.html generated vendored Normal file
View File

@@ -0,0 +1,59 @@
<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: {
url: '/data/c3_test.csv'
}
});
setTimeout(function () {
chart.load({
url: '/data/c3_test2.csv',
});
}, 1000);
setTimeout(function () {
chart.load({
url: '/data/c3_test.tsv',
mimeType: 'tsv'
});
}, 2000);
setTimeout(function () {
chart = c3.generate({
data: {
url: '/data/c3_test.json',
mimeType: 'json'
}
});
}, 3000);
setTimeout(function () {
chart.load({
url: '/data/c3_test_2.json',
mimeType: 'json'
});
}, 4000);
setTimeout(function () {
chart.load({
url: '/data/c3_test_3.json',
mimeType: 'json',
keys: {
value: ['data1', 'data2']
}
});
}, 5000);
</script>
</body>
</html>

71
node_modules/c3/htdocs/samples/domain_y.html generated vendored Normal file
View File

@@ -0,0 +1,71 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<button id="btn1">Bar</button>
<button id="btn2">Line</button>
<button id="btn3">Area</button>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var normalData = {
columns: [
['data1', -1030, -1200, 1000],
['data2', -1150, -220, -1110]
],
labels: true,
},
allPositiveData = {
columns: [
['data1', 1030, 1200, 1100],
['data2', 2050, 2020, 2010]
],
labels: true,
},
allNegativeData = {
columns: [
['data1', -1030, -2200, -2100],
['data2', -1150, -2010, -1200]
],
labels: true,
}
var chart1 = c3.generate({
bindto: '#chart1',
data: normalData
});
var chart2 = c3.generate({
bindto: '#chart2',
data: allPositiveData
});
var chart3 = c3.generate({
bindto: '#chart3',
data: allNegativeData
});
d3.select('#btn1').on('click', function () {
chart1.transform('bar');
chart2.transform('bar');
chart3.transform('bar');
});
d3.select('#btn2').on('click', function () {
chart1.transform('line');
chart2.transform('line');
chart3.transform('line');
});
d3.select('#btn3').on('click', function () {
chart1.transform('area');
chart2.transform('area');
chart3.transform('area');
});
</script>
</body>
</html>

37
node_modules/c3/htdocs/samples/element.html generated vendored Normal file
View File

@@ -0,0 +1,37 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, null, 150, 250]
],
},
});
var chart2 = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, null, 150, 250]
],
type: 'bar'
}
});
document.getElementById('chart1').appendChild(chart1.element);
$('#chart2').append(chart2.element);
</script>
</body>
</html>

37
node_modules/c3/htdocs/samples/emptydata.html generated vendored Normal file
View File

@@ -0,0 +1,37 @@
<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({
data: {
columns: [
// ['data1', 100, 200],
],
empty: {
label: {
text: 'No Data'
}
}
},
subchart: {
show: true
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 200],
],
});
}, 1000);
</script>
</body>
</html>

29
node_modules/c3/htdocs/samples/grid_focus.html generated vendored Normal file
View File

@@ -0,0 +1,29 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 300, 250, 150]
]
},
grid: {
focus: {
show: false
}
}
});
</script>
</body>
</html>

66
node_modules/c3/htdocs/samples/grid_x_lines.html generated vendored Normal file
View File

@@ -0,0 +1,66 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></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: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250]
],
type: 'bar'
},
grid: {
x: {
show: true,
lines: [{
value: 2,
text: 'Label 2',
class: 'lineFor2'
}]
},
y: {
show: true,
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
x : 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
['sample', 30, 200, 100, 400, 150]
],
},
axis : {
x : {
type : 'timeseries'
}
},
grid: {
x: {
lines: [{
value: '2013-01-04',
text: '2013/01/04',
class: 'lineFor20130104'
}]
},
lines: {
front: false
}
}
});
</script>
</body>
</html>

73
node_modules/c3/htdocs/samples/grid_x_lines_timeseries.html generated vendored Normal file
View File

@@ -0,0 +1,73 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
"bindto": "#chart1",
"axis": {
"x": {
"type": "timeseries",
"tick": {
format: '%Y-%m-%d %H:%M:%S'
}
}
},
"grid": {
"x": {
"lines": [
{ "value": 1401883200000, "text": new Date(1401883200000), "color": "#f00" },
]
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
var chart2 = c3.generate({
"bindto": "#chart2",
"axis": {
"x": {
"type": "timeseries",
"tick": {
format: '%Y-%m-%d %H:%M:%S'
}
}
},
"grid": {
"x": {
"lines": [
{ "value": new Date(1401883200000), "text": new Date(1401883200000), "color": "#f00" },
]
}
},
"data": {
"type": "line",
"columns": [
["epoch", 1401879600000, 1401883200000, 1401886800000],
["y", 1955, 2419, 2262]
],
"xs": {
"y": "epoch"
}
}
});
</script>
</body>
</html>

111
node_modules/c3/htdocs/samples/grids.html generated vendored Normal file
View File

@@ -0,0 +1,111 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var smallData = [['sample', 30, 200, 100, 400, 150, 250]],
bigData = [['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]];
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: smallData
},
grid: {
x: {
show: true
},
}
});
c3.generate({
bindto: '#chart2',
data: {
columns: smallData
},
grid: {
y: {
show: true
}
}
});
c3.generate({
bindto: '#chart3',
data: {
columns: smallData
},
axis: {
rotated: true,
},
grid: {
x: {
show: true
},
}
});
c3.generate({
bindto: '#chart4',
data: {
columns: smallData
},
axis: {
rotated: true,
},
grid: {
y: {
show: true
}
}
});
c3.generate({
bindto: '#chart5',
data: {
columns: bigData
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
c3.generate({
bindto: '#chart6',
data: {
columns: bigData
},
axis: {
x: {
type: 'category'
}
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});
</script>
</body>
</html>

89
node_modules/c3/htdocs/samples/grids_timeseries.html generated vendored Normal file
View File

@@ -0,0 +1,89 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var smallData = [
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'],
['sample', 30, 200, 100, 400, 150, 250]
],
bigData = [
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', '2014-12-01'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
];
c3.generate({
bindto: '#chart1',
data: {
x: 'x',
columns: smallData
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y-%m-%d %H:%M:%S"
}
}
},
grid: {
x: {
show: true,
},
}
});
c3.generate({
bindto: '#chart2',
data: {
x: 'x',
columns: smallData
},
axis: {
rotated: true,
x: {
type: 'timeseries',
tick: {
format: "%Y-%m-%d %H:%M:%S"
}
}
},
grid: {
x: {
show: true,
},
}
});
c3.generate({
bindto: '#chart3',
data: {
x: 'x',
columns: bigData
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y-%m-%d %H:%M:%S"
}
}
},
grid: {
x: {
show: true
}
}
});
</script>
</body>
</html>

25
node_modules/c3/htdocs/samples/interaction_enabled.html generated vendored Normal file
View File

@@ -0,0 +1,25 @@
<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({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
interaction: {
enabled: false
}
});
</script>
</body>
</html>

87
node_modules/c3/htdocs/samples/legend.html generated vendored Normal file
View File

@@ -0,0 +1,87 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var columns = [];
for (var i = 0; i < 28; i++ ) {
columns[i] = ['datahogehogeohgeohoge' + i, 10 * i, 20 * i];
}
c3.generate({
bindto: '#chart1',
data: {
columns: columns,
},
});
c3.generate({
bindto: '#chart2',
data: {
columns: columns,
},
legend: {
position: 'right'
},
});
c3.generate({
bindto: '#chart3',
data: {
columns: columns,
},
legend: {
position: 'inset',
},
});
c3.generate({
bindto: '#chart4',
data: {
columns: columns,
},
axis: {
rotated: true,
},
});
c3.generate({
bindto: '#chart5',
data: {
columns: columns,
},
legend: {
position: 'right'
},
axis: {
rotated: true,
},
});
c3.generate({
bindto: '#chart6',
data: {
columns: columns,
},
legend: {
position: 'inset'
},
axis: {
rotated: true,
},
});
</script>
</body>
</html>

138
node_modules/c3/htdocs/samples/padding.html generated vendored Normal file
View File

@@ -0,0 +1,138 @@
<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="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<div id="chart4"></div>
<div id="chart5"></div>
<div id="chart6"></div>
<div id="chart7"></div>
<div id="chart8"></div>
<div id="chart9"></div>
<div id="chart10"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var option = {
padding: {
top: 50,
right: 200,
bottom: 50,
left: 200,
},
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 200, 100, 150, 150]
],
axes: {
data2: 'y2'
},
},
axis: {
rotated: true,
y: {
label: {
text: 'Y Label',
position: 'outer-center'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-center'
}
}
},
legend: {
position: 'bottom'
},
subchart: {
show: false
},
grid: {
x: {
show: true,
},
y: {
show: true,
}
}
};
option.bindto = '#chart1';
var chart1 = c3.generate(option);
option.bindto = '#chart2';
option.legend.position = 'right'
var chart2 = c3.generate(option);
option.bindto = '#chart3';
option.legend.position = 'bottom';
option.subchart.show = true;
var chart3 = c3.generate(option);
option.bindto = '#chart4';
option.legend.position = 'right';
option.subchart.show = true;
var chart4 = c3.generate(option);
option.bindto = '#chart5';
option.padding = {
top: 0,
right: 0,
bottom: 0,
left: 0,
};
option.subchart.show = false;
option.legend.position = 'bottom';
var chart5 = c3.generate(option);
option.axis.rotated = false;
option.bindto = '#chart6';
var chart6 = c3.generate(option);
option.bindto = '#chart7';
option.legend.position = 'right'
var chart7 = c3.generate(option);
option.bindto = '#chart8';
option.legend.position = 'bottom';
option.subchart.show = true;
var chart8 = c3.generate(option);
option.bindto = '#chart9';
option.legend.position = 'right';
option.subchart.show = true;
var chart9 = c3.generate(option);
option.bindto = '#chart10';
option.padding = {
top: 0,
right: 0,
bottom: 0,
left: 0,
};
option.subchart.show = false;
option.legend.position = 'bottom';
var chart10 = c3.generate(option);
</script>
</body>
</html>

88
node_modules/c3/htdocs/samples/padding_update.html generated vendored Normal file
View File

@@ -0,0 +1,88 @@
<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 axis_rotated = true;
var generate = function () { return c3.generate({
data: {
x: 'x',
columns: [
['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
['data1', 190, 200, 190, null],
],
type: 'bar',
labels: {
format: function (v, id) {
if (v === null) {
return 'Not Applicable';
}
return d3.format('$')(v);
}
}
},
axis: {
x: {
type: 'categorized'
},
rotated: axis_rotated
},
}); }, chart = generate();
setTimeout(function () {
chart.hide();
}, 1000);
setTimeout(function () {
chart.show();
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['data1', 300, 350, 100]
],
categories: ['2014-01-01 10:10:10', '2014-02-01 12:30:00', '2014-03-01 16:30:00']
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [
['data1', 50, 100, 150]
],
categories: ['2014', '2015', '2016']
});
}, 4000);
setTimeout(function () {
axis_rotated = false;
chart = generate();
}, 5000);
setTimeout(function () {
chart.load({
columns: [
['data1', 300, 350, 100000]
],
});
}, 6000);
setTimeout(function () {
chart.load({
columns: [
['data1', 50, 100, 150]
],
});
}, 7000);
</script>
</body>
</html>

27
node_modules/c3/htdocs/samples/plugin.html generated vendored Normal file
View File

@@ -0,0 +1,27 @@
<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/d3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script src="/js/samples/plugin.js"></script>
<script>
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
onclick: function (d, element) { console.log("onclick", d, element); },
onmouseover: function (d) { console.log("onmouseover", d); },
onmouseout: function (d) { console.log("onmouseout", d); },
},
test1: 'TEST1',
});
</script>
</body>
</html>

28
node_modules/c3/htdocs/samples/point_r.html generated vendored Normal file
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>

87
node_modules/c3/htdocs/samples/regions.html generated vendored Normal file
View File

@@ -0,0 +1,87 @@
<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({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 300]
]
},
axis: {
rotated: true,
y2: {
// show: true,
}
},
regions: [
{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"}]);
}, 5000);
setTimeout(function () {
chart.regions.remove({classes:['region1', 'region2'], duration: 0});
}, 6000);
setTimeout(function () {
chart.regions.add([
{start:3,end:3.5,class:"region3 hoge"},
{start:4,end:4.5,class:"region4 hoge"},
{start:0,end:0.5,class:"region5 hogehoge"},
]);
}, 7000);
setTimeout(function () {
chart.regions.remove({classes:['hoge'], duration: 500});
}, 8000);
setTimeout(function () {
chart.regions.remove({classes:['hogehoge']});
}, 9000);
setTimeout(function () {
chart.regions.remove({});
}, 10000);
</script>
</body>
</html>

49
node_modules/c3/htdocs/samples/regions_timeseries.html generated vendored Normal file
View File

@@ -0,0 +1,49 @@
<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({
data: {
x: 'date',
columns: [
['date', '2014-01-01', '2014-01-10', '2014-01-20', '2014-01-30', '2014-02-01'],
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y%m%d %H:%M:%S'
}
},
},
regions: [
{start: '2014-01-05', end: '2014-01-10'},
// {start: new Date('2014-01-10'), end: new Date('2014-01-15')},
{start: 1390608000000, end: 1391040000000}
]
});
setTimeout(function () {
chart.load({
columns: [
['date', +new Date('2014-01-01'), +new Date('2014-01-10'), +new Date('2014-03-01')],
['sample', 100, 200, 300]
]
});
chart.regions([
{start: +new Date('2014-01-10'), end: +new Date('2014-01-15')}
]);
}, 1000);
</script>
</body>
</html>

9
node_modules/c3/htdocs/samples/requirejs.html generated vendored Normal file
View File

@@ -0,0 +1,9 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
<script data-main="/js/samples/requirejs.js" src="/js/require.js"></script>
</head>
<body>
<div id="chart"></div>
</body>
</html>

173
node_modules/c3/htdocs/samples/selection.html generated vendored Normal file
View File

@@ -0,0 +1,173 @@
<html>
<head>
<link href="/css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
grouped => true, multiple => true
<div id="chart1"></div>
grouped => true, multiple => true, tooltip.grouped = false
<div id="chart1-1"></div>
grouped => true, multiple => false
<div id="chart2"></div>
grouped => true, multiple => false, tooltip.grouped = false
<div id="chart2-1"></div>
grouped => false, multiple => true
<div id="chart3"></div>
grouped => false, multiple => true, tooltip.grouped = false
<div id="chart3-1"></div>
grouped => false, multiple => false
<div id="chart4"></div>
grouped => false, multiple => false, tooltip.grouped = false
<div id="chart4-1"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: true,
multiple: true,
},
onclick: function (d, element) { console.log("onclick", d, element); },
onselected: function (d, element) { console.log("onselected", d, element); },
onunselected: function (d, element) { console.log("onunselected", d, element); },
ondragstart: function () { console.log("ondragstart"); },
ondragend: function () { console.log("ondragend"); },
},
});
var chart11 = c3.generate({
bindto: '#chart1-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: true,
multiple: true,
},
},
tooltip: {
grouped: false
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: true,
multiple: false,
}
}
});
var chart21 = c3.generate({
bindto: '#chart2-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: true,
multiple: false,
}
},
tooltip: {
grouped: false
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: true,
}
}
});
var chart31 = c3.generate({
bindto: '#chart3-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: true,
}
},
tooltip: {
grouped: false
}
});
var chart4 = c3.generate({
bindto: '#chart4',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: false,
}
}
});
var chart41 = c3.generate({
bindto: '#chart4-1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
selection: {
enabled: true,
grouped: false,
multiple: false,
}
},
tooltip: {
grouped: false
}
});
</script>
</body>
</html>

24
node_modules/c3/htdocs/samples/simple.html generated vendored Normal file
View File

@@ -0,0 +1,24 @@
<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({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
onclick: function (d, element) { console.log("onclick", d, element); },
onmouseover: function (d) { console.log("onmouseover", d); },
onmouseout: function (d) { console.log("onmouseout", d); },
}
});
</script>
</body>
</html>

67
node_modules/c3/htdocs/samples/subchart.html generated vendored Normal file
View File

@@ -0,0 +1,67 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<div id="chart3"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
labels: true
},
subchart: {
show: true
},
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
labels: true
},
subchart: {
show: true
},
axis: {
rotated: true
}
});
var chart3 = c3.generate({
bindto: '#chart3',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
labels: true
},
axis: {
x: {
default: [3, 5]
}
},
subchart: {
show: true
},
});
</script>
</body>
</html>

57
node_modules/c3/htdocs/samples/subchart_onbrush.html generated vendored Normal file
View File

@@ -0,0 +1,57 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
x : 'x',
columns: [
['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01'],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d"
}
}
},
subchart: {
show: true,
onbrush: function (domain) {
console.log(this, domain);
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
subchart: {
show: true,
onbrush: function (domain) {
console.log(this, domain);
}
}
});
</script>
</body>
</html>

94
node_modules/c3/htdocs/samples/test.html generated vendored Normal file
View File

@@ -0,0 +1,94 @@
<html>
<head>
<!-- <link rel="stylesheet" type="text/css" href="/css/bootstrap.min.css">-->
<link rel="stylesheet" type="text/css" href="/css/c3.css">
<style>
.green {
fill: green;
}
.red {
fill: red;
}
</style>
</head>
<body>
<!--
<table>
<tr>
<td>
<div id="chart1"></div>
</td>
<td>
<div id="chart2"></div>
</td>
</tr>
<tr>
<td>
<div id="chart3"></div>
</td>
<td></td>
</tr>
</table>
-->
<!--
<div class="center-blocky">
<div class="col-md-12">
<div>
<div id="chart"></div>
</div>
</div>
</div>
-->
<!--
<div id="timeTaken">Ready</div>
<button id="load">Load</button>
-->
<!--
<div class="widget">
<div class="widgetHeader">Sample Widget</div>
<div class="widgetBody">
<strong>Widget Title</strong>
<div id="chart"></div>
</div>
</div>
-->
<div class="buttons">
<button id="redraw">Redraw Chart</button>
</div>
<div id="chart" class="chart"></div>
<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>
<div id="chart5" class="chart"></div>
<div id="chart6" class="chart"></div>
<div id="chart7" class="chart"></div>
<div id="chart8" class="chart"></div>
<div id="chart9" class="chart"></div>
<div id="chart10" class="chart"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>-->
<!-- <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>-->
<!-- <script src="/js/d3.js" charset="utf-8"></script>-->
<script src="/js/d3-3.5.6.js" charset="utf-8"></script>
<!-- <script src="/js/d3-3.4.13.min.js" charset="utf-8"></script>-->
<!-- <script src="/js/d3-3.5.0.min.js" charset="utf-8"></script>-->
<script src="/js/c3.js" charset="utf-8"></script>
<!-- <script src="/js/c3.0.4.8.min.js" charset="utf-8"></script>-->
<!-- <script src="/js/bootstrap.min.js"></script>-->
<!-- <script src="/js/moment.min.js"></script>-->
<!-- <script src="/js/moment-range.js"></script>-->
<script src="/js/bubble.js" charset="utf-8"></script>
<script src="/js/test.js" charset="utf-8"></script>
</body>
</html>

54
node_modules/c3/htdocs/samples/timeseries.html generated vendored Normal file
View File

@@ -0,0 +1,54 @@
<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: {
x : 'date',
xFormat : '%Y%m%d',
columns: [
// ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 130, 300, 200, 450, 250, 350]
]
},
axis : {
x : {
type : 'timeseries',
tick : {
// format : "%m/%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
format : "%e %b %y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['sample', 200, 130, 90, 240, 130, 100],
['sample2', 300, 200, 160, 400, 250, 250]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['date', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'],
['sample', 500, 630, 690, 440, 630, 900],
['sample2', 400, 600, 460, 200, 350, 450]
]
});
}, 2000);
</script>
</body>
</html>

64
node_modules/c3/htdocs/samples/timeseries_date.html generated vendored Normal file
View File

@@ -0,0 +1,64 @@
<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: {
x : 'x',
xFormat : '%Y%m%d',
columns: [
['x', new Date('2013-01-01T00:00:00Z'), new Date('2013-01-02T00:00:00Z'), new Date('2013-01-03T00:00:00Z'), new Date('2013-01-04T00:00:00Z'), new Date('2013-01-05T00:00:00Z'), new Date('2013-01-06T00:00:00Z')],
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 130, 300, 200, 450, 250, 350]
]
},
axis : {
x : {
type : 'timeseries',
tick : {
// format : "%m/%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
format : "%e %b %y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['sample', 200, 130, 90, 240, 130, 100],
['sample2', 300, 200, 160, 400, 250, 250]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['x', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'],
['sample', 500, 630, 690, 440, 630, 900],
['sample2', 400, 600, 460, 200, 350, 450]
]
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['x', new Date('2014-01-02T00:00:00Z'), new Date('2014-02-02T00:00:00Z'), new Date('2014-03-02T00:00:00Z'), new Date('2014-04-02T00:00:00Z'), new Date('2014-05-02T00:00:00Z'), new Date('2014-06-02T00:00:00Z')],
['sample', 500, 630, 690, 440, 630, 900],
['sample2', 400, 600, 460, 200, 350, 450]
]
});
}, 3000);
</script>
</body>
</html>

72
node_modules/c3/htdocs/samples/timeseries_descendent.html generated vendored Normal file
View File

@@ -0,0 +1,72 @@
<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 src="/js/c3.min.0.1.35.js"></script>-->
<script>
var dates = ['date',
1401908040000,
1401907980000,
1401907920000,
1401907860000,
1401907800000,
1401907740000,
1401907680000,
1401907620000,
1401907560000,
1401907500000
];
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'date',
columns: [
dates,
['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400],
['data2', 130, 300, 200, 450, 250, 350, 130, 300, 200, 450]
],
types: {
data1: 'bar',
}
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d %H:%M:%S"
}
}
}
});
/*
setTimeout(function () {
chart.load({
columns: [
['sample', 200, 130, 90, 240, 130, 100],
['sample2', 300, 200, 160, 400, 250, 250]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['date', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'],
['sample', 500, 630, 690, 440, 630, 900],
['sample2', 400, 600, 460, 200, 350, 450]
]
});
}, 2000);
*/
</script>
</body>
</html>

52
node_modules/c3/htdocs/samples/timeseries_raw.html generated vendored Normal file
View File

@@ -0,0 +1,52 @@
<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 rows = [["x","Views","GMV"]];
rows = rows.concat([[1398709800000,780,136],
[1398450600000,812,134],
[1399401000000,784,154],
[1399228200000,786,135],
[1399573800000,802,131],
[1399487400000,773,166],
[1399314600000,787,146],
[1399919400000,1496,309],
[1399833000000,767,138],
[1399746600000,797,141],
[1399660200000,796,146],
[1398623400000,779,143],
[1399055400000,794,140],
[1398969000000,791,140],
[1398882600000,825,107],
[1399141800000,786,136],
[1398537000000,773,143],
[1398796200000,783,154],
[1400005800000,1754,284]].sort(function (a, b) {
return a[0] - b[0];
}));
var chart = c3.generate({
bindto: '#chart',
data: {
x : 'x',
rows: rows
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
</script>
</body>
</html>

26
node_modules/c3/htdocs/samples/tooltip_grouped.html generated vendored Normal file
View File

@@ -0,0 +1,26 @@
<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]
]
},
tooltip: {
grouped: false
}
});
</script>
</body>
</html>

32
node_modules/c3/htdocs/samples/tooltip_show.html generated vendored Normal file
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.min.js"></script>
<script>
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 60]
]
},
tooltip: {
init: {
show: true,
x: 2,
position: {
top: '145px',
left: '290px'
}
}
}
});
</script>
</body>
</html>

71
node_modules/c3/htdocs/samples/zoom.html generated vendored Normal file
View File

@@ -0,0 +1,71 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<button onclick="load()">Load</button>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
columns: [
generateData(100)
],
},
axis: {
x: {
default: [30, 60]
}
},
zoom: {
enabled: true,
onzoomstart: function (event) {
console.log("onzoomstart", event);
},
onzoomend: function (domain) {
console.log("onzoomend", domain);
},
},
subchart: { show: true }
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
generateData(100)
],
},
axis: {
x: {
default: [30, 60]
}
},
zoom: { enabled: true },
});
function load() {
chart1.load({
columns: [
generateData(Math.random() * 1000)
],
});
}
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
</script>
</body>
</html>

47
node_modules/c3/htdocs/samples/zoom_category.html generated vendored Normal file
View File

@@ -0,0 +1,47 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart"></div>
<button onclick="load()">Load</button>
<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: [
generateData(100)
],
},
axis: {
x: {
type: 'category'
}
},
zoom: { enabled: true },
subchart: { show: true }
});
function load() {
chart.load({
columns: [
generateData(Math.random() * 1000)
],
});
}
function generateData(n) {
var column = ['sample'];
for (var i = 0; i < n; i++) {
column.push(Math.random() * 500);
}
return column;
}
</script>
</body>
</html>

57
node_modules/c3/htdocs/samples/zoom_onzoom.html generated vendored Normal file
View File

@@ -0,0 +1,57 @@
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/c3.css">
</head>
<body>
<div id="chart1"></div>
<div id="chart2"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script>
var chart1 = c3.generate({
bindto: '#chart1',
data: {
x : 'x',
columns: [
['x', '2013-01-01', '2013-02-01', '2013-03-01', '2013-04-01', '2013-05-01'],
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
axis : {
x : {
type : 'timeseries',
tick : {
format : "%Y-%m-%d"
}
}
},
zoom: {
enabled: true,
onzoom: function (domain) {
console.log(this, domain);
}
}
});
var chart2 = c3.generate({
bindto: '#chart2',
data: {
columns: [
['sample', 30, 200, 100, 400, 150],
['sample2', 130, 300, 200, 450, 250]
]
},
zoom: {
enabled: true,
onzoom: function (domain) {
console.log(this, domain);
}
}
});
</script>
</body>
</html>

46
node_modules/c3/htdocs/samples/zoom_reduction.html generated vendored Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>c3ext</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="/images/logo_128.ico" />
<link href="/css/c3.css" rel="stylesheet" />
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://rawgithub.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script>
<script src="/js/extensions/c3ext.js"></script>
<script src="/js/samples/zoom_reduction.js"></script>
</head>
<body onload="main()">
<div class="container-fluid">
<h1>C3 DataSet Reduction by Zoom Level</h1>
<h2>Hackathon May 2014</h2>
<h4>By Dan-el Khen</h4>
<p>Rendering graphs in the browser has many advantages, the downside is that takes a long time to render when having large datasets. </p>
<p>This feature allows you reduces the dataset according to your current zoom level.
It allows the developer to implement the reduction algorithm in a simple function that accepts an array of values, and returns a reduced single value.
The default reducer will take the first item, but avg/sum/first/last or any other algorithm is simple to implement.
</p>
<h3>Example</h3>
<p>
In the following example, we'll render 10K data points, each time we'll reduce those to about 100 items (depending on available size on your screen),
when zooming in, the resolution of the data will be better and more accurate. This would help in showing the big picture, even when the amount of data is bigger than the numbers of pixels on the screen.
</p>
<p>Click on the buttons or scroll with your mouse wheel inside the graph to zoom and/or pan.</p>
<pre id="status"></pre>
<div>
<button onclick="chart.zoom2.zoomIn()">zoomIn</button>
<button onclick="chart.zoom2.zoomOut()">zoomOut</button>
<button onclick="chart.zoom2.panLeft()">panLeft</button>
<button onclick="chart.zoom2.panRight()">panRight</button>
<button onclick="chart.zoom2.enhance()">enhance</button>
<button onclick="chart.zoom2.dehance()">dehance</button>
<button onclick="chart.zoom2.reset()">reset</button>
</div>
<div id="divChart" style="height:300px"></div>
<h3>Notes</h3>
<p>Only 'columns' data format is supported for now.</p>
</div>
</body>
</html>