1
Can someone help me? I can’t load the Mysql data in Google Chart...if I use this same code, but in the graphic "Pie", it works, but in line it doesn’t... it draws the chart but not with data...
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
</style>
<title>An Example of a Google Bar Chart</title>
</head>
<body>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
<script type='text/javascript'>//<![CDATA[
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
var queryObject="";
var queryObjectLen="";
$.ajax({
type : 'POST',
url : 'getdata2.jsp',
dataType:'json',
success : function(data) {
queryObject = eval('(' + JSON.stringify(data) + ')');
queryObjectLen = queryObject.empdetails.length;
},
error : function(xhr, type) {
alert('server error occoured');
}
});
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'name');
data.addColumn('number', 'id');
for(var i=0;i<queryObjectLen;i++){
var name = ParseInt(queryObject.empdetails[i].name);
var id = ParseInt(queryObject.empdetails[i].id);
data.addRows([
[name,id]
]);
}
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
geddata.jsp
<%@page import="java.sql.*" %>
<%@page import="java.util.*" %>
<%@page import="org.json.JSONObject" %>
<%
Connection con= null;
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
con = DriverManager.getConnection("jdbc:mysql://localhost:3306/java","root","1234");
ResultSet rs = null;
List empdetails = new LinkedList();
JSONObject responseObj = new JSONObject();
String query = "SELECT * from consumo";
PreparedStatement pstm= con.prepareStatement(query);
rs = pstm.executeQuery();
JSONObject empObj = null;
while (rs.next()) {
int name = rs.getInt("working_days");
//int empid = rs.getInt("id");
int id = rs.getInt("id");
empObj = new JSONObject();
empObj.put("name", name);
//empObj.put("empid", empid);
empObj.put("id", id);
empdetails.add(empObj);
}
responseObj.put("empdetails", empdetails);
out.print(responseObj.toString());
}
catch(Exception e){
e.printStackTrace();
}finally{
if(con!= null){
try{
con.close();
}catch(Exception e){
e.printStackTrace();
}
}
}
%>
This is the return of json:
{"empdetails":[{"name":20,"id":45},{"name":30,"id":100},{"name":50,"id":150},{"name":10,"id":500},{"name":15,"id":600}]}
After a few weeks researching managed to solve, follows below the code, the chart is updated every second...
<title>Google Chart with jsp Mysql Json</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<a href="googlechart3.html"><button>Atualizar dados</button></a>
<script type="text/javascript">
//setTimeout(funcao, 40000);
//document.write('dentro da função');
var queryObject="";
var queryObjectLen="";
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawBasic);
function drawBasic() {
$.ajax({
type : 'POST',
url : 'getdata2.jsp',
dataType:'json',
success : function(data) {
queryObject = eval('(' + JSON.stringify(data) + ')');
queryObjectLen = queryObject.empdetails.length;
},
error : function(xhr, type) {
document.write('server error occoured');
}
});
var data = new google.visualization.DataTable();
data.addColumn('number', 'name');
data.addColumn('number', 'corrente');
for(var i=0;i<queryObjectLen;i++){
var name = parseInt(queryObject.empdetails[i].name);
var id = parseInt(queryObject.empdetails[i].id);
data.addRows([
[id,name]
]);
}
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Corrente'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// First load the chart once
drawBasic();
// Set interval to call the drawChart again
setInterval(drawBasic, 1000);
});
</script>
</head>
<body>
<div id="chart_div" style="width:100; height:300" ></div>
</body>
</html>
From what you’re saying, it seems to be the case mark an answer as accepted. Here we do not write "solved" in the question. If you have an answer that really helped you, mark it as accepted. If you arrived at the solution yourself, post the solution as an answer. So the content is more organized and easy to.
– Denis Rudnei de Souza
I posted the solution found...
– Jovani
Put as an answer to your question, then mark it as accepted, anyone who sees the question on the main page does not know that it has been answered
– Denis Rudnei de Souza