data_load.js 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100
  1. var chart = c3.generate({
  2. data: {
  3. url: '/data/c3_test.csv',
  4. type: 'line'
  5. }
  6. });
  7. setTimeout(function () {
  8. chart.load({
  9. url: '/data/c3_test2.csv'
  10. });
  11. }, 1000);
  12. setTimeout(function () {
  13. chart.load({
  14. columns: [
  15. ['data1', 130, 120, 150, 140, 160, 150],
  16. ['data4', 30, 20, 50, 40, 60, 50],
  17. ],
  18. unload: ['data2', 'data3'],
  19. });
  20. }, 2000);
  21. setTimeout(function () {
  22. chart.load({
  23. rows: [
  24. ['data2', 'data3'],
  25. [120, 300],
  26. [160, 240],
  27. [200, 290],
  28. [160, 230],
  29. [130, 300],
  30. [220, 320],
  31. ],
  32. unload: 'data4',
  33. });
  34. }, 3000);
  35. setTimeout(function () {
  36. chart.load({
  37. columns:[
  38. ['data4', 30, 20, 50, 40, 60, 50,100,200]
  39. ],
  40. type: 'bar'
  41. });
  42. }, 4000);
  43. setTimeout(function () {
  44. chart.unload({
  45. ids: 'data4'
  46. });
  47. }, 5000);
  48. setTimeout(function () {
  49. chart.load({
  50. columns:[
  51. ['data2', null, 30, 20, 50, 40, 60, 50]
  52. ]
  53. });
  54. }, 6000);
  55. setTimeout(function () {
  56. chart.unload();
  57. }, 7000);
  58. setTimeout(function () {
  59. chart.load({
  60. rows: [
  61. ['data4', 'data2', 'data3'],
  62. [90, 120, 300],
  63. [40, 160, 240],
  64. [50, 200, 290],
  65. [120, 160, 230],
  66. [80, 130, 300],
  67. [90, 220, 320],
  68. ],
  69. type: 'bar'
  70. });
  71. }, 8000);
  72. setTimeout(function () {
  73. chart.load({
  74. rows: [
  75. ['data5', 'data6'],
  76. [190, 420],
  77. [140, 460],
  78. [150, 500],
  79. [220, 460],
  80. [180, 430],
  81. [190, 520],
  82. ],
  83. type: 'line'
  84. });
  85. }, 9000);
  86. setTimeout(function () {
  87. chart.unload({
  88. ids: ['data2', 'data3']
  89. });
  90. }, 10000);