data_stringx.js 1.5 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. var chart = c3.generate({
  2. data: {
  3. x : 'x',
  4. columns: [
  5. ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
  6. ['download', 30, 200, 100, 400],
  7. ['loading', 90, 100, 140, 200],
  8. ],
  9. groups: [
  10. ['download', 'loading']
  11. ],
  12. type: 'bar'
  13. },
  14. axis: {
  15. x: {
  16. type: 'category' // this needed to load string x value
  17. }
  18. }
  19. });
  20. setTimeout(function () {
  21. chart.load({
  22. columns: [
  23. ['x', 'www.siteA.com', 'www.siteB.com', 'www.siteC.com', 'www.siteD.com'],
  24. ['download', 130, 200, 150, 350],
  25. ['loading', 190, 180, 190, 140],
  26. ],
  27. });
  28. }, 1000);
  29. setTimeout(function () {
  30. chart.load({
  31. columns: [
  32. ['x', 'www.siteE.com', 'www.siteF.com', 'www.siteG.com'],
  33. ['download', 30, 300, 200],
  34. ['loading', 90, 130, 240],
  35. ],
  36. });
  37. }, 2000);
  38. setTimeout(function () {
  39. chart.load({
  40. columns: [
  41. ['x', 'www.site1.com', 'www.site2.com', 'www.site3.com', 'www.site4.com'],
  42. ['download', 130, 300, 200, 470],
  43. ['loading', 190, 130, 240, 340],
  44. ],
  45. });
  46. }, 3000);
  47. setTimeout(function () {
  48. chart.load({
  49. columns: [
  50. ['download', 30, 30, 20, 170],
  51. ['loading', 90, 30, 40, 40],
  52. ],
  53. });
  54. }, 4000);
  55. setTimeout(function () {
  56. chart.load({
  57. url: '/data/c3_string_x.csv'
  58. });
  59. }, 5000);