CityApper
/
tinydatacenter
kopia lustrzana https://github.com/harlanji/tinydatacenter


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223
							<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
    <style>
      .c3-region-1 {
        fill: #dd3333;
        fill-opacity: 0.8
      }
    </style>
  </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 padding = {}, types = {}, chart, generate = function () { return c3.generate({
        data: {
          columns: [
            ['data1'],
            ['data2'],
          ],
          types: types,
          labels: true
        },
        bar: {
          width: 10
        },
        axis: {
          x: {
            padding: padding
          },
          y: {
/*
            min: -100,
            max: 1000
*/
          }
        },
        grid: {
          x: {
            show: true,
            lines: [{value: 3, text:'Label 3'}, {value: 4.5, text: 'Label 4.5'}]
          },
          y: {
            show: true
          }
        },
        regions: [
          {start:2, end:4, class:'region1'},
          {start:100, end:200, axis:'y'},
        ],
      });
      };

    function run() {

      chart = generate();

      setTimeout(function () {
        // Load only one data
        chart.flow({
          rows: [
            ['data1', 'data2', 'data3'],
            [500, 100, 200],
            [200, null, null],
            [100, 50, null] 
          ],
          duration: 1500,

          done: function () {
            // Load 2 data without data2 and remove 1 data
            chart.flow({
              columns: [
                ['data1', 200, 300],
                ['data3', 100, 100]
              ],
              length: 0,
              duration: 1500,

              done: function () {
                chart.flow({
                  columns: [
                    ['data1', 200, 300],
                    ['data2', 200, 300],
                    ['data3', 100, 100]
                  ],
                  length: 2,
                  duration: 1500,
                  done: function () {

                    chart.flow({
                      columns: [
                        ['data1', 500],
                        ['data2', 100],
                        ['data3', 200]
                      ],
                      length: 1,
                      duration: 1500,
                    });
                  }

                });
              }// done

            });
          },

        });
      }, 1000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['data1', 250],
            ['data2', 350],
            ['data3', 150]
          ],
          length: 0
        });
      }, 9000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['data1', 100],
            ['data2', 50],
            ['data3', 300]
          ],
          length: 2
        });
      }, 10000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['data1', 600],
            ['data2', 400],
            ['data3', 500]
          ],
          to: 2,
        });
      }, 11000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['data1', 100],
            ['data2', 200],
            ['data3', 300]
          ]
        });
      }, 12000);

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

      setTimeout(function () {
        chart.flow({
          columns: [
            ['data1', 500, 100],
            ['data2', 100, 200],
            ['data3', 200, 300],
          ],
          duration: 1500,
          done: function () {
            chart.flow({
              columns: [
                ['data1', 200],
                ['data3', 100]
              ],
//              duration: 1000,
              length: 1
            });
          },
        });
      }, 14000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['data1', 200],
            ['data2', 300],
            ['data3', 100]
          ],
          to: 1,
        });
      }, 18000);

      setTimeout(function () {
        chart.flow({
          columns: [
            ['data1', 200],
            ['data2', 300],
            ['data3', 400]
          ]
        });
      }, 19000);

    }

    run();

    // Test for no padding
    setTimeout(function () {
      padding = {left: 0, right: 0};
      run();
    }, 22000);

    // Test for other chart types
    setTimeout(function () {
      types = {
        data2: 'area',
        data3: 'bar',
      };
      run();
    }, 45000);

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