stacked-bar.js 2.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970
  1. /*=========================================================================================
  2. File Name: stacked-bar.js
  3. Description: Flot stacked bar chart
  4. ----------------------------------------------------------------------------------------
  5. Item Name: Robust - Responsive Admin Theme
  6. Version: 1.2
  7. Author: PIXINVENT
  8. Author URL: http://www.themeforest.net/user/pixinvent
  9. ==========================================================================================*/
  10. // Stacked bar chart
  11. // ------------------------------
  12. $(window).on("load", function(){
  13. var d1 = [];
  14. for (var i = 0; i <= 10; i += 1) {
  15. d1.push([i, parseInt(Math.random() * 30)]);
  16. }
  17. var d2 = [];
  18. for (var i = 0; i <= 10; i += 1) {
  19. d2.push([i, parseInt(Math.random() * 30)]);
  20. }
  21. var d3 = [];
  22. for (var i = 0; i <= 10; i += 1) {
  23. d3.push([i, parseInt(Math.random() * 30)]);
  24. }
  25. var stack = 0,
  26. bars = true,
  27. lines = false,
  28. steps = false;
  29. function plotWithOptions() {
  30. $.plot("#stacked-bar", [ d1, d2, d3 ], {
  31. series: {
  32. stack: stack,
  33. lines: {
  34. show: lines,
  35. fill: true,
  36. steps: steps,
  37. lineWidth: 0,
  38. },
  39. bars: {
  40. show: bars,
  41. barWidth: 0.6,
  42. lineWidth: 0,
  43. fill: 1
  44. }
  45. },
  46. grid: {
  47. borderWidth: 1,
  48. borderColor: "#e9e9e9",
  49. color: '#999',
  50. minBorderMargin: 20,
  51. labelMargin: 10,
  52. margin: {
  53. top: 8,
  54. bottom: 20,
  55. left: 20
  56. },
  57. },
  58. // colors: ['#00BCD4', '#3F51B5', '#009688']
  59. colors: ['#FFE57F', '#FFD740', '#FFC400']
  60. });
  61. }
  62. plotWithOptions();
  63. });