timeseries_descendent.html 1.6 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  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="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
  8. <script src="/js/c3.js"></script>
  9. <script>
  10. var dates = ['date',
  11. 1401908040000,
  12. 1401907980000,
  13. 1401907920000,
  14. 1401907860000,
  15. 1401907800000,
  16. 1401907740000,
  17. 1401907680000,
  18. 1401907620000,
  19. 1401907560000,
  20. 1401907500000
  21. ];
  22. var chart = c3.generate({
  23. bindto: '#chart',
  24. data: {
  25. x : 'date',
  26. columns: [
  27. dates,
  28. ['data1', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400],
  29. ['data2', 130, 300, 200, 450, 250, 350, 130, 300, 200, 450]
  30. ],
  31. types: {
  32. data1: 'bar',
  33. }
  34. },
  35. axis : {
  36. x : {
  37. type : 'timeseries',
  38. tick : {
  39. format : "%Y-%m-%d %H:%M:%S"
  40. }
  41. }
  42. }
  43. });
  44. /*
  45. setTimeout(function () {
  46. chart.load({
  47. columns: [
  48. ['sample', 200, 130, 90, 240, 130, 100],
  49. ['sample2', 300, 200, 160, 400, 250, 250]
  50. ]
  51. });
  52. }, 1000);
  53. setTimeout(function () {
  54. chart.load({
  55. columns: [
  56. ['date', '20140101', '20140201', '20140301', '20140401', '20140501', '20140601'],
  57. ['sample', 500, 630, 690, 440, 630, 900],
  58. ['sample2', 400, 600, 460, 200, 350, 450]
  59. ]
  60. });
  61. }, 2000);
  62. */
  63. </script>
  64. </body>
  65. </html>