first commit

This commit is contained in:
root
2026-03-14 09:49:00 +00:00
commit 708ff116e1
1958 changed files with 1718027 additions and 0 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@
ace.define("ace/theme/tomorrow",["require","exports","module","ace/lib/dom"],function(e,t,n){t.isDark=!1,t.cssClass="ace-tomorrow",t.cssText=".ace-tomorrow .ace_gutter {background: #f6f6f6;color: #4D4D4C}.ace-tomorrow .ace_print-margin {width: 1px;background: #f6f6f6}.ace-tomorrow {background-color: #FFFFFF;color: #4D4D4C}.ace-tomorrow .ace_cursor {color: #AEAFAD}.ace-tomorrow .ace_marker-layer .ace_selection {background: #D6D6D6}.ace-tomorrow.ace_multiselect .ace_selection.ace_start {box-shadow: 0 0 3px 0px #FFFFFF;border-radius: 2px}.ace-tomorrow .ace_marker-layer .ace_step {background: rgb(255, 255, 0)}.ace-tomorrow .ace_marker-layer .ace_bracket {margin: -1px 0 0 -1px;border: 1px solid #D1D1D1}.ace-tomorrow .ace_marker-layer .ace_active-line {background: #EFEFEF}.ace-tomorrow .ace_gutter-active-line {background-color : #dcdcdc}.ace-tomorrow .ace_marker-layer .ace_selected-word {border: 1px solid #D6D6D6}.ace-tomorrow .ace_invisible {color: #D1D1D1}.ace-tomorrow .ace_keyword,.ace-tomorrow .ace_meta,.ace-tomorrow .ace_storage,.ace-tomorrow .ace_storage.ace_type,.ace-tomorrow .ace_support.ace_type {color: #8959A8}.ace-tomorrow .ace_keyword.ace_operator {color: #3E999F}.ace-tomorrow .ace_constant.ace_character,.ace-tomorrow .ace_constant.ace_language,.ace-tomorrow .ace_constant.ace_numeric,.ace-tomorrow .ace_keyword.ace_other.ace_unit,.ace-tomorrow .ace_support.ace_constant,.ace-tomorrow .ace_variable.ace_parameter {color: #F5871F}.ace-tomorrow .ace_constant.ace_other {color: #666969}.ace-tomorrow .ace_invalid {color: #FFFFFF;background-color: #C82829}.ace-tomorrow .ace_invalid.ace_deprecated {color: #FFFFFF;background-color: #8959A8}.ace-tomorrow .ace_fold {background-color: #4271AE;border-color: #4D4D4C}.ace-tomorrow .ace_entity.ace_name.ace_function,.ace-tomorrow .ace_support.ace_function,.ace-tomorrow .ace_variable {color: #4271AE}.ace-tomorrow .ace_support.ace_class,.ace-tomorrow .ace_support.ace_type {color: #C99E00}.ace-tomorrow .ace_heading,.ace-tomorrow .ace_markup.ace_heading,.ace-tomorrow .ace_string {color: #718C00}.ace-tomorrow .ace_entity.ace_name.ace_tag,.ace-tomorrow .ace_entity.ace_other.ace_attribute-name,.ace-tomorrow .ace_meta.ace_tag,.ace-tomorrow .ace_string.ace_regexp,.ace-tomorrow .ace_variable {color: #C82829}.ace-tomorrow .ace_comment {color: #8E908C}.ace-tomorrow .ace_indent-guide {background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAE0lEQVQImWP4////f4bdu3f/BwAlfgctduB85QAAAABJRU5ErkJggg==) right repeat-y}";var r=e("../lib/dom");r.importCssString(t.cssText,t.cssClass)})

File diff suppressed because one or more lines are too long

14027
www/bower_components/c3/docs/js/c3.esm.js vendored Normal file

File diff suppressed because it is too large Load Diff

11320
www/bower_components/c3/docs/js/c3.js vendored Normal file

File diff suppressed because it is too large Load Diff

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,186 @@
c3.generate({
bindto: '#chart2_1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
c3.generate({
bindto: '#chart3_1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
}
},
axis: {
y2: {
show: true
}
}
});
c3.generate({
bindto: '#chart3_2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
c3.generate({
bindto: '#chart3_3',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
},
types: {
data2: 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
c3.generate({
bindto: '#chart3_4',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
axes: {
data2: 'y2'
},
types: {
data2: 'bar'
}
},
axis: {
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
},
tick: {
format: d3.format("$,")
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
}
}
}
});
var chart4_1 = c3.generate({
bindto: '#chart4_1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
function example4_1() {
chart4_1.load({
columns: [
['data1', 300, 100, 250, 150, 300, 150, 500],
['data2', 100, 200, 150, 50, 100, 250],
['data3', 600, 700, 350, 450, 800, 550]
]
});
}
var chart4_2 = c3.generate({
bindto: '#chart4_2',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 600, 700, 350, 450, 800, 550]
]
}
});
function example4_2() {
chart4_2.unload({
ids: ['data2', 'data3']
});
}
var chart4_3 = c3.generate({
bindto: '#chart4_3',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 600, 700, 350, 450, 800, 550]
]
}
});
function example4_3_1() {
chart4_3.show(['data2', 'data3']);
}
function example4_3_2() {
chart4_3.hide(['data2', 'data3']);
}
c3.generate({
bindto: '#chart5_1',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 600, 700, 350, 450, 800, 550]
]
}
});

File diff suppressed because one or more lines are too long

168
www/bower_components/c3/docs/js/index.js vendored Normal file
View File

