How to send dynamic data to line chart

[anukiransolur]

I want to draw a line chart which updates itself on an event and loads new data onclick.

Here is the way I'm drawing the chart in HTML :

<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">
   <chart-size chart-width="250" chart-height="270"/>
   <chart-legend  show-legend="false" legend-position="right"/>
   <chart-events on-click-data="onChange(key,data)"></chart-events>
</c3chart>

In the controller, i'm defining the variables in the following way :

                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"};

When I print lineChartData,lineChartColumns and lineChartX in HTML, I get the following :

[{"data":[100,500,200,400,100],"x":[0,10,20,30,40]}]

[{"id":"data","type":"line"}]

{"id":"x","name":"data"}

But this data does not draw the chart and I get an error saying : d3.js:669 Error: Invalid value for <g> attribute transform="translate(NaN, 0)"

I understand that d3 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. Could you please provide an example or update the documents.

[anukiransolur]

I found a way to pass the data in the following way.

var chartColumns = [];
var chartPointsArr = [];
var chartXAxis =[];

showData.forEach(function(s) {
    if (s.number) {

        var chartPoints = {};
        chartPoints["data"] = s.count;
        chartPoints["x"] = s.number;

        chartPointsArr.push(chartPoints);
     }
});

var chartColumnEntry = {};
chartColumnEntry['id'] = "data";
chartColumnEntry['type'] = 'line';
chartColumns.push(chartColumnEntry);

$scope.lineChartData[key] = chartPointsArr;
$scope.lineChartColumns[key] = chartColumns;
$scope.lineChartX = {"id":"x","name":"data"};

So when I printed it in HTML it looks like :

{"data":100,"x":0},{"data":500,"x":10},{"data":200,"x":20},{"data":400,"x":30},{"data":100,"x":40}]

[{"id":"data","type":"line"}]