Diagramme dynamisch aus dataTable anzeigen

Question

Ich möchte ein Diagramm mit Amcharts anzeigen, ich habe eine dataTable mit count/groupBy aus der Datenbank. Jetzt möchte ich das Diagramm dynamisch anzeigen, ich möchte die dataTable iterieren und die erste und die zweite Spalte im Array chartData nacheinander erstellen. Das ist mein Datatable:

Stat.xhtml

<h:form id="ff"> 
<rich:dataTable id="tablereparation" value="#{stat.results}" var="rep"> 
<h:column headerClass="headerleftfacet"> 
<h:outputText id="np" value="#{rep[0]}" /></h:column> 
<h:column headerClass="headermiddlefacet"> 
<h:outputText id="nbpanne" value="#{rep[1]}" /> 
</h:column> 
</rich:dataTable> 
</h:form> 

test.js

var chart; 
var legend; 
//my attempt 
var table = document.getElementById('ff:tablereparation'); 
var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); 
for (var i = 0; i < rows.length; i++) { 
    var cells = rows[i].getElementsByTagName("td"); 

    for (var j = 0; j <= 0; j++) { 
     var cell = cells[j]; 
     alert(cells.innerHtml); 
    } 

} 

var chartData = [{ 
    panne: ?, 
    percpangrave: ? 
}]; 


chart = new AmCharts.AmPieChart(); 
chart.dataProvider = chartData; 
chart.titleField = "panne"; 
chart.valueField = "percpangrave"; 
chart.outlineColor = "#FFFFFF"; 
chart.outlineAlpha = 0.8; 
chart.outlineThickness = 2; 

legend = new AmCharts.AmLegend(); 
legend.position = "bottom"; 
legend.align = "center"; 
legend.markerType = "square"; 
legend.valueText = ""; 
chart.addLegend(legend); 

chart.write("chartdiv1"); 

Answer 1

nicht über diese Art von Datatable HTML, sie JavaScript zum Lesen der Zelle Informationen zu wissen, etwas doesn Ich sehe nicht richtig aus. Sie können die Zeilenzellen direkt aus der Zeilenvariablen abrufen, da jedes <tr> ein zugeordnetes Array cells enthält und Sie einfach den innerHTML-Wert aus ihnen ziehen und das Array dynamisch auffüllen. Hier ist ein Beispiel unten, die auch einen schnelleren Weg zeigt, auf die Reihen durch querySelectorAll zu erhalten:

var chart; 
 
var legend; 
 
//var table = document.getElementById('ff:tablereparation'); 
 
//var rows = table.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); 
 
//shorter way of doing this: 
 
var rows = document.querySelectorAll("#ff\\:tablereparation tr"); //note double slash to escape the colon as a literal character since it's a selector in css 
 
var chartData = []; 
 

 
for (var i = 0; i < rows.length; i++) { 
 
    chartData.push({ 
 
    panne: rows[i].cells[0].innerHTML, 
 
    percpangrave: rows[i].cells[1].innerHTML 
 
    }); 
 
} 
 

 

 
chart = new AmCharts.AmPieChart(); 
 
chart.dataProvider = chartData; 
 
chart.titleField = "panne"; 
 
chart.valueField = "percpangrave"; 
 
chart.outlineColor = "#FFFFFF"; 
 
chart.outlineAlpha = 0.8; 
 
chart.outlineThickness = 2; 
 

 
legend = new AmCharts.AmLegend(); 
 
legend.position = "bottom"; 
 
legend.align = "center"; 
 
legend.markerType = "square"; 
 
legend.valueText = ""; 
 
chart.addLegend(legend); 
 

 
chart.write("chartdiv1");

#chartdiv1 { 
 
    width: 100%; 
 
    height: 300px; 
 
}

<script type="text/javascript" src="https://www.amcharts.com/lib/3/amcharts.js"></script> 
 
<script type="text/javascript" src="https://www.amcharts.com/lib/3/pie.js"></script> 
 
<table border="1" id="ff:tablereparation"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Title 1</td> 
 
     <td>30</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Title 2</td> 
 
     <td>10</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Title 3</td> 
 
     <td>60</td> 
 
    </tr> 
 
    <tr> 
 
     <td>Title 4</td> 
 
     <td>40</td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div id="chartdiv1"></div>