0

I'm trying to receive data from a MySQL database using a .jsp, put that data into an array, and then send that array to javascript and use the array to populate a graph made through d3.js. I've done some research on how to do the .jsp part, but it doesn't really make much sense to me. I've found little, if anything, about going from java to javascript as well. This is what I currently have:

<%@ page language="java" import="java.sql.*"%>

<html>
    <head>
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v2.js"></script>
            <style type="text/css">
        </style>
    </head>
    <body>

    <%

    Connection con=null;
    ResultSet rst=null;
    Statement stmt=null;

    try{
        String url="jdbc:mysql://localhost:3306/usermaster?    user=root&password=7rubA5Ra";

        int i=1;
        con=DriverManager.getConnection(url);
stmt=con.createStatement();
rst=stmt.executeQuery("select * from test ");

%>
    <script type="text/javascript">

        var dataset = [ 7, 12, 15, 21, 23, 27, 24, 20, 17, 15,
            12, 14, 17, 22, 20, 19, 18, 20, 25, 27 ];
        var w = 500;
        var h = 100;
        var barPadding = 1;
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);
        svg.selectAll("rect")
            .data(dataset)
            .enter()
            .append("rect")
            .attr("id", "rect1")
            .attr("x", function(d, i) {
                    return i * (w / dataset.length);
                })
            .attr("y", function(d) {
                return h - d*4;
            })
            .attr("width", w/ dataset.length - barPadding)
            .attr("height", function(d) {
                return d * 4;
            })
            .attr("fill", function(d) {
                return "rgb(0, 0, " + (d * 10) + ")";
            });

        /*svg.selectAll("rect")
            .data(dataset2)
            .enter()
            .append("rect")
            .attr("id", "rect2")
            .attr("x", function(d, i) {
                    return i * (w / dataset2.length);
            })
            .attr("y", function(d) {
                return h - d*4;
            })
            .attr("width", w/ dataset2.length - barPadding)
            .attr("height", function(d) {
                return d * 4;
            })
            .attr("fill", function(d) {
                return "rgb(0, 100, " + (d * 10) + ")";
            });*/

        svg.selectAll("text")
            .data(dataset)
            .enter()
            .append("text")
            .text(function(d) { 
                return d;
            })
            .attr("x", function(d, i) {
                return i * (w / dataset.length) + 5;
            })
            .attr("y", function(d) { 
                return h - (d * 4) + 15;
            })
            .attr("font-family", "sans-serif")
            .attr("font-size", "11px")
            .attr("fill", "white");
    </script>
</body>

I really just need some one to point me in the right direction. I want the information from the database to be put into the variable dataset.

Thanks, EmptyBox

4

2 回答 2

1

在您希望将其嵌入 JavaScript 的位置周围添加 JSP 标记。

 var dataset = [ 
    <% while (rst!=null && rst.next()) { %>
       <%=rst.getInt("<column name>")%>, 
    <% } %>
    ];
于 2012-05-22T19:09:44.557 回答
0

在您的情况下，最好的办法是使用JSON 库。

第一：在一个JSP页面中通过 ResultSet 从数据库中检索所有数据。
第二：将它们保存在JsonArray中并将数组发送到另一个页面。

最后：在 JavaScript 函数中接收 JsonArray 并使用元素填充
页面中的任何位置。

于 2012-05-23T12:55:04.873 回答