open flash chart--6

?

JOFC2 - 第五個範例

The materials presented in this web page is provided as is and is used solely for educational purpose. Use at your own risks.
Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu

我們假設你已經依據之前的文章完成的 OFC2 的安裝工作，也了解之前 OFC2 和 JSP 的合用方式。如果你熟悉 JSP 或者 Java servlet，但是不清楚 JSP/servlet 的生命週期，請仔細閱讀 JSP 的生命週期。由於我們在這個範例中不再使用亂數產生器來產生亂數，而是利用資料庫中現有的資料來呈現，而且我們使用的資料庫管理系統是 MySQL，我們假設讀者已經依據 MySQL Server 簡介 中介紹的方式，完成了 MySQL 的安裝，並且已經新增了所需要的使用者（jlu）、資料庫（eric），以及其表格（Product）。如果讀者依據本文的介紹完成程式，顯示的畫面如下：

在進一步說明範例之前，我們要先說明的是：我們只針對跟之前不同的地方進行說明，相同的部分就不再贅述！

1. 由於要與資料庫連接，我們需要下列敘述：

   import java.sql.*;

2. 跟 MySQL Server 簡介 中介紹的程式碼類似，跟資料庫連接，我們需要完成載入 JDBC 驅動程式，利用該驅動程式與資料庫產生連線，經由連線產生執行 SQL 語法的 Statement 物件，然後利用 Statement 物件來執行 SQL 語法，最後處理 SQL 的結果。其相關的程式碼如下：

   // 載入 MySQL JDBC 驅動程式
       Class.forName("com.mysql.jdbc.Driver");
   
       // 產生程式與資料庫之間的連線
       conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1/eric","jlu",PWD);
   
       // 產生用來執行 SQL 語法的 Statement 物件
       stmt = conn.createStatement();
   
       // 執行 Query
       ResultSet rs = stmt.executeQuery(qSQL);
   
       // 將查詢結果一筆一筆的取出來，並加入圖中
       while(rs.next()) {
         bar1.addValues(rs.getInt(1));
         bar2.addValues(rs.getInt(3));
   
         // 加 XAxis 的標籤
         labels.addLabels(rs.getString(2));
       }
   
       // ....
     } catch (Exception e) {
       System.out.println("Exception Occurs: " + e);
     } finally {
       try {
         stmt.close();
       } catch(Exception e) {
         System.out.println("Close error.");
       }
     }

3. 為了完整性，我們將完整的 JSP 程式碼列示如下：

   <%@page  contentType="text/plain" pageEncoding="UTF-8"
           import="jofc2.*,java.sql.*,jofc2.model.*,jofc2.model.elements.*,jofc2.model.axis.*,jofc2.model.elements.BarChart.*"%>
   
   <%!
       private Connection conn = null;
   
       public void jspInit() {
         try {
           Class.forName("com.mysql.jdbc.Driver");
           conn = DriverManager.getConnection("jdbc:mysql://127.0.0.1/eric",UID,PWD);
         }
         catch (Exception e) {
           System.out.println("Fail to connect to database.");
         }
       }
   
       public void jspDestroy() {
         try {
           conn.close();
         } catch (Exception e) {
           System.out.println("Fail to close connection.");
         }
       }
   %>
   
   <%
     // query 字串
     String qSQL = "select qty,name,price from Product";
   
     Chart cht = new Chart("存貨量長條圖");
     XAxis labels = new XAxis();
     YAxis range = new YAxis();
     range.setRange(0,210,10);
     cht.setYAxis(range);
     BarChart bar1 = new BarChart(BarChart.Style.NORMAL);
     BarChart bar2 = new BarChart(BarChart.Style.NORMAL);
     bar1.setColour("#669900");
     bar2.setColour("#6666FF");
     bar1.setText("存貨量");
     bar2.setText("價格");
   
     Statement stmt = null;
     try {
       stmt = conn.createStatement();
       ResultSet rs = stmt.executeQuery(qSQL);
   
       while(rs.next()) {
         bar1.addValues(rs.getInt(1));
         bar2.addValues(rs.getInt(3));
   
         // 加 XAxis 的標籤
         labels.addLabels(rs.getString(2));
       }
   
       cht.addElements(bar1,bar2);
       cht.setXAxis(labels);
   
       out.println(cht.toString());
     } catch (Exception e) {
       System.out.println("Exception Occurs: " + e);
     } finally {
       try {
         stmt.close();
       } catch(Exception e) {
         System.out.println("Close error.");
       }
     }
   %>

Last Updated: Written by: 國立中興大學資管系呂瑞麟 Eric Jui-Lin Lu