alguém poderia me ajudar? Não consigo carregar os dados do Mysql no Google Chart...se eu uso este mesmo código, mas no "Pie" gráfico, ele funciona, mas no de linhas não... ele desenha o gráfico mas não com dados...
<!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();
}
}
}
%>
Esse é o retorno do json:
{"empdetails":[{"name":20,"id":45},{"name":30,"id":100},{"name":50,"id":150},{"name":10,"id":500},{"name":15,"id":600}]}
Depois de algumas semanas pesquisando consegui resolver, segue abaixo o código, o gráfico é atualizado a cada segundo...
<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>