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


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173
							<html>
  <head>
    <link href="/css/c3.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    grouped => true, multiple => true
    <div id="chart1"></div>

    grouped => true, multiple => true, tooltip.grouped = false
    <div id="chart1-1"></div>

    grouped => true, multiple => false
    <div id="chart2"></div>

    grouped => true, multiple => false, tooltip.grouped = false
    <div id="chart2-1"></div>

    grouped => false, multiple => true
    <div id="chart3"></div>

    grouped => false, multiple => true, tooltip.grouped = false
    <div id="chart3-1"></div>

    grouped => false, multiple => false
    <div id="chart4"></div>

    grouped => false, multiple => false, tooltip.grouped = false
    <div id="chart4-1"></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', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: true,
            multiple: true,
          },
          onclick: function (d, element) { console.log("onclick", d, element); },
          onselected: function (d, element) { console.log("onselected", d, element); },
          onunselected: function (d, element) { console.log("onunselected", d, element); },
          ondragstart: function () { console.log("ondragstart"); },
          ondragend: function () { console.log("ondragend"); },
        },
      });

      var chart11 = c3.generate({
        bindto: '#chart1-1',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: true,
            multiple: true,
          },
        },
        tooltip: {
          grouped: false
        }
      });

      var chart2 = c3.generate({
        bindto: '#chart2',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: true,
            multiple: false,
          }
        }
      });

      var chart21 = c3.generate({
        bindto: '#chart2-1',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: true,
            multiple: false,
          }
        },
        tooltip: {
          grouped: false
        }
      });

      var chart3 = c3.generate({
        bindto: '#chart3',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: false,
            multiple: true,
          }
        }
      });

      var chart31 = c3.generate({
        bindto: '#chart3-1',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: false,
            multiple: true,
          }
        },
        tooltip: {
          grouped: false
        }
      });

      var chart4 = c3.generate({
        bindto: '#chart4',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: false,
            multiple: false,
          }
        }
      });

      var chart41 = c3.generate({
        bindto: '#chart4-1',
        data: {
          columns: [
            ['data1', 30, 200, 100, 400, 150, 250],
            ['data2', 50, 20, 10, 40, 15, 25]
          ],
          selection: {
            enabled: true,
            grouped: false,
            multiple: false,
          }
        },
        tooltip: {
          grouped: false
        }
      });

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