文章/答案/技术大牛

发布

社区首页 >问答首页 >用JSP动态生成谷歌图表

问用JSP动态生成谷歌图表
EN

Stack Overflow用户

提问于 2011-07-08 16:31:07

回答 2查看 6.6K关注 0票数 1

我正在使用Google图表来绘制使用JSP从数据库中提取的值。我现在让它起作用了。data.addColumn语句是在页面加载时从数据库查询生成的。

我的问题是，我还希望有两个组合框，可以用来为x轴选择min和max值，然后更新图形。目前，我认为实现这一目标的唯一方法是使用新的get参数刷新页面。

我宁愿只刷新图表本身，而不重新加载整个页面。这个是可能的吗？有没有一种方法可以覆盖脚本标记，然后重新加载图表？还是有别的办法？

编辑:我很难弄清楚如何将数据从数据库传递到加载页面。这是我的代码：

loader.html (页面保存图表和日期字段)：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load('visualization', '1', {packages: ['corechart']});
    </script>
    <script type="text/javascript">
        function loadChart()
        {
            var xmlhttp;            
            var minDate = document.getElementById('startDate').value;
            var maxDate = document.getElementById('endDate').value;

            if (!minDate)
                minDate = 'none';
            if (!maxDate)
                maxDate = 'none';

            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function()
            {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById('lineChart').innerHTML = xmlhttp.responseText;
                }
            }
            xmlhttp.open("GET", "chart-loader.jsp?min=" + minDate + '&max=' + maxDate, true);
            xmlhttp.send();
        }
    </script>
</head>

<body>
    <div id="container">

        <div id="lineChart"></div>

        <div id="startDateBox">
            <label for="startDate">Min Date:</label>
            <input id="startDate" type="text" />
        </div>
        <div id="endDateBox">
            <label for="endDate">Max Date:</label>
            <input id="endDate" type="text" />
        </div>
        <input type="button" value="Update" id="updateBtn" onclick="loadChart()" />

    </div> <!-- End container -->
</body>
</html>

图表-loader.jsp(应该获取数据并加载图表)

<%@ page import="java.sql.*, java.util.ArrayList" %>
<%      
    Connection conn;

    try {
        Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
        conn = DriverManager.getConnection("jdbc:microsoft:sqlserver://...", "user", "pass");
    }
    catch(SQLException e) 
    {
        out.println("SQLException: " + e.getMessage() + "<br/>");
        while((e = e.getNextException()) != null)
            out.println(e.getMessage() + "<br/>");
        throw new UnavailableException(this, "Cannot connect with the specified database.");
    }

    String data = "";
    String minDate = (String)request.getParameter("min");
    String maxDate = (String)request.getParameter("max");
    try
    {
        ResultSet rs;
        Statement stmt = conn.createStatement();
        if (minDate.equals("none") || maxDate.equals("none")) // First load, use whole table
        {
            rs = stmt.executeQuery("SELECT ...");
        }
        // ... more possible queries

        ArrayList<String> ptVals = new ArrayList<String>();
        ArrayList<String> colDates = new ArrayList<String>();

        while (rs.next())
        {
            ptVals.add(rs.getString("avgvalue"));
            colDates.add(rs.getString("collectiondate"));
        }           
        // ptVals.size()
        for (int i = 0; i < 5; i++)
            data += "\t\t\tdata.addRow(['" + colDates.get(i) + "'," + ptVals.get(i) + "]);\n";  

        // ... Use out.print to spit out script. 
    }
    catch(SQLException e)
    {
        data = "SQLException: " + e.getMessage() + "<br/>";
        while((e = e.getNextException()) != null)
            data += e.getMessage() + "<br/>";           
    }       
    finally
    {   // Clean up resources, close the connection.
        if(conn != null)
        {
            try { conn.close(); }
            catch (Exception ignored) {}
        }
    }
%>

加载图表的原始脚本

