admin
/
movie


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172
							<html>
  <head>
    <link rel="stylesheet" type="text/css" href="../css/c3.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 padding = {}, types = {};

      var generate = function () { return c3.generate({
        data: {
          x: 'x',
          columns: [
            ['x', ],
            ['data1', ],
            ['data2', ],
//            ['x', '2013-01-01', '2013-01-02', '2013-01-03', '2013-01-10', '2013-01-11', '2013-01-12'],
//            ['data1', 30, 200, 100, 400, 150, 250],
//            ['data2', 310, 400, 200, 100, 450, 150],
//            ['data3', 310, 400, 200, 100, null, 150],
          ],
          types: types,
//          labels: true
        },
        bar: {
          width: 10
        },
        axis: {
          x: {
            type: 'timeseries',
            tick: {
              format: '%m/%d',
            },
            padding: padding
          },
          y: {
/*
            min: -100,
            max: 1000
*/
          }
        },
/* not supported yet
        grid: {
          x: {
            show: true
          },
          y: {
            show: true
          }
        }
*/
      }); }, chart;

    function run() {

      chart = generate();

      setTimeout(function () {
        chart.flow({
          columns: [
            ['x', '2013-01-21'],
            ['data1', 500],
            ['data3', 200],
          ],
          duration: 1500
        });
      }, 1000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['x', '2013-02-01', '2013-02-08', '2013-02-15'],
            ['data1', 200, 400, 300],
            ['data2', 100, 300, 200],
            ['data3', 100, 200, 50]
          ],
          length: 1,
          duration: 1500
        });
      }, 4000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['x', '2013-03-01', '2013-03-08'],
            ['data1', 200, 500],
            ['data2', 300, 400],
            ['data3', 400, 200]
          ],
          to: '2013-02-08',
          duration: 1500
        });
      }, 7000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['x', '2013-03-15', '2013-05-01'],
            ['data1', 200, 500],
            ['data2', 300, 400],
            ['data3', 400, 200]
          ],
          length: 0,
          duration: 1500
        });
      }, 10000);

      setTimeout(function () {
        chart = generate();
      }, 14000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['x', '2013-01-21', '2013-01-25', '2013-01-26'],
            ['data1', 500, 300, 100],
            ['data3', 200, 150, null],
          ],
          duration: 1500
        });
      }, 15000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['x', '2013-02-01'],
            ['data1', 200],
            ['data2', 100],
            ['data3', 100]
          ],
          length: 0,
          duration: 1500
        });
      }, 18000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['x', '2013-03-01'],
            ['data1', 200],
            ['data2', 300],
            ['data3', 400]
          ],
          to: '2013-02-01',
          duration: 1500
        });
      }, 21000);
    };

    run();

    setTimeout(function () {
      padding = {left: 0, right: 0};
      run();
    }, 25000);

    setTimeout(function () {
      types = {
        data2: 'area',
        data3: 'bar',
      }
      run();
    }, 50000);

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