CityApper
/
tinydatacenter
şunun yansıması https://github.com/harlanji/tinydatacenter


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225
							<html>
  <head>
    <link href="/css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    <div id="chart1"></div>
    <div id="chart2"></div>
    <div id="chart3"></div>
    <div id="chart4"></div>
    <div id="chart5"></div>
    <div id="chart6"></div>
    <div id="chart7"></div>
    <div id="chart8"></div>
    <div id="chart9" style="width:33%;"></div>
    <div id="chart10"></div>
    <div id="chart11"></div>

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

      var chart1 = c3.generate({
        bindto: '#chart1',
        data: {
          columns: [
            ['data1', 190, 200, 190, null],
          ],
          type: 'bar',
          labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
          }
        }
      });

      var chart2 = c3.generate({
        bindto: '#chart2',
        data: {
          columns: [
            ['data1', -190, -200, -190, null],
          ],
          type: 'bar',
          labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
          }
        }
      });

      var chart3 = c3.generate({
        bindto: '#chart3',
        data: {
          columns: [
            ['data1', -190, 200, 190, null],
          ],
          type: 'bar',
          labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
          }
        }
      });

      var chart4 = c3.generate({
        bindto: '#chart4',
        data: {
          columns: [
            ['data1', 190, 200, 190, null],
          ],
          type: 'bar',
          labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
          }
        },
        axis: {
          rotated: true
        }
      });

      var chart5 = c3.generate({
        bindto: '#chart5',
        data: {
          columns: [
            ['data1', -190, -200, -190, null],
          ],
          type: 'bar',
          labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
          }
        },
        axis: {
          rotated: true
        }
      });

      var chart6 = c3.generate({
        bindto: '#chart6',
        data: {
          columns: [
            ['data1', -190, 200, 190, null],
          ],
          type: 'bar',
          labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
          }
        },
        axis: {
          rotated: true
        }
      });

      var chart7 = c3.generate({
        bindto: '#chart7',
        data: {
          columns: [
            ['data1', 30, 200, 100, 500, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25],
            ['data3', 250, 220, 210, 240, 215, 225]
          ],
          groups: [['data1', 'data2', 'data3']],
          labels: true,
          type: 'bar',
        },
        axis: {
          rotated: true
        }
      });

      var chart8 = c3.generate({
        bindto: '#chart8',
        data: {
          columns: [
            ['data1', -30, -200, -100, -500, -150, -250],
            ['data2', -50, -20, -10, -40, -15, -25],
            ['data3', -250, -220, -210, -240, -215, -225]
          ],
          groups: [['data1', 'data2', 'data3']],
          labels: true,
          type: 'bar',
        },
        axis: {
          rotated: true
        }
      });

      var chart9 = c3.generate({
        bindto: '#chart9',
        data: {
          columns: [
            ['data1', -19000000000000, 200, 19000000000000, null],
          ],
          type: 'bar',
          labels: {
            format: function (v, id) {
                if (v === null) {
                    return 'Not Applicable';
                }
                return d3.format('$')(v);
            }
          }
        },
        axis: {
          rotated: true
        }
      });

      var chart10 = c3.generate({
        bindto: '#chart10',
        data: {
          columns: [
            ['data1', 300, 350, 300, 0, 0, 100],
            ['data2', 130, 0, 140, 200, 0, 50],
            ['data3', 130, 0, 140, 200, 0, 50],
            ['data4', 130, 0, 140, 200, 0, 50],
          ],
          type: 'area',
          groups: [['data1', 'data2', 'data3', 'data4']],
          labels: true
        }
      });

      var chart11 = c3.generate({
        bindto: '#chart11',
        data: {
          columns: [
            ['data1', 300, 350, 300, 0, 0, 100],
            ['data2', 130, 0, 140, 200, 0, 50],
            ['data3', 130, 0, 140, 200, 0, 50],
            ['data4', 130, 0, 140, 200, 0, 50],
          ],
          groups: [['data1', 'data2', 'data3', 'data4']],
          labels: true
        }
      });

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