Генерация динамической статистики с помощью Google-карт
Я хотел бы знать, возможно ли сделать простые и динамичные графики с помощью Google-диаграмм; вот что я использую на самом деле:
Oracle DB, JSTL, EL, JSP страницы.
Что еще должно быть в сфере моих знаний, чтобы реализовать упомянутый выше результат.
РЕДАКТИРОВАТЬ:
Я собираю данные из базы данных ORACLE через JPQL, они будут храниться в списке Object[], содержащем имя и номер для каждой строки, им будет отправлена страница JSP через сервлет: request.setAttribute("data",listemployees);Как получить доступ к этому списку из JSP и как я могу сохранить их в коде JavaScript, генерирующем диаграмму.
РЕДАКТИРОВАТЬ: Добавление деталей
Это часть DAO, выбирающая тип билетов и считающая их.
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;
//List<Object[]> results = em.createQuery("").getResultList();
TypedQuery<Object[]> query = em.createQuery(JPQL_SELECT_TICKETS_ETAT, Object[].class);
//query.setParameter(PARAM_TICKET, id_ticket);
try {
liste = (List<Object[]>) query.getResultList();
} catch ( NoResultException e ) {
return null;
} catch(Exception e) {
throw new DAOException(e);
}
return liste;
}
Следующий код происходит в сервлете:
List<Object[]> lticket = ticketDao.chargerTicketsParEtat();
String test= "this is a string";
request.setAttribute("test", test);
request.setAttribute("lticket",lticket);
И это страница JSP:
Результат представлен в виде чисел в таблице следующим образом:
<table>
<tr>
<th>Etat ticket</th>
<th>Nombre</th>
</tr>
<c:forEach items="${lticket}" var="ticket">
<tr>
<td>${ticket[0]}</td>
<td>${ticket[1]}</td>
</tr>
</c:forEach>
</table>
И это тот тип оленя, который я собираюсь использовать:
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
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]
]);
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
Он находится в голове, я хотел бы знать, на каком языке я должен использовать, чтобы иметь возможность вводить данные, представленные в таблице, в сценарий диаграммы, все, что я знаю, это то, что EL (выражение на языке яз.) Не может быть размещено в сценарии, потому что он интерпретируется в серверной части, а js интерпретируется браузеромNEW SERVLET:`
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
response.setContentType("application/json");
response.setHeader("Cache-Control", "nocache");
response.setCharacterEncoding("utf-8");
List<Object[]> lticket = ticketDao.chargerTicketsParEtat();
PrintWriter out = response.getWriter();
JSONObject json = new JSONObject();
try{
json.put("status", 200);
json.put("msg", "OK");
JSONObject map = new JSONObject();
String nom="Non défini";
long valeur;
for (Object[] result : lticket) {
if((int)result[0]==1)
nom="En attente de prise en charge";
else if((int)result[0]==2)
nom="En attente de validation";
else if((int)result[0]==3)
nom="Cloturé";
else if((int)result[0]==4)
nom="En cours de traitement";
valeur = (long) result[1];
map.put(nom,valeur);
}
json.put("map", map);
}catch(JSONException e){
e.printStackTrace();
}
out.print(json.toString());
request.setAttribute("lticket", lticket);
this.getServletContext().getRequestDispatcher("/NewFile2.jsp").forward(request, response);
}
JSP PAGE:
`<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
var jsonData = [];
$(document).ready(function(){
$.ajax({url: "/test", success: function(result){
jsonData = result.map;
}});
});
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
for (var key in jsonData) {
data.addRow([key,jsonData[key]]);
}
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<div id="chart_div" style="height: 300px; width: 100%;"></div>
</body>
`
1 ответ
Решение
Для части DAO вам не нужно ничего менять.
Для сервлета вы должны вернуть json, как это:
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.json.JSONException;
import org.json.JSONObject;
public class ChartsDataServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws IOException {
response.setContentType("application/json");
response.setHeader("Cache-Control", "nocache");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
JSONObject json = new JSONObject();
try{
json.put("status", 200);
json.put("msg", "OK");
JSONObject map = new JSONObject();
map.put("Mushrooms", 3);
map.put("Onions", 1);
map.put("Olives", 1);
map.put("Zucchini", 1);
map.put("Pepperoni", 2);
json.put("map", map);
}catch(JSONException e){
e.printStackTrace();
}
out.print(json.toString());
}
}
А затем используйте этот сервлет-URL (скажем, chartsDataUrl) на странице, которую вы хотите нарисовать графики.
<html>
<head>
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript">
var jsonData = [];
$(document).ready(function(){
$.ajax({url: "/chartsDataUrl", success: function(result){
jsonData = result.map;
}});
});
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
for (var key in jsonData) {
data.addRow([key,jsonData[key]]);
}
// Set chart options
var options = {'title':'How Much Pizza I Ate Last Night',
'width':400,
'height':300};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<!--Div that will hold the pie chart-->
<div id="chart_div"></div>
</body>
</html>
Дайте знать, если у вас появятся вопросы.