@@ -0,0 +1,168 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
],
selection: {
enabled: true
}
}
});
var defaultMessage = $('#message').html(), currentIndex = 0, timer, duration = 1500, demos = [
function () {
chart.load({
columns: [['data2', 100, 30, 200, 320, 50, 150, 230, 80, 150]]
})
setMessage('Load data2');
},
function () {
chart.load({
columns: [['data3', 70, 90, 170, 220, 100, 110, 130, 40, 50]]
})
setMessage('Load data3');
},
function () {
chart.select(['data1'], [2]);
setMessage('Select point for index 2 of data1');
},
function () {
chart.select(['data1'], [4,6]);
setMessage('Select point for index 4,6 of data1');
},
function () {
chart.unselect();
setMessage('Unselect points');
},
function () {
chart.focus('data2');
setMessage('Focus on data2');
},
function () {
chart.focus('data3');
setMessage('Focus on data3');
},
function () {
chart.revert();
setMessage('Defocus');
},
function () {
chart.load({
columns: [['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]]
})
setMessage('Update data1');
},
function () {
chart.load({
columns: [['data2', 30, 50, 90, 120, 40, 50, 80, 70, 50]]
})
setMessage('Update data2');
},
function () {
chart.regions([{start:1,end:3}]);
setMessage('Add region from 1 to 3');
},
function () {
chart.regions.add([{start:6}]);
setMessage('Add region from 6 to end');
},
function () {
chart.regions([]);
setMessage('Clear regions');
},
function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
setMessage('Add x grid lines for 1, 4');
},
function () {
chart.ygrids.add([{value: 450, text:'Label 450'}]);
setMessage('Add y grid lines for 450');
},
function () {
chart.xgrids.remove({value: 1});
chart.xgrids.remove({value: 4});
setMessage('Remove grid lines for 1, 4');
},
function () {
chart.ygrids.remove({value: 450});
setMessage('Remove grid line for 450');
},
function () {
chart.transform('bar');
setMessage('Show as bar chart');
},
function () {
chart.groups([['data2','data3']]);
setMessage('Grouping data2 and data3');
},
function () {
chart.groups([['data1', 'data2', 'data3']]);
setMessage('Grouping data1, data2 and data3');
},
function () {
chart.groups([['data2', 'data3']]);
chart.transform('line', 'data1');
setMessage('Show data1 as line');
},
function () {
chart.unload({
ids: 'data3'
});
setMessage('Unload data3');
},
function () {
chart.unload({
ids: 'data2'
});
setMessage('Unload data2');
},
function () {
chart.flow({
columns: [
['data1', 390, 400, 200, 500]
],
duration: 1000,
});
setMessage('Flow 4 data');
},
function () {
// wait for end of transition for flow
},
function () {
chart.flow({
columns: [
['data1', 190, 230]
],
});
setMessage('Flow 2 data');
},
function () {
// wait for end of transition for flow
},
function () {
chart.transform('line', ['data1', 'data2', 'data3']);
chart.groups([['data1'], ['data2'], ['data3']]);
chart.load({
columns: [['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]]
})
setMessage('Starting Demo..');
}
];
function setMessage(message) {
document.getElementById('message').innerHTML = '<a id="demoMessage" class="button small secondary" onclick="stopDemo();" title="Stop Demo" onclick="stopDemo();">'+message+'</button>';
// $('#demoMessage').tooltip('toggle');
}
function startDemo() {
setMessage('Starting Demo..');
timer = setInterval(function(){
if (currentIndex == demos.length) currentIndex = 0;
demos[currentIndex++]();
}, duration);
}
function stopDemo() {
clearInterval(timer);
document.getElementById('message').innerHTML = defaultMessage;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1 @@

View File

@@ -0,0 +1,14 @@
// Avoid `console` errors in browsers that lack a console.
if (!(window.console && console.log)) {
(function() {
var noop = function() {};
var methods = ['assert', 'clear', 'count', 'debug', 'dir', 'dirxml', 'error', 'exception', 'group', 'groupCollapsed', 'groupEnd', 'info', 'log', 'markTimeline', 'profile', 'profileEnd', 'markTimeline', 'table', 'time', 'timeEnd', 'timeStamp', 'trace', 'warn'];
var length = methods.length;
var console = window.console = {};
while (length--) {
console[methods[length]] = noop;
}
}());
}
// Place any jQuery/helper plugins in here.

View File

@@ -0,0 +1,29 @@
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: {
y: {
label: 'Y Axis Label'
},
y2: {
show: true,
label: 'Y2 Axis Label'
}
}
});
setTimeout(function () {
chart.axis.labels({y2: 'New Y2 Axis Label'});
}, 1000);
setTimeout(function () {
chart.axis.labels({y: 'New Y Axis Label', y2: 'New Y2 Axis Label Again'});
}, 2000);

View File

@@ -0,0 +1,53 @@
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,
}
}
});
setTimeout(function () {
chart.axis.max(500);
}, 1000);
setTimeout(function () {
chart.axis.min(-500);
}, 2000);
setTimeout(function () {
chart.axis.max({y: 600, y2: 100});
}, 3000);
setTimeout(function () {
chart.axis.min({y: -600, y2: -100});
}, 4000);
setTimeout(function () {
chart.axis.range({max: 1000, min: -1000});
}, 5000);
setTimeout(function () {
chart.axis.range({max: {y: 600, y2: 100}, min: {y: -100, y2: 0}});
}, 6000);
setTimeout(function () {
chart.axis.max({x: 10});
}, 7000);
setTimeout(function () {
chart.axis.min({x: -10});
}, 8000);
setTimeout(function () {
chart.axis.range({max: {x: 5}, min: {x: 0}});
}, 9000);

View File

@@ -0,0 +1,32 @@
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]
],
type: 'bar',
colors: {
data1: '#ff0000',
data2: '#00ff00',
data3: '#0000ff'
},
labels: true
}
});
setTimeout(function () {
chart.data.colors({
data1: d3.rgb('#ff0000').darker(1),
data2: d3.rgb('#00ff00').darker(1),
data3: d3.rgb('#0000ff').darker(1),
});
}, 1000);
setTimeout(function () {
chart.data.colors({
data1: d3.rgb('#ff0000').darker(2),
data2: d3.rgb('#00ff00').darker(2),
data3: d3.rgb('#0000ff').darker(2),
});
}, 2000);

View File

@@ -0,0 +1,21 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
names: {
data1: 'Name 1',
data2: 'Name 2'
}
}
});
setTimeout(function () {
chart.data.names({data1: 'New name for data1', data2: 'New name for data2'});
}, 1000);
setTimeout(function () {
chart.data.names({data1: 'New name for data1 again'});
}, 2000);

View File

