data_load_timeseries.html 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. <html>
  2. <head>
  3. <link href="../css/c3.css" rel="stylesheet" type="text/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. data: {
  12. x: 'x',
  13. url: '/data/c3_test_ts.csv',
  14. labels: true
  15. },
  16. axis: {
  17. x: {
  18. type: 'timeseries'
  19. }
  20. },
  21. subchart: {
  22. show: true
  23. },
  24. zoom: {
  25. enabled: true
  26. },
  27. });
  28. setTimeout(function () {
  29. chart.load({
  30. url: '/data/c3_test2_ts.csv'
  31. });
  32. }, 1000);
  33. setTimeout(function () {
  34. chart.unload({
  35. ids: 'data2'
  36. });
  37. }, 2000);
  38. setTimeout(function () {
  39. chart.load({
  40. columns: [
  41. ['data1', 30, 20, 50, 40, 60, 50],
  42. ],
  43. unload: true,
  44. // unload: ['data2', 'data3'],
  45. // unload: ['data2']
  46. });
  47. }, 3000);
  48. </script>
  49. </body>
  50. </html>