chartjs table each making series not proceeding to next tr

Question

I am having a rather annoying problem and think I am just missing something obvious. I am using chartjs to create a chart from a table. The table is dynamic but is simple text. The problem is that when the chart is generated all values in the table are in the first column, like a series instead of charting as single points along the chart. Here is my table:

<table>
<tr>
   <th>head1</th>
   <th>head2</th>
</tr>
<tr>
   <td>date1</td>
   <td>count1</td>
</tr>
<tr>
   <td>date2</td>
   <td>count2</td>
</tr>
 <tr>
   <td>date3</td>
   <td>count3</td>
</tr>
</table>

The table displays fine. I think I have narrowed down that the problem is happening in the generateDataSetsFromTable, I'm just not sure of the cause.

var lineChartData2 = {labels: generateLabelsFromTable(),datasets: generateDataSetsFromTable()};

function generateLabelsFromTable()
{                       
    var labels = [];
    var rows = jQuery("tr");
    rows.each(function(index){
        if (index != 0)  // we dont need first row of table
        {
            var cols = $(this).find("td");      

            labels.push(cols.first().text());                           
        }
    }); 
    return labels;
}
function generateDataSetsFromTable()
{

    var data;
    var datasets = [];
    var rows = jQuery("tr");
    rows.each(function(index){
        if (index != 0) // we dont need first row of table
        {
           var cols = $(this).find("td");  
            var data = [];
            cols.each(function(innerIndex){
                if (innerIndex!=0) // we dont need first columns of the row                 
                      data.push($(this).text()); 


            }); 

            var dataset = 
            {
                fillColor: "rgba(238,155,0,0.2)",
                strokeColor: "rgba(217,0,0,1)",
                pointColor: "rgba(166,0,0,1)",
                pointStrokeColor: "#fff",
                pointHighlightFill: "#fff",
                pointHighlightStroke: "rgba(151,187,205,1)",
                data : data
            }
            datasets.push(dataset);
        }
    });
    return datasets;
}

My chart draws but all of the values are showing in the first column as a series and not expanding across the X axis.

Answer 1

In generateDataSetsFromTable(), move your dataset creation outside of the tr loop (rows.each)

function generateDataSetsFromTable()
{
    var data;
    var datasets = [];
    var rows = jQuery("tr");
    var data = [];
    rows.each(function(index){
        if (index != 0) // we dont need first row of table
        {
           var cols = $(this).find("td");  
            cols.each(function(innerIndex){
                if (innerIndex!=0) // we dont need first columns of the row                 
                      data.push($(this).text()); 
            }); 
        }
    });

    var dataset = 
        {
            fillColor: "rgba(238,155,0,0.2)",
            strokeColor: "rgba(217,0,0,1)",
            pointColor: "rgba(166,0,0,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data : data
        }
    datasets.push(dataset);
    return datasets;
}

Fiddle - http://jsfiddle.net/fv3ry41s/