@@ -0,0 +1,67 @@
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2012-12-29', '2012-12-30', '2012-12-31'],
['data1', 230, 300, 330],
['data2', 190, 230, 200],
['data3', 90, 130, 180],
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%m/%d',
}
}
}
});
setTimeout(function () {
chart.flow({
columns: [
['x', '2013-01-11', '2013-01-21'],
['data1', 500, 200],
['data2', 100, 300],
['data3', 200, 120],
],
duration: 1500,
done: function () {
chart.flow({
columns: [
['x', '2013-02-11', '2013-02-12', '2013-02-13', '2013-02-14'],
['data1', 200, 300, 100, 250],
['data2', 100, 90, 40, 120],
['data3', 100, 100, 300, 500]
],
length: 0,
duration: 1500,
done: function () {
chart.flow({
columns: [
['x', '2013-03-01', '2013-03-02'],
['data1', 200, 300],
['data2', 150, 250],
['data3', 100, 100]
],
length: 2,
duration: 1500,
done: function () {
chart.flow({
columns: [
['x', '2013-03-21', '2013-04-01'],
['data1', 500, 200],
['data2', 100, 150],
['data3', 200, 400]
],
to: '2013-03-01',
duration: 1500,
});
}
});
}
});
},
});
}, 1000);

View File

@@ -0,0 +1,36 @@
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});
setTimeout(function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 1000);
setTimeout(function () {
chart.xgrids([{value: 2, text:'Label 2'}]);
}, 2000);
setTimeout(function () {
chart.xgrids.add([{value: 3, text:'Label 3', class:'hoge'}]);
}, 3000);
setTimeout(function () {
chart.xgrids.remove({value:2});
}, 4000);
setTimeout(function () {
chart.xgrids.remove({class:'hoge'});
}, 5000);
setTimeout(function () {
chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
}, 6000);
setTimeout(function () {
chart.xgrids.remove();
}, 7000);

View File

@@ -0,0 +1,20 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
setTimeout(function () {
chart.resize({height:100, width:300})
}, 1000);
setTimeout(function () {
chart.resize({height:200})
}, 2000);
setTimeout(function () {
chart.resize();
}, 3000);

View File

@@ -0,0 +1,23 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 130, 300, 200, 500, 250, 350]
],
axes: {
sample2: 'y2'
}
},
axis: {
x: {
label: 'X Label'
},
y: {
label: 'Y Label'
},
y2: {
show: true,
label: 'Y2 Label'
}
}
});

View File

@@ -0,0 +1,51 @@
var chart = c3.generate({
data: {
columns: [
['sample1', 30, 200, 100, 400, 150, 250],
['sample2', 430, 300, 500, 400, 650, 250]
],
axes: {
sample1: 'y',
sample2: 'y2'
}
},
axis: {
x: {
label: {
text: 'X Label',
position: 'outer-center'
// inner-right : default
// inner-center
// inner-left
// outer-right
// outer-center
// outer-left
}
},
y: {
label: {
text: 'Y Label',
position: 'outer-middle'
// inner-top : default
// inner-middle
// inner-bottom
// outer-top
// outer-middle
// outer-bottom
}
},
y2: {
show: true,
label: {
text: 'Y2 Label',
position: 'outer-middle'
// inner-top : default
// inner-middle
// inner-bottom
// outer-top
// outer-middle
// outer-bottom
}
}
}
});

View File

@@ -0,0 +1,14 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
types: {
data1: 'bar',
}
},
axis: {
rotated: true
}
});

View File

@@ -0,0 +1,23 @@
var chart = c3.generate({
data: {
x: 'x',
xFormat: '%Y',
columns: [
// ['x', '2012-12-31', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05'],
['x', '2010', '2011', '2012', '2013', '2014', '2015'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
// if true, treat x value as localtime (Default)
// if false, convert to UTC internally
localtime: false,
tick: {
format: '%Y-%m-%d %H:%M:%S'
}
}
}
});

View File

@@ -0,0 +1,18 @@
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06', '2013-01-07', '2013-01-08', '2013-01-09', '2013-01-10', '2013-01-11', '2013-01-12'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
count: 4,
format: '%Y-%m-%d'
}
}
}
});

View File

@@ -0,0 +1,19 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'category',
tick: {
culling: {
max: 4 // the number of tick texts will be adjusted to less than this value
}
// for normal axis, default on
// for category axis, default off
}
}
}
});

View File

@@ -0,0 +1,18 @@
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-10-31', '2013-12-31', '2014-01-31', '2014-02-28'],
['sample', 30, 100, 400, 150],
]
},
axis : {
x : {
type : 'timeseries',
tick: {
fit: true,
format: "%e %b %y"
}
}
}
});

View File

@@ -0,0 +1,18 @@
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2010-01-01', '2011-01-01', '2012-01-01', '2013-01-01', '2014-01-01', '2015-01-01'],
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis : {
x : {
type : 'timeseries',
tick: {
format: function (x) { return x.getFullYear(); }
//format: '%Y' // format string is also available for timeseries data
}
}
}
});

View File

@@ -0,0 +1,20 @@
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'www.somesitename1.com', 'www.somesitename2.com', 'www.somesitename3.com', 'www.somesitename4.com', 'www.somesitename5.com', 'www.somesitename6.com', 'www.somesitename7.com', 'www.somesitename8.com', 'www.somesitename9.com', 'www.somesitename10.com', 'www.somesitename11.com', 'www.somesitename12.com'],
['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
],
type: 'bar'
},
axis: {
x: {
type: 'category',
tick: {
rotate: 75,
multiline: false
},
height: 130
}
}
});

View File

@@ -0,0 +1,18 @@
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06', '2013-01-07', '2013-01-08', '2013-01-09', '2013-01-10', '2013-01-11', '2013-01-12'],
['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
// this also works for non timeseries data
values: ['2013-01-05', '2013-01-10']
}
}
}
});

View File

@@ -0,0 +1,17 @@
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
}
}
});

View File

@@ -0,0 +1,21 @@
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: {
y: {
padding: {top: 200, bottom: 0}
},
y2: {
padding: {top: 100, bottom: 100},
show: true
}
}
});

View File

