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


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
							<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
  </head>
  <body>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>

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

      var smallData = [
        ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01'],
        ['sample', 30, 200, 100, 400, 150, 250]
      ],
      bigData = [
        ['x', '2014-01-01', '2014-02-01', '2014-03-01', '2014-04-01', '2014-05-01', '2014-06-01', '2014-07-01', '2014-08-01', '2014-09-01', '2014-10-01', '2014-11-01', '2014-12-01'],
        ['sample', 30, 200, 100, 400, 150, 250, 30, 200, 100, 400, 150, 250]
      ];

      c3.generate({
        bindto: '#chart1',
        data: {
          x: 'x',
          columns: smallData
        },
        axis: {
          x: {
            type: 'timeseries',
            tick: {
              format: "%Y-%m-%d %H:%M:%S"
            }
          }
        },
        grid: {
          x: {
            show: true,
          },
        }
      });

      c3.generate({
        bindto: '#chart2',
        data: {
          x: 'x',
          columns: smallData
        },
        axis: {
          rotated: true,
          x: {
            type: 'timeseries',
            tick: {
              format: "%Y-%m-%d %H:%M:%S"
            }
          }
        },
        grid: {
          x: {
            show: true,
          },
        }
      });

      c3.generate({
        bindto: '#chart3',
        data: {
          x: 'x',
          columns: bigData
        },
        axis: {
          x: {
            type: 'timeseries',
            tick: {
              format: "%Y-%m-%d %H:%M:%S"
            }
          }
        },
        grid: {
          x: {
            show: true
          }
        }
      });

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