таблица chartjs каждый выпуск серии не переходит к следующему tr

Question

У меня есть довольно неприятная проблема и думаю, что я просто пропустил что-то очевидное. Я использую chartjs для создания диаграммы из таблицы. Таблица является динамической, но простой текст. Проблема заключается в том, что при создании диаграммы все значения в таблице находятся в первом столбце, как серия, а не на графике в виде отдельных точек вдоль диаграммы. Вот мой стол:

<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> 

Таблица отображает штраф. Я думаю, что я сузил, что проблема возникает в generateDataSetsFromTable, я просто не уверен в этой причине.

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

Мой график рисует, но все значения показывают в первом столбце в виде ряда и не расширяется по оси X.

Answer 1

В generateDataSetsFromTable(), переместите создание набора данных вне цикла т.р. (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/