title: How to send dynamic data to c3chart angular line chart
body: <p>I want to draw a line chart which updates itself on an event and loads new data <code>onClick</code>.</p>
  
  <p>Here is the way I'm drawing the chart in HTML :</p>
  
  <pre><code>&lt;c3chart bindto-id="{{key}}" padding-left="20" 
       padding-right="20" padding-top="20" padding-bottom="20"  
             chart-data="lineChartData[key]" chart-columns="lineChartColumns[key]" 
                                                              chart-x="lineChartX"&gt;
     &lt;chart-size chart-width="250" chart-height="270"/&gt;
     &lt;chart-legend  show-legend="false" legend-position="right"/&gt;
     &lt;chart-events on-click-data="onChange(key,data)"&gt;&lt;/chart-events&gt;
  &lt;/c3chart&gt;
  </code></pre>
  
  <p>In the controller, i'm defining the variables as follow:</p>
  
  <pre><code>var chartPoints = {};
  var chartColumns = [];
  var chartPointsArr = [];
  var chartLinePts = [];
  var chartXAxis =[];
  
  showData.forEach(function(s) {
      if (s.number) {
  
          chartLinePts.push(s.count);
          chartXAxis.push(s.number);
       }
  });
  
  chartPoints["data"] = chartLinePts;
  chartPoints["x"] = chartXAxis;
  chartPointsArr.push(chartPoints);
  
  var chartColumnEntry = {};
  chartColumnEntry['id'] = "data";
  chartColumnEntry['type'] = 'line';
  chartColumns.push(chartColumnEntry);
  
  
  console.log(chartPointsArr);
  console.log(chartColumns);
  
  $scope.lineChartData[key] = chartPointsArr;
  $scope.lineChartColumns[key] = chartColumns;
  $scope.lineChartX = {"id":"x","name":"data"};
  </code></pre>
  
  <p>When I print <code>lineChartData</code>, <code>lineChartColumns</code> and <code>lineChartX</code> in HTML, I get the following :</p>
  
  <pre><code>[{"data":[100,500,200,400,100],"x":[0,10,20,30,40]}]
  
  [{"id":"data","type":"line"}]
  
  {"id":"x","name":"data"}
  </code></pre>
  
  <p>But this data does not draw the chart and I get an error saying :</p>
  
  <pre><code>d3.js:669 Error: Invalid value for &lt;g&gt; attribute transform="translate(NaN, 0)"
  </code></pre>
  
  <p>I understand that <code>d3</code> is not getting valid data to draw the chart. Hence I would like to know the correct way to pass the dynamic data to line chart. </p>