CityApper
/
tinydatacenter
дзеркало https://github.com/harlanji/tinydatacenter


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
							<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/c3.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 axis_rotated = true;

    var generate = function () { return c3.generate({
      data: {
        x: 'x',
        columns: [
            ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01'],
            ['data1', 190, 200, 190, null],
        ],
        type: 'bar',
        labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
        }
      },
      axis: {
        x: {
            type: 'categorized'
        },
        rotated: axis_rotated
      },
    }); }, chart = generate();

    setTimeout(function () {
      chart.hide();
    }, 1000);

    setTimeout(function () {
      chart.show();
    }, 2000);

    setTimeout(function () {
      chart.load({
        columns: [
          ['data1', 300, 350, 100]
        ],
        categories: ['2014-01-01 10:10:10', '2014-02-01 12:30:00', '2014-03-01 16:30:00']
      });
    }, 3000);

    setTimeout(function () {
      chart.load({
        columns: [
          ['data1', 50, 100, 150]
        ],
        categories: ['2014', '2015', '2016']
      });
    }, 4000);

    setTimeout(function () {
      axis_rotated = false;
      chart = generate();
    }, 5000);

    setTimeout(function () {
      chart.load({
        columns: [
          ['data1', 300, 350, 100000]
        ],
      });
    }, 6000);

    setTimeout(function () {
      chart.load({
        columns: [
          ['data1', 50, 100, 150]
        ],
      });
    }, 7000);

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