@@ -0,0 +1,15 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis: {
y: {
max: 400,
min: -400,
// Range includes padding, set 0 if no padding needed
// padding: {top:0, bottom:0}
}
}
});

View File

@@ -0,0 +1,15 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 2500]
]
},
axis : {
y : {
tick: {
format: d3.format("$,")
// format: function (d) { return "$" + d; }
}
}
}
});

View File

@@ -0,0 +1,13 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
]
},
axis: {
x: {
type: 'category',
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
}
}
});

View File

@@ -0,0 +1,12 @@
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 0],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area',
data2: 'area-spline'
}
}
});

View File

@@ -0,0 +1,14 @@
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 120],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'area-spline',
data2: 'area-spline'
// 'line', 'spline', 'step', 'area', 'area-step' are also available to stack
},
groups: [['data1', 'data2']]
}
});

View File

@@ -0,0 +1,24 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
},
bar: {
width: {
ratio: 0.5 // this makes bar width 50% of length between ticks
}
// or
//width: 100 // this makes bar width 100px
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, -150, 200, 300, -200, 100]
]
});
}, 1000);

View File

@@ -0,0 +1,32 @@
var chart = c3.generate({
data: {
columns: [
['data1', -30, 200, 200, 400, -150, 250],
['data2', 130, 100, -100, 200, -150, 50],
['data3', -230, 200, 200, -300, 250, 250]
],
type: 'bar',
groups: [
['data1', 'data2']
]
},
grid: {
y: {
lines: [{value:0}]
}
}
});
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3']])
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data4', 100, -50, 150, 200, -300, -100]]
});
}, 1500);
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3', 'data4']])
}, 2000);

View File

@@ -0,0 +1,21 @@
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],
],
type: 'bar',
types: {
data3: 'spline',
data4: 'line',
data6: 'area',
},
groups: [
['data1','data2']
]
}
});

View File

@@ -0,0 +1,34 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 120],
],
type : 'donut',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
donut: {
title: "Iris Petal Width"
}
});
setTimeout(function () {
chart.load({
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],
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);

View File

@@ -0,0 +1,64 @@
var chart = c3.generate({
data: {
columns: [
['data', 91.4]
],
type: 'gauge',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
},
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', '#F97600', '#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, 100]
}
},
size: {
height: 180
}
});
setTimeout(function () {
chart.load({
columns: [['data', 10]]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [['data', 50]]
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [['data', 70]]
});
}, 3000);
setTimeout(function () {
chart.load({
columns: [['data', 0]]
});
}, 4000);
setTimeout(function () {
chart.load({
columns: [['data', 100]]
});
}, 5000);

View File

@@ -0,0 +1,32 @@
var chart = c3.generate({
data: {
// iris data from R
columns: [
['data1', 30],
['data2', 120],
],
type : 'pie',
onclick: function (d, i) { console.log("onclick", d, i); },
onmouseover: function (d, i) { console.log("onmouseover", d, i); },
onmouseout: function (d, i) { console.log("onmouseout", d, i); }
}
});
setTimeout(function () {
chart.load({
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],
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
chart.unload({
ids: 'data2'
});
}, 2500);

View File

@@ -0,0 +1,53 @@
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
},
// iris data from R
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],
["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],
],
type: 'scatter'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
setTimeout(function () {
chart.load({
xs: {
virginica: 'virginica_x'
},
columns: [
["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],
["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],
]
});
}, 1000);
setTimeout(function () {
chart.unload({
ids: 'setosa'
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
["virginica", 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],
]
});
}, 3000);

View File

@@ -0,0 +1,9 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'spline'
}
});

View File

