padding_update.html 1.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  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 axis_rotated = true;
  11. var generate = function () { return c3.generate({
  12. data: {
  13. x: 'x',
  14. columns: [
  15. ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
  16. ['data1', 190, 200, 190, null],
  17. ],
  18. type: 'bar',
  19. labels: {
  20. format: function (v, id) {
  21. if (v === null) {
  22. return 'Not Applicable';
  23. }
  24. return d3.format('$')(v);
  25. }
  26. }
  27. },
  28. axis: {
  29. x: {
  30. type: 'categorized'
  31. },
  32. rotated: axis_rotated
  33. },
  34. }); }, chart = generate();
  35. setTimeout(function () {
  36. chart.hide();
  37. }, 1000);
  38. setTimeout(function () {
  39. chart.show();
  40. }, 2000);
  41. setTimeout(function () {
  42. chart.load({
  43. columns: [
  44. ['data1', 300, 350, 100]
  45. ],
  46. categories: ['2014-01-01 10:10:10', '2014-02-01 12:30:00', '2014-03-01 16:30:00']
  47. });
  48. }, 3000);
  49. setTimeout(function () {
  50. chart.load({
  51. columns: [
  52. ['data1', 50, 100, 150]
  53. ],
  54. categories: ['2014', '2015', '2016']
  55. });
  56. }, 4000);
  57. setTimeout(function () {
  58. axis_rotated = false;
  59. chart = generate();
  60. }, 5000);
  61. setTimeout(function () {
  62. chart.load({
  63. columns: [
  64. ['data1', 300, 350, 100000]
  65. ],
  66. });
  67. }, 6000);
  68. setTimeout(function () {
  69. chart.load({
  70. columns: [
  71. ['data1', 50, 100, 150]
  72. ],
  73. });
  74. }, 7000);
  75. </script>
  76. </body>
  77. </html>