C3.js bar chart

Bar chart with the C3.js adapter

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.10/c3.min.js"></script>
<div id="chart"></div>
<select id='dropdown' onchange="fn();">
  <option value='1'>data1</option>
  <option value='2'>data2</option>
  <option value='3'>data3</option>
</select>

JavaScript

var dataset= document.getElementById("dropdown").value;

if(dataset=='1'){
	  var chartData=[
    ['data1',60,10,4,20],
    ['data2',30,30,5,20],
    ['data3',30,30,4,20]
  ];
  var textone="cat";
  var texttwo="dog";
  var textthree='hen';
}

if(dataset=='2'){
	  var chartData=[
    ['data1',60,10,4,20,50,80],
    ['data2',30,30,5,20,60,74],
    ['data3',30,30,4,20,45,90]
  ]
  var textone="eagle";
  var texttwo="bird";
  var textthree='fish';
}

if(dataset=='3'){
	  var chartData=[
    ['data1',60,10],
    ['data2',30,30],
    ['data3',30,30]
  ];
  
  var textone="horse";
  var texttwo="rooster";
  var textthree='dolphin';
  
}

function fn(){

  var chart = c3.generate({
      bindto: '#chart',
      size: {
          height: 500,
      },
      data: {
          columns: chartData,
          colors:{
            data1:'#00af50',
            data2:'#F7931E',
            data3: '#FF0000'
          },
          names:{
            data1:'namedata1',
            data2:'namedata2',
            data3:'namedata3'

          },

          type:'bar',

          labels: {
            format: {

             data1: function (v, id, i, j) { 
               return textone; 
             },
              data2: function (v, id, i, j) { 

               return texttwo; 
             },
              data3: function (v, id, i, j) { 

               return textthree; 
             },
            }
          }
      },


      tooltip: {
          show: false
      },    
      legend: {
          show: false
      },
      axis: {
          rotated: true,
          x: {
              type: 'category',
              categories: ['001', '002','003','004'],
               tick: {

               format: function (d) { 
                return "" ; }
              }
          }        
      }    
  });

  var arrayOfPics = [
    "http://lorempixel.com/40/40/abstract",
    "http://lorempixel.com/40/40/animal",
    "http://lorempixel.com/40/40/business",
   ...