@@ -0,0 +1,77 @@
// More samples available at:
// - htdocs/samples/chart_stanford.html
// - htdocs/samples/chart_stanford_custom_elements.html
var chart = c3.generate({
data: {
x: 'HPE',
epochs: 'Epochs',
columns: [
['HPE', 2.5, 2.5, 2.5, 2.5, 2.5, 3, 3, 3, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 4.5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5.5, 5.5, 5.5, 2, 2.5, 2.5, 3, 3, 3.5, 3.5, 3.5, 3.5, 3.5, 3.5, 4, 4, 4, 4, 4, 4.5, 4.5, 4.5, 4.5, 4.5, 5, 5, 5, 5, 5, 5, 5.5, 5.5, 2.5, 3, 3, 3.5, 3.5, 3.5, 3.5, 4, 4, 4, 4, 4, 4.5, 4.5, 4.5, 5, 5, 5, 5, 5, 5, 5.5, 5.5, 5.5, 5.5, 2.5, 2.5, 2.5, 3, 3.5, 3.5, 3.5, 3.5, 3.5, 4, 4.5, 4.5, 4.5, 4.5, 4.5, 5, 5, 5, 5.5, 2, 3.5, 3.5, 3.5, 3.5, 3.5, 4, 4.5, 4.5, 4.5, 4.5, 5, 2, 2, 3, 3, 3.5, 3.5, 3.5, 3.5, 4, 4, 4, 4, 5, 2, 3, 3, 3.5, 3.5, 3.5, 3.5, 4, 4.5, 5, 5, 5, 5.5, 5.5, 2.5, 3, 3, 3, 3.5, 4, 2.5, 3, 3.5, 4, 4, 4.5, 5, 3.5, 4, 4, 4, 4, 4.5, 3.5, 4, 4.5, 5, 5, 2.5, 3, 3.5, 3.5, 4, 4.5, 4.5, 4, 5, 3, 4, 4, 2, 4.5, 3.5, 2.5, 3.5, 4, 4, 2.5, 2.5, 3, 3, 4, 4.5, 5, 5, 4.5, 2.5, 3, 4, 3, 3.5, 3.5, 4, 2.5, 3.5, 2.5, 3.5, 2.5, 2.5, 3.5, 2.5, 4.5, 3, 4, 2.5, 4.5, 2.5, 4, 4, 2.5, 3, 3.5, 2.5, 3.5, 3.5, 3.5, 2.5, 3.5, 3.5, 4, 4, 3.5, 4, 4, 4],
['HPL', 24.5, 24, 27.5, 56.5, 26.5, 26, 51.5, 50, 39, 39.5, 54, 48.5, 54.5, 53, 52, 13.5, 16.5, 15.5, 14.5, 19, 19.5, 41, 40, 42.5, 40.5, 41.5, 30, 56, 47, 11.5, 11, 12, 14.5, 55, 56.5, 54, 55.5, 56, 48.5, 19, 56, 56.5, 53.5, 51.5, 52, 31.5, 36.5, 38.5, 22, 21, 22.5, 37, 38, 38.5, 11, 55, 14.5, 12.5, 56, 22, 11, 48, 12.5, 14, 17, 13.5, 43, 55.5, 53.5, 10.5, 49.5, 54.5, 51.5, 19.5, 24, 52.5, 49.5, 47, 45.5, 46, 20, 34.5, 37.5, 28, 10, 26.5, 22.5, 13, 18.5, 20, 29, 39.5, 48.5, 50.5, 19.5, 29, 27.5, 52.5, 50.5, 53, 37, 36, 34.5, 20.5, 31.5, 33, 32, 36, 29, 28.5, 31.5, 29, 30, 11.5, 49, 52.5, 20.5, 49.5, 28, 24.5, 53, 50, 23.5, 47.5, 38, 35, 34, 12, 21, 36.5, 51, 12, 58.5, 36.5, 28.5, 51, 50.5, 20, 50, 56, 55, 29.5, 28.5, 23, 17.5, 38.5, 57.5, 29.5, 38.5, 49, 52.5, 34, 11.5, 27, 30, 10, 51.5, 50.5, 18, 20.5, 23, 49, 51, 48, 33.5, 32.5, 27, 28, 25.5, 57.5, 10.5, 52, 29.5, 27.5, 50, 28.5, 51.5, 21.5, 35.5, 49.5, 37.5, 39, 50, 51, 22.5, 58, 20, 25.5, 48.5, 32, 30, 24.5, 23.5, 29.5, 23, 25, 21, 38, 32.5, 12, 22, 37, 55.5, 22, 38, 55.5, 29, 23.5, 21, 12.5, 14, 11.5, 56.5, 21.5, 20.5, 33, 33.5, 27, 13, 10.5, 22.5, 57, 24, 28.5, 28, 10, 37, 56, 37.5, 11, 10.5, 28, 13.5, 26, 11, 27.5, 12, 26.5, 26, 24.5, 24, 25, 25, 25, 11.5, 25.5, 26.5, 26, 25.5, 27.5, 27, 25, 27, 24.5, 26, 26.5, 25.5],
['Epochs', 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 5, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 6, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 7, 8, 8, 8, 8, 8, 8, 9, 9, 9, 9, 9, 9, 9, 10, 10, 10, 10, 10, 10, 11, 11, 11, 12, 12, 13, 13, 13, 13, 13, 13, 13, 14, 14, 15, 15, 15, 16, 16, 17, 18, 18, 18, 18, 19, 19, 19, 19, 19, 20, 20, 20, 22, 23, 23, 23, 24, 24, 24, 24, 25, 28, 29, 29, 36, 38, 39, 43, 44, 47, 50, 54, 54, 59, 62, 62, 70, 70, 81, 84, 85, 86, 88, 89, 93, 94, 95, 106, 110, 111, 115, 170]
],
type: 'stanford',
},
legend: {
hide: true
},
point: {
focus: {
expand: {
r: 5
}
},
r: 2
},
axis: {
x: {
show: true,
label: {
text: 'HPE (m)',
position: 'outer-center'
},
min: 0,
max: 61,
tick: {
values: d3.range(0, 65, 10)
},
padding: {
top: 0,
bottom: 0,
left: 0,
right: 0
},
},
y: {
show: true,
label: {
text: 'HPL (m)',
position: 'outer-middle'
},
min: 0,
max: 60,
tick: {
values: d3.range(0, 65, 10)
},
padding: {
top: 5,
bottom: 0,
left: 0,
right: 0
},
}
},
stanford: {
scaleMin: 1,
scaleMax: 10000,
scaleFormat: 'pow10',
padding: {
top: 15,
right: 0,
bottom: 0,
left: 0
}
}
});

View File

@@ -0,0 +1,12 @@
var chart = c3.generate({
data: {
columns: [
['data1', 300, 350, 300, 0, 0, 100],
['data2', 130, 100, 140, 200, 150, 50]
],
types: {
data1: 'step',
data2: 'area-step'
}
}
});

View File

@@ -0,0 +1,19 @@
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]
],
type: 'bar',
colors: {
data1: '#ff0000',
data2: '#00ff00',
data3: '#0000ff'
},
color: function (color, d) {
// d will be 'id' when called for legends
return d.id && d.id === 'data3' ? d3.rgb(color).darker(d.value / 150) : color;
}
}
});

View File

@@ -0,0 +1,9 @@
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]
]
}
});

View File

@@ -0,0 +1,45 @@
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: [
{name: 'www.site1.com', upload: 200, download: 200, total: 400},
{name: 'www.site2.com', upload: 100, download: 300, total: 400},
{name: 'www.site3.com', upload: 300, download: 200, total: 500},
{name: 'www.site4.com', upload: 400, download: 100, total: 500},
],
keys: {
// x: 'name', // it's possible to specify 'x' when category axis
value: ['upload', 'download'],
}
},
axis: {
x: {
// type: 'category'
}
}
});
}, 1000);
setTimeout(function () {
chart.load({
json: [
{name: 'www.site1.com', upload: 800, download: 500, total: 400},
{name: 'www.site2.com', upload: 600, download: 600, total: 400},
{name: 'www.site3.com', upload: 400, download: 800, total: 500},
{name: 'www.site4.com', upload: 400, download: 700, total: 500},
],
keys: {
value: ['upload', 'download'],
}
});
}, 2000);

View File

@@ -0,0 +1,19 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, -200, -100, 400, 150, 250],
['data2', -50, 150, -150, 150, -50, -150],
['data3', -100, 100, -40, 100, -150, -50]
],
groups: [
['data1', 'data2']
],
type: 'bar',
labels: true
},
grid: {
y: {
lines: [{value: 0}]
}
}
});

View File

