c3-line.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147
  1. //[c3 charts Javascript]
  2. //Project: Riday Admin - Responsive Admin Template
  3. //Primary use: Used only for the morris charts
  4. $(function () {
  5. "use strict";
  6. var t = c3.generate({
  7. bindto: "#line-chart",
  8. size: { height: 350 },
  9. point: { r: 4 },
  10. color: { pattern: ["#0bb2d4", "#17b3a3"] },
  11. data: {
  12. columns: [
  13. ['data1', 30, 200, 100, 400, 150, 250],
  14. ['data2', 50, 20, 10, 40, 15, 25]
  15. ]
  16. },
  17. grid: { y: { show: !0, stroke: "#faa700" } }
  18. });
  19. setTimeout(function() {
  20. t.load({
  21. columns: [
  22. ['data1', 230, 190, 300, 500, 300, 400]
  23. ]
  24. })
  25. }, 1e3), setTimeout(function() {
  26. t.load({
  27. columns: [
  28. ['data3', 130, 150, 200, 300, 200, 100]
  29. ]
  30. })
  31. }, 1500), setTimeout(function() { t.unload({ ids: "data1" }) }, 2e3)
  32. var a = c3.generate({
  33. bindto: "#area-chart",
  34. size: { height: 350 },
  35. point: { r: 4 },
  36. color: { pattern: ["#3e8ef7", "#ff4c52"] },
  37. data: {
  38. columns: [
  39. ['data1', 300, 350, 300, 0, 0, 0],
  40. ['data2', 130, 100, 140, 200, 150, 50]
  41. ],
  42. types: { data1: "area", data2: "area-spline" }
  43. },
  44. grid: { y: { show: !0 } }
  45. });
  46. var n = c3.generate({
  47. bindto: "#spline-chart",
  48. size: { height: 350 },
  49. point: { r: 4 },
  50. color: { pattern: ["#17b3a3", "#3e8ef7"] },
  51. data: {
  52. columns: [
  53. ['data1', 30, 200, 100, 400, 150, 250],
  54. ['data2', 130, 100, 140, 200, 150, 50]
  55. ],
  56. type: "spline"
  57. },
  58. grid: { y: { show: !0 } }
  59. });
  60. // Callback that creates and populates a data table, instantiates the line region chart, passes in the data and draws it.
  61. var lineRegionChart = c3.generate({
  62. bindto: '#line-region',
  63. size: { height: 350 },
  64. point: {
  65. r: 4
  66. },
  67. color: {
  68. pattern: ['#0bb2d4', '#3e8ef7']
  69. },
  70. // Create the data table.
  71. data: {
  72. columns: [
  73. ['data1', 30, 200, 100, 400, 150, 250],
  74. ['data2', 50, 20, 10, 40, 15, 25]
  75. ],
  76. regions: {
  77. 'data1': [{ 'start': 1, 'end': 2, 'style': 'dashed' }, { 'start': 3 }], // currently 'dashed' style only
  78. 'data2': [{ 'end': 3 }]
  79. }
  80. },
  81. grid: {
  82. y: {
  83. show: true
  84. }
  85. }
  86. });
  87. var o = c3.generate({
  88. bindto: "#simple-xy",
  89. size: { height: 350 },
  90. point: { r: 4 },
  91. color: { pattern: ["#0bb2d4", "#17b3a3"] },
  92. data: {
  93. x: "x",
  94. columns: [
  95. ['x', 30, 50, 100, 230, 300, 310],
  96. ['data1', 30, 200, 100, 400, 150, 250],
  97. ['data2', 130, 300, 200, 300, 250, 450]
  98. ]
  99. },
  100. grid: { y: { show: !0 } }
  101. });
  102. setTimeout(function() {
  103. o.load({
  104. columns: [
  105. ['data1', 100, 250, 150, 200, 100, 350]
  106. ]
  107. })
  108. }, 1e3), setTimeout(function() {
  109. o.load({
  110. columns: [
  111. ['data3', 80, 150, 100, 180, 80, 150]
  112. ]
  113. })
  114. }, 1500), setTimeout(function() { o.unload({ ids: "data2" }) }, 2e3)
  115. });