admin
/
movie


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
							<html>
<head>
  <link href="../css/c3.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="chart"></div>

<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="../js/c3.js"></script>
<script>

  var axis_x_type = 'category',
    axis_rotated = false;

  var generate = function () { return c3.generate({
    data: {
      columns: [
        ['data1', 30, 200, 200, 400, 150, 250],
        ['data2', 130, 100, 100, 200, 150, 50],
        ['data3', 230, 200, 200, 0, 250, 250]
      ],
      type: 'bar',
      groups: [
        ['data1', 'data2', 'data3']
      ],
      stack: {
        normalize: false
      }
    },
    axis: {
      x: {
        type: axis_x_type
      },
      rotated: axis_rotated
    },
    grid: {
      y: {
        lines: [{value:0}]
      }
    },
  }); }, chart = generate();

  function update1() {
    chart.data.stackNormalized(true);
  }

  function update2() {
    chart.load({
      columns: [['data4', 100, 50, 150, 200, 300, 100]]
    });
  }

  function update3() {
    chart.groups([['data1', 'data2', 'data3', 'data4']])
  }

  function update4() {
    chart.hide(['data2', 'data3'])
  }

  let delay = 1000;

  function enqueue(fct) {
    setTimeout(fct, delay);
    delay += 1000;
  }

  enqueue(update1);
  enqueue(update2);
  enqueue(update3);
  enqueue(update4);

  enqueue(function () {
    axis_rotated = true;
    chart = generate();
  });
  enqueue(update1);
  enqueue(update2);
  enqueue(update3);
  enqueue(update4);

</script>
</body>
</html>