text: /* Bar charts
  ***************************************/
  var chart11 = c3.generate({
      data: {
          columns: [
              ['data1', 30, 200, 100, 400, 150, 250],
              ['data2', 130, 100, 140, 200, 150, 50]
          ],
          type: 'bar'
      },
      bindto: '#chart11',
      bar: {
          width: {
              ratio: 0.5 // this makes bar width 50% of length between ticks
          }
          // or
          //width: 100 // this makes bar width 100px
      }
  });
  
  setTimeout(function () {
      chart11.load({
          columns: [
              ['data3', 130, -150, 200, 300, -200, 100]
          ]
      });
  }, 1000);
  
  /* Data order bar chart
  *****************************************/
  var chart12 = c3.generate({
      data: {
          columns: [
              ['data1', 130, 200, 320, 400, 530, 750],
              ['data2', -130, 10, 130, 200, 150, 250],
              ['data3', -130, -50, -10, -200, -250, -150]
          ],
          type: 'bar',
          groups: [
              ['data1', 'data2', 'data3']
          ],
          order: 'desc' // stack order by sum of values descendantly. this is default.
  //      order: 'asc'  // stack order by sum of values ascendantly.
  //      order: null   // stack order by data definition.
      },
      bindto: '#chart12',
      grid: {
          y: {
              lines: [{value:0}]
          }
      }
  });
  
  setTimeout(function () {
      chart12.load({
          columns: [
              ['data4', 1200, 1300, 1450, 1600, 1520, 1820],
          ]
      });
  }, 1000);
  
  setTimeout(function () {
      chart12.load({
          columns: [
              ['data5', 200, 300, 450, 600, 520, 820],
          ]
      });
  }, 2000);
  
  setTimeout(function () {
      chart12.groups([['data1', 'data2', 'data3', 'data4', 'data5']])
  }, 3000);
  
  /* Stacked Bar Chart
  *****************************************/
  var chart13 = c3.generate({
      data: {
          columns: [
              ['data1', -30, 200, 200, 400, -150, 250],
              ['data2', 130, 100, -100, 200, -150, 50],
              ['data3', -230, 200, 200, -300, 250, 250]
          ],
          type: 'bar',
          groups: [
              ['data1', 'data2']
          ]
      },
      bindto: '#chart13',
      grid: {
          y: {
              lines: [{value:0}]
          }
      }
  });
  
  setTimeout(function () {
      chart13.groups([['data1', 'data2', 'data3']])
  }, 1000);
  
  setTimeout(function () {
      chart13.load({
          columns: [['data4', 100, -50, 150, 200, -300, -100]]
      });
  }, 1500);
  
  setTimeout(function () {
      chart13.groups([['data1', 'data2', 'data3', 'data4']])
  }, 2000);
  
  /* Scatter Plot
  **********************************************/
  var chart14 = c3.generate({
      data: {
          xs: {
              setosa: 'setosa_x',
              versicolor: 'versicolor_x',
          },
          // iris data from R
          columns: [
              ["setosa_x", 3.5, 3.0, 3.2, 3.1, 3.6, 3.9, 3.4, 3.4, 2.9, 3.1, 3.7, 3.4, 3.0, 3.0, 4.0, 4.4, 3.9, 3.5, 3.8, 3.8, 3.4, 3.7, 3.6, 3.3, 3.4, 3.0, 3.4, 3.5, 3.4, 3.2, 3.1, 3.4, 4.1, 4.2, 3.1, 3.2, 3.5, 3.6, 3.0, 3.4, 3.5, 2.3, 3.2, 3.5, 3.8, 3.0, 3.8, 3.2, 3.7, 3.3],
              ["versicolor_x", 3.2, 3.2, 3.1, 2.3, 2.8, 2.8, 3.3, 2.4, 2.9, 2.7, 2.0, 3.0, 2.2, 2.9, 2.9, 3.1, 3.0, 2.7, 2.2, 2.5, 3.2, 2.8, 2.5, 2.8, 2.9, 3.0, 2.8, 3.0, 2.9, 2.6, 2.4, 2.4, 2.7, 2.7, 3.0, 3.4, 3.1, 2.3, 3.0, 2.5, 2.6, 3.0, 2.6, 2.3, 2.7, 3.0, 2.9, 2.9, 2.5, 2.8],
              ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
              ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
          ],
          type: 'scatter'
      },
      bindto: '#chart14',
      axis: {
          x: {
              label: 'Sepal.Width',
              tick: {
                  fit: false
              }
          },
          y: {
              label: 'Petal.Width'
          }
      }
  });
  
  setTimeout(function () {
      chart14.load({
          xs: {
              virginica: 'virginica_x'
          },
          columns: [
              ["virginica_x", 3.3, 2.7, 3.0, 2.9, 3.0, 3.0, 2.5, 2.9, 2.5, 3.6, 3.2, 2.7, 3.0, 2.5, 2.8, 3.2, 3.0, 3.8, 2.6, 2.2, 3.2, 2.8, 2.8, 2.7, 3.3, 3.2, 2.8, 3.0, 2.8, 3.0, 2.8, 3.8, 2.8, 2.8, 2.6, 3.0, 3.4, 3.1, 3.0, 3.1, 3.1, 3.1, 2.7, 3.2, 3.3, 3.0, 2.5, 3.0, 3.4, 3.0],
              ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
          ]
      });
  }, 1000);
  
  setTimeout(function () {
      chart14.unload({
          ids: 'setosa'
      });
  }, 2000);
  
  setTimeout(function () {
      chart14.load({
          columns: [
              ["virginica", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
          ]
      });
  }, 3000);
  
  /* Pie Chart
  ************************************************/
  var chart15 = c3.generate({
      data: {
          // iris data from R
          columns: [
              ['data1', 30],
              ['data2', 120],
          ],
          type : 'pie',
          onclick: function (d, i) { console.log("onclick", d, i); },
          onmouseover: function (d, i) { console.log("onmouseover", d, i); },
          onmouseout: function (d, i) { console.log("onmouseout", d, i); }
      },
      bindto: '#chart15',
  });
  
  setTimeout(function () {
      chart15.load({
          columns: [
              ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
              ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
              ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
          ]
      });
  }, 1500);
  
  setTimeout(function () {
      chart15.unload({
          ids: 'data1'
      });
      chart15.unload({
          ids: 'data2'
      });
  }, 2500);
  
  /* Donut chart
  *****************************************************/
  var chart16 = c3.generate({
      data: {
          columns: [
              ['data1', 30],
              ['data2', 120],
          ],
          type : 'donut',
          onclick: function (d, i) { console.log("onclick", d, i); },
          onmouseover: function (d, i) { console.log("onmouseover", d, i); },
          onmouseout: function (d, i) { console.log("onmouseout", d, i); }
      },
      bindto: '#chart16',
      donut: {
          title: "Iris Petal Width"
      }
  });
  
  setTimeout(function () {
      chart16.load({
          columns: [
              ["setosa", 0.2, 0.2, 0.2, 0.2, 0.2, 0.4, 0.3, 0.2, 0.2, 0.1, 0.2, 0.2, 0.1, 0.1, 0.2, 0.4, 0.4, 0.3, 0.3, 0.3, 0.2, 0.4, 0.2, 0.5, 0.2, 0.2, 0.4, 0.2, 0.2, 0.2, 0.2, 0.4, 0.1, 0.2, 0.2, 0.2, 0.2, 0.1, 0.2, 0.2, 0.3, 0.3, 0.2, 0.6, 0.4, 0.3, 0.2, 0.2, 0.2, 0.2],
              ["versicolor", 1.4, 1.5, 1.5, 1.3, 1.5, 1.3, 1.6, 1.0, 1.3, 1.4, 1.0, 1.5, 1.0, 1.4, 1.3, 1.4, 1.5, 1.0, 1.5, 1.1, 1.8, 1.3, 1.5, 1.2, 1.3, 1.4, 1.4, 1.7, 1.5, 1.0, 1.1, 1.0, 1.2, 1.6, 1.5, 1.6, 1.5, 1.3, 1.3, 1.3, 1.2, 1.4, 1.2, 1.0, 1.3, 1.2, 1.3, 1.3, 1.1, 1.3],
              ["virginica", 2.5, 1.9, 2.1, 1.8, 2.2, 2.1, 1.7, 1.8, 1.8, 2.5, 2.0, 1.9, 2.1, 2.0, 2.4, 2.3, 1.8, 2.2, 2.3, 1.5, 2.3, 2.0, 2.0, 1.8, 2.1, 1.8, 1.8, 1.8, 2.1, 1.6, 1.9, 2.0, 2.2, 1.5, 1.4, 2.3, 2.4, 1.8, 1.8, 2.1, 2.4, 2.3, 1.9, 2.3, 2.5, 2.3, 1.9, 2.0, 2.3, 1.8],
          ]
      });
  }, 1500);
  
  setTimeout(function () {
      chart16.unload({
          ids: 'data1'
      });
      chart16.unload({
          ids: 'data2'
      });
  }, 2500);
  
  /* guage Chart
  *****************************************************************/
  var chart17 = c3.generate({
      data: {
          columns: [
              ['data', 91.4]
          ],
          type: 'gauge',
          onclick: function (d, i) { console.log("onclick", d, i); },
          onmouseover: function (d, i) { console.log("onmouseover", d, i); },
          onmouseout: function (d, i) { console.log("onmouseout", d, i); }
      },
      bindto: '#chart17',
      gauge: {
  //        label: {
  //            format: function(value, ratio) {
  //                return value;
  //            },
  //            show: false // to turn off the min/max labels.
  //        },
  //    min: 0, // 0 is default, //can handle negative min e.g. vacuum / voltage / current flow / rate of change
  //    max: 100, // 100 is default
  //    units: ' %',
  //    width: 39 // for adjusting arc thickness
      },
      color: {
          pattern: ['#FF0000', '#F97600', '#F6C600', '#60B044'], // the three color levels for the percentage values.
          threshold: {
  //            unit: 'value', // percentage is default
  //            max: 200, // 100 is default
              values: [30, 60, 80, 90]
          }
      },
      size: {
          height: 180
      }
  });
  
  setTimeout(function () {
      chart17.load({
          columns: [['data', 10]]
      });
  }, 1000);
  
  setTimeout(function () {
      chart17.load({
          columns: [['data', 50]]
      });
  }, 2000);
  
  setTimeout(function () {
      chart17.load({
          columns: [['data', 70]]
      });
  }, 3000);
  
  setTimeout(function () {
      chart17.load({
          columns: [['data', 0]]
      });
  }, 4000);
  
  setTimeout(function () {
      chart17.load({
          columns: [['data', 100]]
      });
  }, 5000);
  
  
  
  
  
  
  