/* ------------------------------------------------------------------------------
*
* # 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();
});
});