title: load c3 chart with remote data
body: <p>How can I load the chart with remote data using ajax request returning JSON encoded data?</p>
  
  <p>Coding snippet:</p>
  
  <pre><code>var chart = c3.generate({
      bindto:"#chartdivObservation",
      data: {
          columns: [
              ['loading', 30, 20, 50, 40, 60, 50],
          ]
      }
  });
  
  $(document).on("change","#getObservation",function(){
      var team_id=$(this).val();
      var user_id=&lt;?=$userId?&gt;;
  
      $.ajax({
          url:"ajax/user/getDeltaStats.php",
          type:"POST",
          data:{
              get:"getObservationReport",
              teamId:team_id,
              userId:user_id
          },
          success:function(response){
              var data = $.trim(response)
              setTimeout(function(){
                  chart.unload('loading');
                  console.log("loading chart...")
                  console.log(data)
                  chart.load({columns: data})
              }, 4500)
  
              console.log(chart)
  
          }
      });
  });
  </code></pre>
  
  <p>The first column "loading" is the dummy data, so that the chart is rendered. Later, using timeout I'm loading it with new data (reference <a href="http://c3js.org/samples/data_load.html" rel="nofollow">http://c3js.org/samples/data_load.html</a>). But, the chart isn't getting rendered with the new data. </p>
  
  <p>The response generated by the ajax request is:</p>
  
  <pre><code>[["Agenda",90,70,70,20,40,70,60,60,58,63],["Precise Praise",53,60,80,68,80,60],["Circulation &amp; Radar",70,100,93,60,100,90,73,90,75,45,60,60,80,73,60]]
  </code></pre>