text: var chart = c3.generate({
      data: {
          columns: [
              ['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]
          ],
          selection: {
              enabled: true
          }
      }
  });
  
  var defaultMessage = $('#message').html(), currentIndex = 0, timer, duration = 1500, demos = [
      function () {
          chart.load({
              columns: [['data2', 100, 30, 200, 320, 50, 150, 230, 80, 150]]
          })
          setMessage('Load data2');
      },
      function () {
          chart.load({
              columns: [['data3', 70, 90, 170, 220, 100, 110, 130, 40, 50]]
          })
          setMessage('Load data3');
      },
      function () {
          chart.select(['data1'], [2]);
          setMessage('Select point for index 2 of data1');
      },
      function () {
          chart.select(['data1'], [4,6]);
          setMessage('Select point for index 4,6 of data1');
      },
      function () {
          chart.unselect();
          setMessage('Unselect points');
      },
      function () {
          chart.focus('data2');
          setMessage('Focus on data2');
      },
      function () {
          chart.focus('data3');
          setMessage('Focus on data3');
      },
      function () {
          chart.revert();
          setMessage('Defocus');
      },
      function () {
          chart.load({
              columns: [['data1', 300, 230, 400, 520, 230, 250, 330, 280, 250]]
          })
          setMessage('Update data1');
      },
      function () {
          chart.load({
              columns: [['data2', 30, 50, 90, 120, 40, 50, 80, 70, 50]]
          })
          setMessage('Update data2');
      },
      function () {
          chart.regions([{start:1,end:3}]);
          setMessage('Add region from 1 to 3');
          },
      function () {
          chart.regions.add([{start:6}]);
          setMessage('Add region from 6 to end');
      },
      function () {
          chart.regions([]);
          setMessage('Clear regions');
      },
      function () {
          chart.xgrids([{value: 1, text:'Label 1'}, {value: 4, text: 'Label 4'}]);
          setMessage('Add x grid lines for 1, 4');
      },
      function () {
          chart.ygrids.add([{value: 450, text:'Label 450'}]);
          setMessage('Add y grid lines for 450');
      },
      function () {
          chart.xgrids.remove({value: 1});
          chart.xgrids.remove({value: 4});
          setMessage('Remove grid lines for 1, 4');
      },
      function () {
          chart.ygrids.remove({value: 450});
          setMessage('Remove grid line for 450');
      },
      function () {
          chart.transform('bar');
          setMessage('Show as bar chart');
      },
      function () {
          chart.groups([['data2','data3']]);
          setMessage('Grouping data2 and data3');
      },
      function () {
          chart.groups([['data1', 'data2', 'data3']]);
          setMessage('Grouping data1, data2 and data3');
      },
      function () {
          chart.groups([['data2', 'data3']]);
          chart.transform('line', 'data1');
          setMessage('Show data1 as line');
      },
      function () {
          chart.unload({
              ids: 'data3'
          });
          setMessage('Unload data3');
      },
      function () {
          chart.unload({
              ids: 'data2'
          });
          setMessage('Unload data2');
      },
      function () {
          chart.flow({
              columns: [
                  ['data1', 390, 400, 200, 500]
              ],
              duration: 1000,
          });
          setMessage('Flow 4 data');
      },
      function () {
          // wait for end of transition for flow
      },
      function () {
          chart.flow({
              columns: [
                  ['data1', 190, 230]
              ],
          });
          setMessage('Flow 2 data');
      },
      function () {
          // wait for end of transition for flow
      },
      function () {
          chart.transform('line', ['data1', 'data2', 'data3']);
          chart.groups([['data1'], ['data2'], ['data3']]);
          chart.load({
              columns: [['data1', 30, 200, 100, 400, 150, 250, 50, 100, 250]]
          })
          setMessage('Starting Demo..');
      }
  ];
  
  function setMessage(message) {
      document.getElementById('message').innerHTML = '<a id="demoMessage" class="button small secondary" onclick="stopDemo();" title="Stop Demo" onclick="stopDemo();">'+message+'</button>';
  //        $('#demoMessage').tooltip('toggle');
  }
  
  function startDemo() {
      setMessage('Starting Demo..');
      timer = setInterval(function(){
          if (currentIndex == demos.length) currentIndex = 0;
          demos[currentIndex++]();
      }, duration);
  }
  
  function stopDemo() {
      clearInterval(timer);
      document.getElementById('message').innerHTML = defaultMessage;
  }
  