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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<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: {
          json: {
            data1: [30, 20, 50, 40, 60, 50],
            data2: [200, 130, 90, 240, 130, 220],
            data3: [300, 200, 160, 400, 250, 250]
          }
        }
      });

    setTimeout(function () {
      chart = c3.generate({
        data: {
          json: [{
            "date": "2014-06-03",
             "443": "3000",
             "995": "500"
          }, {
            "date": "2014-06-04",
             "443": "1000",
          }, {
            "date": "2014-06-05",
             "443": "5000",
             "995": "1000"
          }],
          keys: {
            x: 'date',
            value: [ "443", "995" ]
          }
        },
        axis: {
          x: {
            type: "category"
          }
        }
      });
    }, 1000);

    setTimeout(function () {
      chart = c3.generate({
        data: {
//          x: 'name',
          json: [
            { id: 1, name: 'abc', visits: 200 },
            { id: 2, name: 'efg', visits: 400 },
            { id: 3, name: 'pqr', visits: 150 },
            { id: 4, name: 'xyz', visits: 420 },
          ],
          keys: {
            x: 'name',
            value: ['visits'],
          }
        },
        axis: {
          x: {
            type: 'categorized'
          }
        }
      });
    }, 2000);

    setTimeout(function () {
      chart.load({
          json: [
            { id: 1, name: 'abc', visits: 1200 },
            { id: 2, name: 'efg', visits: 900 },
            { id: 3, name: 'pqr', visits: 1150 },
            { id: 4, name: 'xyz', visits: 1020 },
          ],
          keys: {
            x: 'name',
            value: ['visits'],
          }
      });
    }, 3000);

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