You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.3 KiB
50 lines
1.3 KiB
1 year ago
|
/**********************************/
|
||
|
|
// Stacked Column Chart //
|
||
|
|
/**********************************/
|
||
|
|
$(window).on("load", function () {
|
||
|
|
// Callback that creates and populates a data table, instantiates the stacked column chart, passes in the data and draws it.
|
||
|
|
var stackedColumnChart = c3.generate({
|
||
|
|
bindto: "#stacked-column",
|
||
|
|
size: { height: 400 },
|
||
|
|
color: {
|
||
|
|
pattern: ["#1e88e5", "#ced4da", "#26c6da", "#f62d51"],
|
||
|
|
},
|
||
|
|
|
||
|
|
// Create the data table.
|
||
|
|
data: {
|
||
|
|
columns: [
|
||
|
|
["option1", -130, 200, 200, 400, 400, 250],
|
||
|
|
["option2", 100, 50, -100, 200, -150, 150],
|
||
|
|
["option3", -85, 200, 200, -300, 250, 250],
|
||
|
|
],
|
||
|
|
type: "bar",
|
||
|
|
groups: [["option1", "option2"]],
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
y: {
|
||
|
|
show: true,
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// Instantiate and draw our chart, passing in some options.
|
||
|
|
setTimeout(function () {
|
||
|
|
stackedColumnChart.groups([["option1", "option2", "option3"]]);
|
||
|
|
}, 1000);
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
stackedColumnChart.load({
|
||
|
|
columns: [["option4", 50, -150, 150, 200, -300, -100]],
|
||
|
|
});
|
||
|
|
}, 1500);
|
||
|
|
|
||
|
|
setTimeout(function () {
|
||
|
|
stackedColumnChart.groups([["option1", "option2", "option3", "option4"]]);
|
||
|
|
}, 2000);
|
||
|
|
|
||
|
|
// Resize chart on sidebar width change
|
||
|
|
$(".sidebartoggler").on("click", function () {
|
||
|
|
stackedColumnChart.resize();
|
||
|
|
});
|
||
|
|
});
|