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


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
							<html>
  <head>
    <link rel="stylesheet" type="text/css" href="/css/c3.css">
  </head>
  <body>
    <button id="btn1">Bar</button>
    <button id="btn2">Line</button>
    <button id="btn3">Area</button>
    <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 normalData = {
          columns: [
            ['data1', -1030, -1200, 1000],
            ['data2', -1150, -220, -1110]
          ],
          labels: true,
      },
      allPositiveData = {
          columns: [
            ['data1', 1030, 1200, 1100],
            ['data2', 2050, 2020, 2010]
          ],
          labels: true,
      },
      allNegativeData = {
          columns: [
            ['data1', -1030, -2200, -2100],
            ['data2', -1150, -2010, -1200]
          ],
          labels: true,
      }

      var chart1 = c3.generate({
        bindto: '#chart1',
        data: normalData
      });

      var chart2 = c3.generate({
        bindto: '#chart2',
        data: allPositiveData
      });

      var chart3 = c3.generate({
        bindto: '#chart3',
        data: allNegativeData
      });

      d3.select('#btn1').on('click', function () {
        chart1.transform('bar');
        chart2.transform('bar');
        chart3.transform('bar');
      });
      d3.select('#btn2').on('click', function () {
        chart1.transform('line');
        chart2.transform('line');
        chart3.transform('line');
      });
      d3.select('#btn3').on('click', function () {
        chart1.transform('area');
        chart2.transform('area');
        chart3.transform('area');
      });
    </script>
  </body>
</html>