Could anyone help me? I can not load the data from Mysql in Google Chart ... if I use this same code, but in the "Pie" chart, it works, but in the non-line ... 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><divid="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 searching I was able to solve it, the code below follows, the graph 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><scripttype="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><scripttype="text/javascript" src="https://www.google.com/jsapi"></script><ahref="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>