How to show informations in graphs using jsp and CanvasJS? - sql

Question

I need to draw graphs with my sql server data .
So I have my servlet that select all data I need and transform it to json , then I forward all data to my jsp.
what I want is to show information like names in my pie graph .
this is my servlet :
PreparedStatement ps = c.prepareStatement("select SUM(ChiffreAffaire)as CA,M500_NOM from V502_client where Annee=? and Mois=2 group by M500_NOM");
ps.setString(1, name);
ResultSet resultSet = ps.executeQuery();
while(resultSet.next()){
yVal = resultSet.getFloat("CA");
nom=resultSet.getString("M500_NOM");
map = new HashMap<Object,Object>(); map.put("x", nom);map.put("y",yVal); list.add(map);
dataPoints = gsonObj.toJson(list);
}
request.getSession().setAttribute("data", dataPoints);
RequestDispatcher rd = request.getRequestDispatcher("graph.jsp");
rd.forward(request, response);
and this is the script to show my graph :
<script type="text/javascript">
<% String shared1 = (String)request.getSession().getAttribute("data");%>
window.onload = function() {
var chart = new CanvasJS.Chart("chartContainer", {
animationEnabled: true,
exportEnabled: true,
title: {
text: "Représentation graphique"
},
data: [{
type: "pie", //change type to bar, line, area, pie, etc
showInLegend: "true",
startAngle: 40,
dataPoints: <%out.print(shared1);%>
}]
});
chart.render();
}
</script>
<div id="chartContainer" style="height:370px; width:600px;"></div>
The result of this is shown like :
I want to be like this :

Answer 1

Try to define legendText on your dataset and indicate, which property contains the label ('x' in your case).
data: [{
type: "pie",
showInLegend: true,
legendText: "{x}",
startAngle: 40,
dataPoints: <%out.print(shared1);%>
}]
Please note that every label (x property) should be different for a pie chart.