@@ -0,0 +1,25 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, -200, -100, 400, 150, 250],
['data2', -50, 150, -150, 150, -50, -150],
['data3', -100, 100, -40, 100, -150, -50]
],
groups: [
['data1', 'data2']
],
type: 'bar',
labels: {
// format: function (v, id, i, j) { return "Default Format"; },
format: {
data1: d3.format('$'),
// data1: function (v, id, i, j) { return "Format for data1"; },
}
}
},
grid: {
y: {
lines: [{value: 0}]
}
}
});

View File

@@ -0,0 +1,100 @@
var chart = c3.generate({
data: {
url: '/data/c3_test.csv',
type: 'line'
}
});
setTimeout(function () {
chart.load({
url: '/data/c3_test2.csv'
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data1', 130, 120, 150, 140, 160, 150],
['data4', 30, 20, 50, 40, 60, 50],
],
unload: ['data2', 'data3'],
});
}, 2000);
setTimeout(function () {
chart.load({
rows: [
['data2', 'data3'],
[120, 300],
[160, 240],
[200, 290],
[160, 230],
[130, 300],
[220, 320],
],
unload: 'data4',
});
}, 3000);
setTimeout(function () {
chart.load({
columns:[
['data4', 30, 20, 50, 40, 60, 50,100,200]
],
type: 'bar'
});
}, 4000);
setTimeout(function () {
chart.unload({
ids: 'data4'
});
}, 5000);
setTimeout(function () {
chart.load({
columns:[
['data2', null, 30, 20, 50, 40, 60, 50]
]
});
}, 6000);
setTimeout(function () {
chart.unload();
}, 7000);
setTimeout(function () {
chart.load({
rows: [
['data4', 'data2', 'data3'],
[90, 120, 300],
[40, 160, 240],
[50, 200, 290],
[120, 160, 230],
[80, 130, 300],
[90, 220, 320],
],
type: 'bar'
});
}, 8000);
setTimeout(function () {
chart.load({
rows: [
['data5', 'data6'],
[190, 420],
[140, 460],
[150, 500],
[220, 460],
[180, 430],
[190, 520],
],
type: 'line'
});
}, 9000);
setTimeout(function () {
chart.unload({
ids: ['data2', 'data3']
});
}, 10000);

View File

@@ -0,0 +1,12 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
names: {
data1: 'Name 1',
data2: 'Name 2'
}
}
});

View File

@@ -0,0 +1,40 @@
// Locale for Russian (ru_RU)
var d3locale = d3.formatDefaultLocale({
"decimal": ",",
"thousands": "\u00A0",
"grouping": [3],
"currency": ["", " руб."],
"dateTime": "%A, %e %B %Y г. %X",
"date": "%d.%m.%Y",
"time": "%H:%M:%S",
"periods": ["AM", "PM"],
"days": ["воскресенье", "понедельник", "вторник", "среда", "четверг", "пятница", "суббота"],
"shortDays": ["вс", "пн", "вт", "ср", "чт", "пт", "сб"],
"months": ["января", "февраля", "марта", "апреля", "мая", "июня", "июля", "августа", "сентября", "октября", "ноября", "декабря"],
"shortMonths": ["янв", "фев", "мар", "апр", "май", "июн", "июл", "авг", "сен", "окт", "ноя", "дек"]
});
// More about locale settings: https://github.com/mbostock/d3/wiki/Localization
var chart = c3.generate({
data: {
columns: [
['data1', 30000, 20000, 10000, 40000, 15000, 250000],
['data2', 100.5, 1200.46, 100.1, 40.12, 150.1, 250]
],
axes: {
data2: 'y2'
}
},
axis : {
y : {
tick: {
format: d3locale.format(",")
}
},
y2: {
show: true,
tick: {
format: d3locale.format(",")
}
}
}
});

View File

@@ -0,0 +1,41 @@
var chart = c3.generate({
data: {
columns: [
['data1', 130, 200, 320, 400, 530, 750],
['data2', -130, 10, 130, 200, 150, 250],
['data3', -130, -50, -10, -200, -250, -150]
],
type: 'bar',
groups: [
['data1', 'data2', 'data3']
],
order: 'desc' // stack order by sum of values descendantly. this is default.
// order: 'asc' // stack order by sum of values ascendantly.
// order: null // stack order by data definition.
},
grid: {
y: {
lines: [{value:0}]
}
}
});
setTimeout(function () {
chart.load({
columns: [
['data4', 1200, 1300, 1450, 1600, 1520, 1820],
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data5', 200, 300, 450, 600, 520, 820],
]
});
}, 2000);
setTimeout(function () {
chart.groups([['data1', 'data2', 'data3', 'data4', 'data5']])
}, 3000);

View File

@@ -0,0 +1,13 @@
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],
]
}
});

View File

@@ -0,0 +1,64 @@
var chart = c3.generate({
data: {
x : 'x',
columns: [
['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
['download', 30, 200, 100, 400],
['loading', 90, 100, 140, 200],
],
groups: [
['download', 'loading']
],
type: 'bar'
},
axis: {
x: {
type: 'category' // this needed to load string x value
}
}
});
setTimeout(function () {
chart.load({
columns: [
['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
['download', 130, 200, 150, 350],
['loading', 190, 180, 190, 140],
],
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['x', 'www.siteE.com', 'www.siteF.com', 'www.siteG.com'],
['download', 30, 300, 200],
['loading', 90, 130, 240],
],
});
}, 2000);
setTimeout(function () {
chart.load({
columns: [
['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.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_string_x.csv'
});
}, 5000);

View File

@@ -0,0 +1,14 @@
var chart = c3.generate({
data: {
url: '/data/c3_test.csv'
}
});
setTimeout(function () {
c3.generate({
data: {
url: '/data/c3_test.json',
mimeType: 'json'
}
});
}, 1000);

View File

@@ -0,0 +1,15 @@
var chart = c3.generate({
data: {
x: 'date',
xFormat : '%Y%m%d', // default '%Y-%m-%d'
columns: [
['date', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['sample', 30, 200, 100, 400, 150, 250]
]
},
axis : {
x : {
type : 'timeseries'
}
}
});

View File

@@ -0,0 +1,16 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
grid: {
x: {
lines: [
{value: 1, text: 'Label 1'},
{value: 3, text: 'Label 3', position: 'middle'},
{value: 4.5, text: 'Lable 4.5', position: 'start'}
]
}
}
});

View File

@@ -0,0 +1,25 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250],
['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
],
axes: {
sample2: 'y2'
}
},
axis: {
y2: {
show: true
}
},
grid: {
y: {
lines: [
{value: 50, text: 'Label 50 for y'},
{value: 1300, text: 'Label 1300 for y2', axis: 'y2', position: 'start'},
{value: 350, text: 'Label 350 for y', position: 'middle'}
]
}
}
});

