Currently, I am working on a web app using Java EE, following a specific pattern. The process involves sending a query to the database from a DAO pattern. Once the result of the query is obtained, it is passed to the controller (servlet), which in turn passes the results to the view, typically a JSP page.
So far, I have been utilizing Expression Language to manipulate data coming from the servlet. However, for creating statistics with a Google chart code, I now need to understand how to collect data using Javascript.
Let me provide you with some details:
This snippet shows the DAO portion, where we select ticket types and count them.
private static final String JPQL_SELECT_TICKETS_ETAT = "SELECT t.etat, COUNT(t.id_ticket) FROM Ticket t GROUP BY t.etat";
@PersistenceContext( unitName = "bdd_helpdesk_PU" )
private EntityManager em;
public List<Object[]> chargerTicketsParEtat() throws DAOException {
List<Object[]> liste;
TypedQuery<Object[]> query = em.createQuery(JPQL_SELECT_TICKETS_ETAT, Object[].class);
try {
liste = (List<Object[]>) query.getResultList();
} catch ( NoResultException e ) {
return null;
} catch(Exception e) {
throw new DAOException(e);
}
return liste;
}
The next code snippet belongs to the servlet:
List<Object[]> lticket = ticketDao.chargerTicketsParEtat();
String test= "this is a string";
request.setAttribute("test", test);
request.setAttribute("lticket",lticket);
And this is the relevant part of the JSP page:
The retrieved data is displayed in a table format like this:
<table>
<tr>
<th>Ticket State</th>
<th>Quantity</th>
</tr>
<c:forEach items="${lticket}" var="ticket">
<tr>
<td>${ticket[0]}</td>
<td>${ticket[1]}</td>
</tr>
</c:forEach>
</table>
Below is the sample Google chart code that I intend to use:
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['Mushrooms', 3],
['Onions', 1],
['Olives', 1],
['Zucchini', 1],
['Pepperoni', 2]
]);
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
I'm looking for guidance on how to fetch the lticket data so that I can incorporate it into the Google chart code effectively.