first commit
This commit is contained in:
dev-chiefworks
@@ -0,0 +1,201 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # C3.js - advanced examples
|
||||
*
|
||||
* Demo setup of chart transformations, zoom, pan and brushing features
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
|
||||
// Chart transforms
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var transform = c3.generate({
|
||||
bindto: '#c3-transform',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Update data
|
||||
function update() {
|
||||
transform.transform('donut');
|
||||
setTimeout(function () {
|
||||
transform.transform('area');
|
||||
}, 1500);
|
||||
setTimeout(function () {
|
||||
transform.transform('bar', 'data1');
|
||||
}, 3000);
|
||||
setTimeout(function () {
|
||||
transform.transform('scatter');
|
||||
}, 4500);
|
||||
setTimeout(function () {
|
||||
transform.transform('bar');
|
||||
}, 6000);
|
||||
setTimeout(function () {
|
||||
transform.transform('step');
|
||||
}, 7500);
|
||||
setTimeout(function () {
|
||||
transform.transform('line');
|
||||
$('#btn-transform').removeClass('disabled');
|
||||
}, 11500);
|
||||
}
|
||||
|
||||
// Run update on click
|
||||
$('#btn-transform').click(function () {
|
||||
$(this).addClass('disabled');
|
||||
update();
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Zoomable chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var zoomable_chart = c3.generate({
|
||||
bindto: '#c3-chart-zoomable',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['sample', 30, 120, 320, 180, 50, 250, 167, 279, 290, 400, 214, 190, 40, 400, 162, 289, 300, 200, 120, 320, 390, 110, 130, 400, 240, 189, 250, 30, 100, 200, 300, 250, 50, 100, 50, 300, 250, 20, 90, 150, 400, 320, 220, 150, 190, 270, 190, 350, 90, 300, 150, 220, 170, 40]
|
||||
]
|
||||
},
|
||||
color: {
|
||||
pattern: ['#1E88E5']
|
||||
},
|
||||
zoom: {
|
||||
enabled: true
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
show: true
|
||||
},
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Subchart (brushing)
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var subchart = c3.generate({
|
||||
bindto: '#c3-subchart',
|
||||
size: { height: 400 },
|
||||
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]
|
||||
]
|
||||
},
|
||||
color: {
|
||||
pattern: ['#00ACC1']
|
||||
},
|
||||
subchart: {
|
||||
show: true
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Label format
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var label_format = c3.generate({
|
||||
bindto: '#c3-label-format',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, -200, -100, 400, 150, 250, 100, 120, 150],
|
||||
['data2', -50, 150, 150, -150, -50, -150, -120, -100, -120],
|
||||
['data3', -100, 100, -40, 100, -150, -50, 90, -40, 100]
|
||||
],
|
||||
groups: [
|
||||
['data1', 'data2']
|
||||
],
|
||||
type: 'bar',
|
||||
labels: {
|
||||
format: {
|
||||
y: d3.format('$')
|
||||
}
|
||||
}
|
||||
},
|
||||
color: {
|
||||
pattern: ['#4CAF50', '#F4511E', '#1E88E5']
|
||||
},
|
||||
bar: {
|
||||
width: {
|
||||
ratio: 1
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
lines: [{value: 0}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Data colors
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var data_color = c3.generate({
|
||||
bindto: '#c3-data-color',
|
||||
size: { height: 400 },
|
||||
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: '#4DB6AC',
|
||||
data2: '#009688',
|
||||
data3: '#00796B'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Resize chart on sidebar width change
|
||||
$(".sidebar-control").on('click', function() {
|
||||
transform.resize();
|
||||
zoomable_chart.resize();
|
||||
subchart.resize();
|
||||
label_format.resize();
|
||||
data_color.resize();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,187 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # C3.js - chart axis
|
||||
*
|
||||
* Demo setup of chart axis with options
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
|
||||
// Categorized axis
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var axis_categorized = c3.generate({
|
||||
bindto: '#c3-axis-categorized',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
|
||||
]
|
||||
},
|
||||
color: {
|
||||
pattern: ['#03A9F4']
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
categories: ['cat1', 'cat2', 'cat3', 'cat4', 'cat5', 'cat6', 'cat7', 'cat8', 'cat9']
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Additional axis
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var axis_additional = c3.generate({
|
||||
bindto: '#c3-axis-additional',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 50, 20, 10, 40, 15, 25]
|
||||
],
|
||||
axes: {
|
||||
data1: 'y',
|
||||
data2: 'y2'
|
||||
}
|
||||
},
|
||||
color: {
|
||||
pattern: ['#4CAF50', '#607D8B']
|
||||
},
|
||||
axis: {
|
||||
y2: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Axis tick culling
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var axis_tick_culling = c3.generate({
|
||||
bindto: '#c3-axis-tick-culling',
|
||||
size: { height: 400 },
|
||||
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]
|
||||
]
|
||||
},
|
||||
color: {
|
||||
pattern: ['#FF5722']
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
tick: {
|
||||
culling: {
|
||||
max: 4
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Text label rotation
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var axis_tick_rotation = c3.generate({
|
||||
bindto: '#c3-axis-tick-rotation',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
x : 'x',
|
||||
columns: [
|
||||
['x', 'January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
['pv', 90, 100, 140, 200, 100, 400, 90, 100, 140, 200, 100, 400],
|
||||
],
|
||||
type: 'bar'
|
||||
},
|
||||
color: {
|
||||
pattern: ['#00BCD4']
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
type: 'category',
|
||||
tick: {
|
||||
rotate: -90
|
||||
},
|
||||
height: 80
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Axis labels
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var axis_labels = c3.generate({
|
||||
bindto: '#c3-axis-labels',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['sample', 30, 200, 100, 400, 150, 250],
|
||||
['sample2', 130, 300, 200, 500, 250, 350]
|
||||
],
|
||||
axes: {
|
||||
sample2: 'y2'
|
||||
}
|
||||
},
|
||||
color: {
|
||||
pattern: ['#9C27B0']
|
||||
},
|
||||
axis: {
|
||||
x: {
|
||||
label: 'X Label'
|
||||
},
|
||||
y: {
|
||||
label: 'Y Label'
|
||||
},
|
||||
y2: {
|
||||
show: true,
|
||||
label: 'Y2 Label'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Resize chart on sidebar width change
|
||||
$(".sidebar-control").on('click', function() {
|
||||
axis_categorized.resize();
|
||||
axis_additional.resize();
|
||||
axis_tick_culling.resize();
|
||||
axis_tick_rotation.resize();
|
||||
axis_labels.resize();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,295 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # C3.js - bars and pies
|
||||
*
|
||||
* Demo setup of bars, pies and chart combinations
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
|
||||
// Pie chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var pie_chart = c3.generate({
|
||||
bindto: '#c3-pie-chart',
|
||||
size: { width: 350 },
|
||||
color: {
|
||||
pattern: ['#3F51B5', '#FF9800', '#4CAF50', '#00BCD4', '#F44336']
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30],
|
||||
['data2', 120],
|
||||
],
|
||||
type : 'pie'
|
||||
}
|
||||
});
|
||||
|
||||
// Change data
|
||||
setTimeout(function () {
|
||||
pie_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],
|
||||
]
|
||||
});
|
||||
}, 4000);
|
||||
setTimeout(function () {
|
||||
pie_chart.unload({
|
||||
ids: 'data1'
|
||||
});
|
||||
pie_chart.unload({
|
||||
ids: 'data2'
|
||||
});
|
||||
}, 8000);
|
||||
|
||||
|
||||
|
||||
// Donut chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var donut_chart = c3.generate({
|
||||
bindto: '#c3-donut-chart',
|
||||
size: { width: 350 },
|
||||
color: {
|
||||
pattern: ['#3F51B5', '#FF9800', '#4CAF50', '#00BCD4', '#F44336']
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30],
|
||||
['data2', 120],
|
||||
],
|
||||
type : 'donut'
|
||||
},
|
||||
donut: {
|
||||
title: "Iris Petal Width"
|
||||
}
|
||||
});
|
||||
|
||||
// Change data
|
||||
setTimeout(function () {
|
||||
donut_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],
|
||||
]
|
||||
});
|
||||
}, 4000);
|
||||
setTimeout(function () {
|
||||
donut_chart.unload({
|
||||
ids: 'data1'
|
||||
});
|
||||
donut_chart.unload({
|
||||
ids: 'data2'
|
||||
});
|
||||
}, 8000);
|
||||
|
||||
|
||||
|
||||
// Bar chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var bar_chart = c3.generate({
|
||||
bindto: '#c3-bar-chart',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
type: 'bar'
|
||||
},
|
||||
color: {
|
||||
pattern: ['#2196F3', '#FF9800', '#4CAF50']
|
||||
},
|
||||
bar: {
|
||||
width: {
|
||||
ratio: 0.5
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Change data
|
||||
setTimeout(function () {
|
||||
bar_chart.load({
|
||||
columns: [
|
||||
['data3', 130, -150, 200, 300, -200, 100]
|
||||
]
|
||||
});
|
||||
}, 6000);
|
||||
|
||||
|
||||
|
||||
// Stacked bar chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var bar_stacked_chart = c3.generate({
|
||||
bindto: '#c3-bar-stacked-chart',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#FF9800', '#F44336', '#009688', '#4CAF50']
|
||||
},
|
||||
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: {
|
||||
x: {
|
||||
show: true
|
||||
},
|
||||
y: {
|
||||
lines: [{value:0}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Change data
|
||||
setTimeout(function () {
|
||||
bar_stacked_chart.groups([['data1', 'data2', 'data3']])
|
||||
}, 4000);
|
||||
setTimeout(function () {
|
||||
bar_stacked_chart.load({
|
||||
columns: [['data4', 100, -50, 150, 200, -300, -100]]
|
||||
});
|
||||
}, 8000);
|
||||
setTimeout(function () {
|
||||
bar_stacked_chart.groups([['data1', 'data2', 'data3', 'data4']])
|
||||
}, 10000);
|
||||
|
||||
|
||||
|
||||
// Combined chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var combined_chart = c3.generate({
|
||||
bindto: '#c3-combined-chart',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#FF9800', '#F44336', '#009688', '#4CAF50', '#03A9F4', '#8BC34A']
|
||||
},
|
||||
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']
|
||||
]
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Scatter chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var scatter_chart = c3.generate({
|
||||
size: { height: 400 },
|
||||
bindto: '#c3-scatter-chart',
|
||||
data: {
|
||||
xs: {
|
||||
setosa: 'setosa_x',
|
||||
versicolor: 'versicolor_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],
|
||||
["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'
|
||||
},
|
||||
color: {
|
||||
pattern: ['#4CAF50', '#F44336']
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
point: { r: 5 },
|
||||
axis: {
|
||||
x: {
|
||||
label: 'Sepal.Width',
|
||||
tick: {
|
||||
fit: false
|
||||
}
|
||||
},
|
||||
y: {
|
||||
label: 'Petal.Width'
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Change data
|
||||
setTimeout(function () {
|
||||
scatter_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],
|
||||
]
|
||||
});
|
||||
}, 4000);
|
||||
setTimeout(function () {
|
||||
scatter_chart.unload({
|
||||
ids: 'setosa'
|
||||
});
|
||||
}, 8000);
|
||||
setTimeout(function () {
|
||||
scatter_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],
|
||||
]
|
||||
});
|
||||
}, 10000);
|
||||
|
||||
|
||||
|
||||
// Resize chart on sidebar width change
|
||||
$(".sidebar-control").on('click', function() {
|
||||
pie_chart.resize();
|
||||
donut_chart.resize();
|
||||
bar_chart.resize();
|
||||
bar_stacked_chart.resize();
|
||||
combined_chart.resize();
|
||||
scatter_chart.resize();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,170 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # C3.js - chart grid
|
||||
*
|
||||
* Demo setup of chart grid with options
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
|
||||
// Grid lines
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var grid_lines = c3.generate({
|
||||
bindto: '#c3-grid-lines',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#2196F3']
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['sample', 30, 200, 100, 400, 150, 250, 120, 200]
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
show: true
|
||||
},
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Optional X grid lines
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var grid_lines_x = c3.generate({
|
||||
bindto: '#c3-grid-lines-x',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#4CAF50']
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['sample', 30, 200, 100, 400, 150, 250]
|
||||
]
|
||||
},
|
||||
grid: {
|
||||
x: {
|
||||
lines: [{value: 3, text: 'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Optional Y grid lines
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var grid_lines_y = c3.generate({
|
||||
bindto: '#c3-grid-lines-y',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['sample', 30, 200, 100, 400, 150, 250],
|
||||
['sample2', 1300, 1200, 1100, 1400, 1500, 1250],
|
||||
],
|
||||
axes: {
|
||||
sample2: 'y2'
|
||||
}
|
||||
},
|
||||
color: {
|
||||
pattern: ['#607D8B', '#FF9800']
|
||||
},
|
||||
axis: {
|
||||
y2: {
|
||||
show: true
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
lines: [{value: 50, text: 'Label 50'}, {value: 1300, text: 'Label 1300', axis: 'y2'}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Rects on chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var grid_region = c3.generate({
|
||||
bindto: '#c3-grid-region',
|
||||
size: { height: 400 },
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250, 400],
|
||||
['data2', 830, 1200, 1100, 1400, 1150, 1250, 1500],
|
||||
],
|
||||
axes: {
|
||||
data2: 'y2'
|
||||
}
|
||||
},
|
||||
color: {
|
||||
pattern: ['#607D8B', '#FF9800']
|
||||
},
|
||||
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'},
|
||||
]
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Data regions
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var grid_region_chart = c3.generate({
|
||||
bindto: '#c3-grid-chart-region',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#009688', '#9C27B0']
|
||||
},
|
||||
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}]
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Resize chart on sidebar width change
|
||||
$(".sidebar-control").on('click', function() {
|
||||
grid_lines.resize();
|
||||
grid_lines_x.resize();
|
||||
grid_lines_y.resize();
|
||||
grid_region.resize();
|
||||
grid_region_chart.resize();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,198 @@
|
||||
/* ------------------------------------------------------------------------------
|
||||
*
|
||||
* # C3.js - lines and areas
|
||||
*
|
||||
* Demo setup of line, step and area charts
|
||||
*
|
||||
* Version: 1.0
|
||||
* Latest update: August 1, 2015
|
||||
*
|
||||
* ---------------------------------------------------------------------------- */
|
||||
|
||||
$(function () {
|
||||
|
||||
|
||||
// Line chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var line_chart = c3.generate({
|
||||
bindto: '#c3-line-chart',
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#4CAF50', '#F4511E', '#1E88E5']
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 30, 200, 100, 400, 150, 250],
|
||||
['data2', 50, 20, 10, 40, 15, 25]
|
||||
],
|
||||
type: 'spline'
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Change data
|
||||
setTimeout(function () {
|
||||
line_chart.load({
|
||||
columns: [
|
||||
['data1', 230, 190, 300, 500, 300, 400]
|
||||
]
|
||||
});
|
||||
}, 3000);
|
||||
setTimeout(function () {
|
||||
line_chart.load({
|
||||
columns: [
|
||||
['data3', 130, 150, 200, 300, 200, 100]
|
||||
]
|
||||
});
|
||||
}, 6000);
|
||||
setTimeout(function () {
|
||||
line_chart.unload({
|
||||
ids: 'data1'
|
||||
});
|
||||
}, 9000);
|
||||
|
||||
|
||||
|
||||
// Line chart with regions
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var chart_line_regions = c3.generate({
|
||||
bindto: '#c3-line-regions-chart',
|
||||
size: { height: 400 },
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
color: {
|
||||
pattern: ['#E53935', '#5E35B1']
|
||||
},
|
||||
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}],
|
||||
'data2': [{'end':3}]
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Area chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var area_chart = c3.generate({
|
||||
bindto: '#c3-area-chart',
|
||||
size: { height: 400 },
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
color: {
|
||||
pattern: ['#E53935', '#3949AB']
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 300, 350, 300, 0, 0, 0],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
types: {
|
||||
data1: 'area-spline',
|
||||
data2: 'area-spline'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Stacked area chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var area_stacked_chart = c3.generate({
|
||||
bindto: '#c3-area-stacked-chart',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#1E88E5', '#F4511E']
|
||||
},
|
||||
point: {
|
||||
r: 4
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 300, 350, 300, 0, 0, 120],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
types: {
|
||||
data1: 'area-spline',
|
||||
data2: 'area-spline'
|
||||
},
|
||||
groups: [['data1', 'data2']]
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
|
||||
// Step chart
|
||||
// ------------------------------
|
||||
|
||||
// Generate chart
|
||||
var step_chart = c3.generate({
|
||||
bindto: '#c3-step-chart',
|
||||
size: { height: 400 },
|
||||
color: {
|
||||
pattern: ['#6D4C41', '#039BE5']
|
||||
},
|
||||
data: {
|
||||
columns: [
|
||||
['data1', 300, 350, 300, 0, 0, 100],
|
||||
['data2', 130, 100, 140, 200, 150, 50]
|
||||
],
|
||||
types: {
|
||||
data1: 'step',
|
||||
data2: 'area-step'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
y: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
// Resize chart on sidebar width change
|
||||
$(".sidebar-control").on('click', function() {
|
||||
line_chart.resize();
|
||||
chart_line_regions.resize();
|
||||
area_chart.resize();
|
||||
area_stacked_chart.resize();
|
||||
step_chart.resize();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user