View File

@@ -0,0 +1,10 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true
}
});

View File

@@ -0,0 +1,11 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 150, 250, 150, 200, 170, 240, 100, 150, 250, 150, 200, 170, 240, 30, 200, 100, 400, 150, 250, 150, 200, 170, 240, 350, 150, 100, 400, 350, 220, 250, 300, 270, 140, 150, 90, 150, 50, 120, 70, 40]
]
},
zoom: {
enabled: true,
type: 'drag',
}
});

View File

@@ -0,0 +1,35 @@
var chart = c3.generate({
data: {
columns: [
['data1', 100],
['data2', 300],
['data3', 200]
],
type: 'pie'
},
legend: {
show: false
}
});
function toggle(id) {
chart.toggle(id);
}
d3.select('.container').insert('div', '.chart').attr('class', 'legend').selectAll('span')
.data(['data1', 'data2', 'data3'])
.enter().append('span')
.attr('data-id', function (id) { return id; })
.html(function (id) { return id; })
.each(function (id) {
d3.select(this).style('background-color', chart.color(id));
})
.on('mouseover', function (id) {
chart.focus(id);
})
.on('mouseout', function (id) {
chart.revert();
})
.on('click', function (id) {
chart.toggle(id);
});

View File

@@ -0,0 +1,33 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
legend: {
position: 'right'
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 130, 150, 200, 300, 200, 100]
]
});
}, 1000);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
}, 2000);
setTimeout(function () {
chart.transform('pie');
}, 3000);
setTimeout(function () {
chart.transform('line');
}, 4000);

View File

@@ -0,0 +1,15 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 130, 220, 140, 200, 250, 450],
['data4', 250, 320, 210, 240, 215, 225],
['data5', 430, 500, 400, 280, 290, 350],
['data6', 100, 120, 310, 340, 415, 225]
]
},
color: {
pattern: ['#1f77b4', '#aec7e8', '#ff7f0e', '#ffbb78', '#2ca02c', '#98df8a', '#d62728', '#ff9896', '#9467bd', '#c5b0d5', '#8c564b', '#c49c94', '#e377c2', '#f7b6d2', '#7f7f7f', '#c7c7c7', '#bcbd22', '#dbdb8d', '#17becf', '#9edae5']
}
});

View File

@@ -0,0 +1,15 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
]
},
grid: {
x: {
show: true
},
y: {
show: true
}
}
});

View File

@@ -0,0 +1,10 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
legend: {
show: false
}
});

View File

@@ -0,0 +1,13 @@
var chart = c3.generate({
padding: {
top: 40,
right: 100,
bottom: 40,
left: 100,
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250000000000]
]
}
});

View File

@@ -0,0 +1,11 @@
var chart = c3.generate({
size: {
height: 240,
width: 480
},
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});

View File

@@ -0,0 +1,10 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
subchart: {
show: true
}
});

View File

@@ -0,0 +1,16 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30],
['data2', 50]
],
type: 'pie'
},
pie: {
label: {
format: function (value, ratio, id) {
return d3.format('$')(value);
}
}
}
});

View File

@@ -0,0 +1,11 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
point: {
show: false
}
});

View File

@@ -0,0 +1,27 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250, 400],
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
],
axes: {
data2: 'y2'
}
},
axis: {
y2: {
show: true
}
},
regions: [
{axis: 'x', end: 1, class: 'regionX'},
{axis: 'x', start: 2, end: 4, class: 'regionX'},
{axis: 'x', start: 5, class: 'regionX'},
{axis: 'y', end: 50, class: 'regionY'},
{axis: 'y', start: 80, end: 140, class: 'regionY'},
{axis: 'y', start: 400, class: 'regionY'},
{axis: 'y2', end: 900, class: 'regionY2'},
{axis: 'y2', start: 1150, end: 1250, class: 'regionY2'},
{axis: 'y2', start: 1300, class: 'regionY2'},
]
});

View File

@@ -0,0 +1,19 @@
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'
}
},
regions: [
{start: '2014-01-05', end: '2014-01-10'},
{start: new Date('2014/01/15'), end: new Date('20 Jan 2014')},
{start: 1390575600000, end: 1391007600000} // start => 2014-01-25 00:00:00, end => 2014-01-30 00:00:00
]
});

View File

@@ -0,0 +1,7 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
}
});

View File

@@ -0,0 +1,30 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 230, 190, 300, 500, 300, 400]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data3', 130, 150, 200, 300, 200, 100]
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data1'
});
}, 2000);

View File

@@ -0,0 +1,12 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
],
regions: {
'data1': [{'start':1, 'end':2, 'style':'dashed'},{'start':3}], // currently 'dashed' style only
'data2': [{'end':3}]
}
}
});

View File

@@ -0,0 +1,32 @@
var chart = c3.generate({
data: {
x: 'x',
columns: [
['x', 30, 50, 100, 230, 300, 310],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 300, 200, 300, 250, 450]
]
}
});
setTimeout(function () {
chart.load({
columns: [
['data1', 100, 250, 150, 200, 100, 350]
]
});
}, 1000);
setTimeout(function () {
chart.load({
columns: [
['data3', 80, 150, 100, 180, 80, 150]
]
});
}, 1500);
setTimeout(function () {
chart.unload({
ids: 'data2'
});
}, 2000);

View File

@@ -0,0 +1,14 @@
var chart = c3.generate({
data: {
xs: {
'data1': 'x1',
'data2': 'x2',
},
columns: [
['x1', 10, 30, 45, 50, 70, 100],
['x2', 30, 50, 75, 100, 120],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 20, 180, 240, 100, 190]
]
}
});