<script type="text/javascript">
    function drawVisualization() 
    {
        // Create and populate the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'Temperature');
        data.addRow(["01/01/11", 70.2]);
        data.addRow(["01/02/11", 70.0]);
        data.addRow(["01/03/11", 69.8]);
        data.addRow(["01/04/11", 70.1]);
        // Create and draw the visualization.
        new google.visualization.LineChart(document.getElementById('lineChart')).
            draw(data, {backgroundColor: 'transparent',
                        width: 700, height: 400,
                        legend: 'none',
                        hAxis: {title: 'Dates', titleTextStyle: {color: 'black', fontSize: 12, fontName: 'Verdana, Arial'}},
                        vAxis: {title: 'Temperature', titleTextStyle: {color: 'black', fontSize: 12, fontName: 'Verdana, Arial'}},
                        chartArea: {left: 80, top: 20}
                    }
                );
    }

    google.setOnLoadCallback(drawVisualization);
</script>

谢谢，莱恩

javascript

ajax

jsp

code-generation

google-visualization

回答 2

Stack Overflow用户

回答已采纳

发布于 2011-07-22 20:21:21

我能够让它与谷歌可视化API一起工作。下面是操作步骤：

我有一个HTML页面，其中有一个用于图形的容器div。<div id="lineChart"></div>

接下来，我在HTML页面中有两个JavaScript函数。getChartData()函数是AJAX函数，它从两个输入字段获取日期范围，并将它们发送到JSP。JSP页面使用日期查询数据库中的记录，将其格式化为JavaScript对象，并使用out.print()将其发送回HTML。

一旦HTML页面接收到数据，它就使用eval()将接收到的文本设置为JavaScript对象。最后，数据对象被发送到第二个JavaScript函数，loadChart()，它使用数据调用Google函数并将图表加载到div中。

注意:使用eval()将responseText设置为JavaScript对象才是真正使其工作的原因。这允许您将许多数据传回。回到HTML页面后，只需将它们从JS对象中取出即可。您甚至可以在彼此之间传递几个JS对象。

var paramsObj;
var dataObj;
eval('paramsObj = ' + xmlhttp.responseText + ";");
eval('dataObj = paramsObj.data;');
loadChart(dataObj, paramsObj.title, paramsObj.xLabel);

在本例中，我在一个JS对象中传递三个参数。paramsObj.data是图表数据，它以嵌套对象的形式出现，根据进行格式化。我不得不再次使用eval()将嵌套的JS对象设置为单独的变量，否则它不能正确传递给loadChart()函数。paramsObj.title和paramsObj.xLabel只是字符串。

票数 0

Stack Overflow用户

发布于 2011-07-08 16:34:34

在我工作的地方，我们就是这样做的(我指的是刷新谷歌图表)。我们所做的是在没有图表的情况下加载页面，并将其加载到任何需要放在其中的容器中。然后，当您对其进行任何更改时，让ajax重新加载它，将所需的任何参数发送给JSP (JSP将得到一个新的图表)。

编辑:如果没有意义，图表本身实际上是它自己的JSP，独立地注入页面(并刷新)。

所以我们的过程是：

呈现主页(图表尚未呈现)。在这一页上，我们放了这样的东西：

<div id="chartForData1"></div>

<script>Ajax_inject('chartForData1', 'pageThatGeneratesData1');</script>

其中，Ajax_inject只是Ajax调用的包装器，它将数据加载到元素中。现在，当页面在用户的计算机上呈现时，该Ajax_inject (以及所有其他)将执行，从而将相应的div加载到相应的JSP中。这些JSP的唯一目的是获取几个参数(或者没有参数，并使用默认值)，并为我们提供一个漂亮的google图表。

这更有意义吗？

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/6627526

复制

相似问题

问用JSP动态生成谷歌图表
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用JSP动态生成谷歌图表EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问用JSP动态生成谷歌图表
EN