CityApper
/
tinydatacenter
mirror of https://github.com/harlanji/tinydatacenter


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

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

      var chart = c3.generate({
        data: {
          url: '/data/c3_test.csv',
          labels: true,
          filter: function (t) {
            return t.id !== 'data1';
          }
        },
        subchart: {
          show: true
        },
        zoom: {
          enabled: true
        },
        transition: {
          duration: 500
        }
      });

    var queue = [
      function () {
        chart.load({
          url: '/data/c3_test2.csv',
          filter: function (t) {
            return t.id !== 'data1';
          }
        });
      },
      function () {
        chart.load({
          rows: [
            ['data4', 'data5', 'data6'],
            [90, 120, 300],
            [40, 160, 240],
            [50, 200, 290],
            [120, 160, 230],
            [80, 130, 300],
            [90, 220, 320],
            [1090, 1220, 1320],
          ]
        });
      },
      function () {
        chart.unload({
          ids: ['data4', 'data5']
        });
      },
      function () {
        chart.unload({
          ids: 'data6'
        });
      },
      function () {
        chart.load({
          columns:[
            ['data1', 30, 20, 50, 40, 60, 50, 100, 200],
            ['data7', 230, 220, 250, 240, 260, 250, 300, 400]
          ]
        });
      },
      function () {
        chart.load({
          json: {
            data1: [1030, 1020, 1050, 1040, 1060, 1050, 1100, 1200],
            data7: [430, 420, 450, 440, 460, 550, 400, 200]
          }
        });
      },
      function () {
        chart.load({
          columns: [
            ['data8', 30, 20, 50, 40, 60, 50],
          ],
          unload: true,
        });
      },
      function () {
        chart.load({
          columns: [
            ['data9', 130, 120, 150, 140, 160, 150],
          ],
          unload: ['data7', 'data8'],
        });
      },
      function () {
        chart.load({
          unload: ['data1', 'data2'],
        });
      },
      function () {
        chart.unload();
      },
      function () {
        chart.load({
          rows: [
            ['data1', 'data2', 'data3'],
            [90, 120, 300],
            [40, 160, 240],
            [50, 200, 290],
            [120, 160, 230],
            [80, 130, 300],
            [90, 220, 320],
          ]
        });
      },
      function () {
        chart.unload({
          ids: ['data2', 'data3']
        });
      },
    ];

    var i = 0;
    queue.forEach(function (f) {
      setTimeout(f, 1500 * i++);
    });

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