View File

@@ -0,0 +1,15 @@
var chart = c3.generate({
data: {
columns: [
['data1', 100, 200, 1000, 900, 500]
]
},
grid: {
x: {
lines: [{value: 2}, {value: 4, class: 'grid4', text: 'LABEL 4'}]
},
y: {
lines: [{value: 500}, {value: 800, class: 'grid800', text: 'LABEL 800'}]
}
}
});

View File

@@ -0,0 +1,11 @@
var chart = c3.generate({
data: {
columns: [
['sample', 30, 200, 100, 400, 150, 250]
]
},
regions: [
{start:0, end:1},
{start:2, end:4, class:'foo'}
]
});

View File

@@ -0,0 +1,28 @@
var chart = c3.generate({
data: {
x: 'x',
// xFormat: '%Y%m%d', // 'xFormat' can be used as custom format of 'x'
columns: [
['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-04', '2013-01-05', '2013-01-06'],
// ['x', '20130101', '20130102', '20130103', '20130104', '20130105', '20130106'],
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 340, 200, 500, 250, 350]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: '%Y-%m-%d'
}
}
}
});
setTimeout(function () {
chart.load({
columns: [
['data3', 400, 500, 450, 700, 600, 500]
]
});
}, 1000);

View File

@@ -0,0 +1,34 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30000, 20000, 10000, 40000, 15000, 250000],
['data2', 100, 200, 100, 40, 150, 250]
],
axes: {
data2: 'y2'
}
},
axis : {
y : {
tick: {
format: d3.format("s")
}
},
y2: {
show: true,
tick: {
format: d3.format("$")
}
}
},
tooltip: {
format: {
title: function (d) { return 'Data ' + d; },
value: function (value, ratio, id) {
var format = id === 'data1' ? d3.format(',') : d3.format('$');
return format(value);
}
// value: d3.format(',') // apply this format to both y and y2
}
}
});

View File

@@ -0,0 +1,12 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25],
['data3', 500, 320, 210, 340, 215, 125]
]
},
tooltip: {
grouped: false // Default true
}
});

View File

@@ -0,0 +1,11 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
tooltip: {
horizontal: true
}
});

View File

@@ -0,0 +1,11 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
},
tooltip: {
show: false
}
});

View File

@@ -0,0 +1,25 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
}
});
setTimeout(function () {
chart.transform('area', 'data1');
}, 1000);
setTimeout(function () {
chart.transform('area', 'data2');
}, 2000);
setTimeout(function () {
chart.transform('bar');
}, 3000);
setTimeout(function () {
chart.transform('area');
}, 4000);

View File

@@ -0,0 +1,25 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
}
});
setTimeout(function () {
chart.transform('area-spline', 'data1');
}, 1000);
setTimeout(function () {
chart.transform('area-spline', 'data2');
}, 2000);
setTimeout(function () {
chart.transform('bar');
}, 3000);
setTimeout(function () {
chart.transform('area-spline');
}, 4000);

View File

@@ -0,0 +1,25 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'line'
}
});
setTimeout(function () {
chart.transform('bar', 'data1');
}, 1000);
setTimeout(function () {
chart.transform('bar', 'data2');
}, 2000);
setTimeout(function () {
chart.transform('line');
}, 3000);
setTimeout(function () {
chart.transform('bar');
}, 4000);

View File

@@ -0,0 +1,24 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
]
}
});
setTimeout(function () {
chart.transform('donut');
}, 1000);
setTimeout(function () {
chart.transform('line');
}, 2000);
setTimeout(function () {
chart.transform('pie');
}, 3000);
setTimeout(function () {
chart.transform('donut');
}, 4000);

View File

@@ -0,0 +1,25 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
}
});
setTimeout(function () {
chart.transform('line', 'data1');
}, 1000);
setTimeout(function () {
chart.transform('line', 'data2');
}, 2000);
setTimeout(function () {
chart.transform('bar');
}, 3000);
setTimeout(function () {
chart.transform('line');
}, 4000);

View File

@@ -0,0 +1,20 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
]
}
});
setTimeout(function () {
chart.transform('pie');
}, 1000);
setTimeout(function () {
chart.transform('line');
}, 2000);
setTimeout(function () {
chart.transform('pie');
}, 3000);

View File

@@ -0,0 +1,39 @@
var chart = c3.generate({
data: {
xs: {
setosa: 'setosa_x',
versicolor: 'versicolor_x',
},
// iris data from R
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],
["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],
],
type: 'pie'
},
axis: {
x: {
label: 'Sepal.Width',
tick: {
fit: false
}
},
y: {
label: 'Petal.Width'
}
}
});
setTimeout(function () {
chart.transform('scatter');
}, 1000);
setTimeout(function () {
chart.transform('pie');
}, 2000);
setTimeout(function () {
chart.transform('scatter');
}, 3000)

View File

@@ -0,0 +1,25 @@
var chart = c3.generate({
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 130, 100, 140, 200, 150, 50]
],
type: 'bar'
}
});
setTimeout(function () {
chart.transform('spline', 'data1');
}, 1000);
setTimeout(function () {
chart.transform('spline', 'data2');
}, 2000);
setTimeout(function () {
chart.transform('bar');
}, 3000);
setTimeout(function () {
chart.transform('spline');
}, 4000);

View File

@@ -0,0 +1,46 @@
var chart = c3.generate({
data: {
url: '/data/c3_test.csv'
},
transition: {
duration: 100
}
});
setTimeout(function () {
chart.load({
url: '/data/c3_test2.csv'
});
}, 500);
setTimeout(function () {
chart.load({
columns: [
['data1', 30, 20, 50, 40, 60, 50],
['data2', 200, 130, 90, 240, 130, 220],
['data3', 300, 200, 160, 400, 250, 250]
]
});
}, 1000);
setTimeout(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],
]
});
}, 1500);
setTimeout(function () {
chart.load({
columns:[
['data1', null, 30, 20, 50, 40, 60, 50, 100, 200]
]
});
}, 2000);

Some files were not shown because too many files have changed in this diff Show More