Question

我需要显示一个实时绘图列图，它应该在每次访问数据库时自行更改，使用java servlet和netbeans中的jsp。我不了解如何在每次特定时间间隔内集成数据库值的获取并在列图中显示用于将数据库提取到jsonarray

Connection con = null;
try {
    Class.forName("com.mysql.jdbc.Driver");
    con = DriverManager.getConnection("jdbc:mysql://localhost:port/databasename","root","password");

    ResultSet rs = null;
    List Healthdetails = new LinkedList();
    JSONObject responseObj = new JSONObject();

    String query = "select * from data";
      PreparedStatement pstm= con.prepareStatement(query);

       rs = pstm.executeQuery();
       JSONObject hObj = null;

    while (rs.next()) {
                          //String name = rs.getString("name");
        int pulid = rs.getInt("pulse");
        hObj = new JSONObject();
        //empObj.put("name", name);
        hObj.put("pulseid", pulid);
        Healthdetails.add(hObj);
    }
    responseObj.put("Healthdetails", Healthdetails);
out.print(responseObj.toString());
}
catch(Exception e){
    e.printStackTrace();
} finally {
    if (con!= null) {
        try {
        con.close();
        } catch(Exception e) {
            e.printStackTrace();
        }
    }
}

json数组显示完美，但我不知道如何将其集成以显示实时图形

用于显示图形，但我不知道这是否正确，关于如何集成获取的jsonarray

<html>
<head>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function() {
    var dataPoints = [];
    var chart;
        var xval=0;
        var yval=0;
        $.getJSON("http://localhost:8080/healthcare/new.jsp", function(data) {  
        $.each(data, function(key,value){
            dataPoints.push({x:xval , y: value[0]});
        });
        chart = new CanvasJS.Chart("chartContainer",{
            title:{
                text:"Live Chart with dataPoints from External JSON"
            },
            data: [{
                type: "line",
                dataPoints : dataPoints,
            }]
        });
        chart.render();
        updateChart();
    //});
    });
    function updateChart() {
    $.getJSON("http://localhost:8080/healthcare/new.jsp", function(data) {
        $.each(data, function(key, value) {
                        yVal=value['pulse'];
            dataPoints.push({
            x:xVal,     y: yVal});
                        xVal++;
        if (dataPoints.length >  10 )
        {
            dataPoints.shift();             
        }


        });
        chart.render();
        setTimeout(function(){updateChart()}, 2000);
    });
    }
}
</script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>
</body>
</html>

在jsp

0 个答案: