custom_x_categorized.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="../css/c3.css">
  4. </head>
  5. <body>
  6. <div id="chart"></div>
  7. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  8. <script src="../js/c3.js"></script>
  9. <script>
  10. var chart = c3.generate({
  11. bindto: '#chart',
  12. data: {
  13. x : 'x',
  14. columns: [
  15. ['x', 'www.google.com', 'www.amazon.com', 'www.facebook.com', 'www.apple.com'],
  16. ['download', 30, 200, 100, 400],
  17. ['loading', 90, 100, 140, 200],
  18. ],
  19. groups: [
  20. ['download', 'loading']
  21. ],
  22. type: 'bar'
  23. },
  24. axis: {
  25. x: {
  26. type: 'categorized',
  27. label: 'X Label'
  28. },
  29. y: {
  30. label: {
  31. text: 'Y Label',
  32. position: 'outer-middle'
  33. }
  34. }
  35. }
  36. });
  37. setTimeout(function () {
  38. chart.load({
  39. columns: [
  40. ['x', 'www.yahoo.com', 'www.rakuten.com', 'www.mixi.com', 'www.sony.com'],
  41. ['download', 130, 300, 200, 470],
  42. ['loading', 190, 130, 240, 340],
  43. ],
  44. });
  45. }, 1000);
  46. setTimeout(function () {
  47. chart.load({
  48. columns: [
  49. ['x', 'www.hogehoge.com', 'www.aaaa.com', 'www.aaaa.com'],
  50. ['download', 130, 300, 200],
  51. ['loading', 190, 130, 240],
  52. ],
  53. });
  54. }, 2000);
  55. setTimeout(function () {
  56. chart.load({
  57. columns: [
  58. ['x', 'www.yahoo.com', 'www.rakuten.com', 'www.mixi.com', 'www.sony.com'],
  59. ['download', 130, 300, 200, 470],
  60. ['loading', 190, 130, 240, 340],
  61. ],
  62. });
  63. }, 3000);
  64. setTimeout(function () {
  65. chart.load({
  66. columns: [
  67. ['download', 30, 30, 20, 170],
  68. ['loading', 90, 30, 40, 40],
  69. ],
  70. });
  71. }, 4000);
  72. setTimeout(function () {
  73. chart.load({
  74. url: '/data/c3_test3.csv'
  75. });
  76. }, 5000);
  77. </script>
  78. </body>
  79. </html>