1

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>
3
  • 1
    Pelo que você está dizendo, parece ser o caso de marcar uma resposta como aceita. Aqui não escrevemos "resolvido" na questão. Se tem uma resposta que realmente te ajudou, marque-a como aceita. Se chegou sozinho à solução, poste a solução como resposta. Assim o conteúdo fica mais organizado e fácil de ser encontrado futuramente por outras pessoas com problemas parecidos. Commented 30/03/2017 às 1:23
  • Eu postei a solução encontrada...
    – Jow
    Commented 31/03/2017 às 15:27
  • Posta como resposta para a sua pergunta, depois marca ela como aceita, quem vê a pergunta pela página principal não sabe que foi respondida Commented 31/03/2017 às 17:24

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .