up vote 0 down vote favorite

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

share|improve this question
1  
Do you use this password in more than one place? :) – Andreas May 22 at 19:00
@Andreas It's a randomly generated password that I use for development/stuff I don't need to keep to myself – user1410980 May 22 at 19:10
feedback

2 Answers

up vote 1 down vote

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>")%>, 
    <% } %>
    ];
share|improve this answer
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. – user1410980 May 22 at 19:32
1  
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>") – bluedevil2k May 22 at 19:39
Oh, haha! Thanks. I'm really struggling with this. I should be able to get it working now. Thanks again! – user1410980 May 22 at 20:28
feedback
up vote 0 down vote

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.

share|improve this answer
feedback

Your Answer

 
or
required, but never shown
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.