Populating a Javascript array using MYSQL and JSP

Question

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

@Andreas It's a randomly generated password that I use for development/stuff I don't need to keep to myself — user1410980
– user1410980, Commented May 22, 2012 at 19:10

bluedevil2k · Accepted Answer · 2012-05-24 19:28:57Z

1

Add the JSP tags around where you want to embed it into the JavaScript.

 var dataset = [ 
    <% while (rst!=null && rst.next()) { %>
       <%=rst.getInt("<column name>")%>, 
    <% } %>
    ];

edited May 24, 2012 at 19:28

answered May 22, 2012 at 19:09

bluedevil2k

9,5018 gold badges45 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1410980 Over a year ago

Is there something I need to import to use those statements? I get a 'method is undefined for type ResultSet for both of those statements.

bluedevil2k Over a year ago

Sorry, I was just using pseudo-code for the ResultSet code. The right functions are: while (rst != null && rst.next()) and rst.getInt("<your column name>")

user1410980 Over a year ago

Oh, haha! Thanks. I'm really struggling with this. I should be able to get it working now. Thanks again!

mukund · Accepted Answer · 2012-05-23 12:55:04Z

0

Best thing to do in your case is to JSON Library.

First: in a JSP page retrieve all data from database through ResultSet.
Second: keep those in an JsonArray and send the array to another page.

Finally: Receive the JsonArray in a JavaScript function and use the elements to populate
anywhere in the page.

answered May 23, 2012 at 12:55

mukund

2,9845 gold badges36 silver badges42 bronze badges

Collectives™ on Stack Overflow

Populating a Javascript array using MYSQL and JSP

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related