2019. 4. 3. 14:19ㆍJavaScript
#MemberDao.java 에서의 메소드 추가
|
// 그룹주소에 해당하는 카운트 메소드 public JSONArray getCountAddress() { Connection con = null; PreparedStatement pstmt = null; ResultSet rs = null; String sql = ""; JSONArray jsonArray = new JSONArray();
JSONArray colNameArray = new JSONArray(); // 컬 타이틀 설정 colNameArray.add("주소"); colNameArray.add("인원수"); jsonArray.add(colNameArray);
try { con = H2DBUtil.getConnection(); sql = "SELECT address,COUNT(*) AS cnt FROM member GROUP BY address ORDER BY cnt "; pstmt = con.prepareStatement(sql); rs = pstmt.executeQuery();
while(rs.next()){ JSONArray rowArray = new JSONArray(); rowArray.add(rs.getString("address")); rowArray.add(rs.getInt("cnt"));
jsonArray.add(rowArray); }//while } catch (Exception e) { e.printStackTrace(); }finally { H2DBUtil.closeJDBC(con, pstmt, rs); } return jsonArray; }//getCountAddress |
#JSP에서의 출력
|
<%@page import="org.json.simple.JSONArray"%> <%@page import="dao.MemberDao"%> <%@ page language="java" contentType="application/json; charset=UTF-8" pageEncoding="UTF-8"%> <% MemberDao memberDao = MemberDao.getInstance(); JSONArray jsonArray = memberDao.getCountAddress(); //out.println(jsonArray); %> <%= jsonArray %> |
#HTML에서의 출력
|
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ColumnChart1</title> <script src="../js/jquery-3.3.1.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://www.gstatic.com/charts/loader.js"></script> <script> //구글 시각화 API를 로딩하는 메소드 google.charts.load('current', {packages: ['corechart']});
// 구글 시각화 API가 로딩이 완료되면, // 인자로 전달된 콜백함수를 내부적으로 호출하여 차트를 그리는 메소드 // 화면이 실행될때 함께 실행된다. // google.charts.setOnLoadCallback(drawChart);
/* 30초마다 재갱신 google.charts.setOnLoadCallback(function(){ setInterval(columnChart1(),30000);
}); */
// 묶은 세로 막대형 차트 1 function columnChart1(arrayList) { // 실 데이터를 가진 데이터테이블 객체를 반환하는 메소드 var dataTable = google.visualization.arrayToDataTable(arrayList); // 옵션객체 준비 var options = { title: '거주지 별 인원수', hAxis: { title: '거주지', titleTextStyle: { color: 'red' } } }; // 차트를 그릴 영역인 div 객체를 가져옴 var objDiv = document.getElementById('column_chart_div1'); // 인자로 전달한 div 객체의 영역에 컬럼차트를 그릴수 있는 차트객체를 반환 var chart = new google.visualization.ColumnChart(objDiv); // 차트객체에 데이터테이블과 옵션 객체를 인자로 전달하여 차트 그리는 메소드 chart.draw(dataTable, options); } // drawColumnChart1()의 끝
// 버튼 동작 $(document).ready(function(){ $('button').on('click', function(){ $.ajax({ url:'columnChart1.jsp', success:function(result){ columnChart1(result); } }); }); }); </script> </head> <body> <button type="button" id="btn">버튼</button> <div id="column_chart_div1" style="width: 900px; height: 500px;"></div> </body> </html> |
'JavaScript' 카테고리의 다른 글
| 이메일 전송하기(파일 첨부기능) (0) | 2019.04.04 |
|---|---|
| 이메일 전송하기 (0) | 2019.04.04 |
| Chart(표) 사용하기 [막대그래프,ColumnChart] (0) | 2019.04.03 |
| JSON 의 DB연동(AJAX 사용) (0) | 2019.04.03 |
| jQuery 적용하기 (0) | 2019.03.27 |