Untitled

<!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>

<%@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();
            }
        }
    }
 %>

{"empdetails":[{"name":20,"id":45},{"name":30,"id":100},{"name":50,"id":150},{"name":10,"id":500},{"name":15,"id":600}]}

<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>