grid_x_lines_timeseries.html 1.6 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" href="../css/c3.css">
  4. </head>
  5. <body>
  6. <div id="chart1"></div>
  7. <div id="chart2"></div>
  8. <script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
  9. <script src="../js/c3.js"></script>
  10. <script>
  11. var chart1 = c3.generate({
  12. "bindto": "#chart1",
  13. "axis": {
  14. "x": {
  15. "type": "timeseries",
  16. "tick": {
  17. format: '%Y-%m-%d %H:%M:%S'
  18. }
  19. }
  20. },
  21. "grid": {
  22. "x": {
  23. "lines": [
  24. { "value": 1401883200000, "text": new Date(1401883200000), "color": "#f00" },
  25. ]
  26. }
  27. },
  28. "data": {
  29. "type": "line",
  30. "columns": [
  31. ["epoch", 1401879600000, 1401883200000, 1401886800000],
  32. ["y", 1955, 2419, 2262]
  33. ],
  34. "xs": {
  35. "y": "epoch"
  36. }
  37. }
  38. });
  39. var chart2 = c3.generate({
  40. "bindto": "#chart2",
  41. "axis": {
  42. "x": {
  43. "type": "timeseries",
  44. "tick": {
  45. format: '%Y-%m-%d %H:%M:%S'
  46. }
  47. }
  48. },
  49. "grid": {
  50. "x": {
  51. "lines": [
  52. { "value": new Date(1401883200000), "text": new Date(1401883200000), "color": "#f00" },
  53. ]
  54. }
  55. },
  56. "data": {
  57. "type": "line",
  58. "columns": [
  59. ["epoch", 1401879600000, 1401883200000, 1401886800000],
  60. ["y", 1955, 2419, 2262]
  61. ],
  62. "xs": {
  63. "y": "epoch"
  64. }
  65. }
  66. });
  67. </script>
  68. </body>
  69. </html>