c3-stacked-column.js 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. /**********************************/
  2. // Stacked Column Chart //
  3. /**********************************/
  4. $(window).on("load", function() {
  5. // Callback that creates and populates a data table, instantiates the stacked column chart, passes in the data and draws it.
  6. var stackedColumnChart = c3.generate({
  7. bindto: '#stacked-column',
  8. size: { height: 400 },
  9. color: {
  10. pattern: ['#2962FF', '#ced4da', '#4fc3f7', '#f62d51']
  11. },
  12. // Create the data table.
  13. data: {
  14. columns: [
  15. ['option1', -130, 200, 200, 400, 400, 250],
  16. ['option2', 100, 50, -100, 200, -150, 150],
  17. ['option3', -85, 200, 200, -300, 250, 250]
  18. ],
  19. type: 'bar',
  20. groups: [
  21. ['option1', 'option2']
  22. ]
  23. },
  24. grid: {
  25. y: {
  26. show: true
  27. }
  28. },
  29. });
  30. // Instantiate and draw our chart, passing in some options.
  31. setTimeout(function() {
  32. stackedColumnChart.groups([
  33. ['option1', 'option2', 'option3']
  34. ]);
  35. }, 1000);
  36. setTimeout(function() {
  37. stackedColumnChart.load({
  38. columns: [
  39. ['option4', 50, -150, 150, 200, -300, -100]
  40. ]
  41. });
  42. }, 1500);
  43. setTimeout(function() {
  44. stackedColumnChart.groups([
  45. ['option1', 'option2', 'option3', 'option4']
  46. ]);
  47. }, 2000);
  48. // Resize chart on sidebar width change
  49. $(".sidebartoggler").on('click', function() {
  50. stackedColumnChart.resize();
  51. });
  52. });