display jsp :(此页面调用来自数据库的数据的ajax请求）

<html>
    <head>
    <title>Motion Chart</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="js/jsapi.js"></script>
    <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
        function loadMotionChart(){
        var jsonData = $.ajax({
        url: "./chart-loaders/motion-chart-loader.jsp",
        dataType: "json",
        data:"DB="+'myDB',
        async: false
        }).responseText;
        var obj = jQuery.parseJSON(jsonData);
        var data = new google.visualization.arrayToDataTable(obj);
        var options = {
        title: 'Motion Chart', is3D : true
        };

        var motionchart  = new google.visualization.MotionChart(document.getElementById('motionChart'));
        motionchart.draw(data, options);
    }
    </script>
    </head>
    <body>

    <div id="container">
    <div id="motionBox">                
    <input type="button" value="Load Chart" onclick="loadMotionChart()" />
    </div>
    </div>
    <div id="motionChartContainer">
    <div id="motionChart" style="width: 800px; height: 400px;" />
    </div>
    </body>
</html>

loader jsp :(这个页面是我尝试创建json字符串并传回显示jsp的加载器页面）

<%@ page import="java.sql.*, java.util.*, java.text.*" %>
<%@page import="net.sf.json.JSONObject,net.sf.json.JSONArray"%>
<%      
    Connection conn;
    .
    .
    .
    String data = "[[\"Item\",\"Date\",\"Amt1\",\"Amt2\"],";
    try
    {
        ResultSet rs=null;
        Statement stmt = conn.createStatement();
        monthOffset = "2013-01-01";
        monthLimit = "2013-02-28";
        rs = stmt.executeQuery("select dbo.doGetMotionChartData('" + monthOffset + "','"+monthLimit+"')"); 

        while (rs.next())
        {
            resultData = rs.getString(1);
        }


    itemTokens = new StringTokenizer(resultData, "#");
        itemSize = itemTokens.countTokens();

    // at this point I get whole data as one string("resultData") then I use string tokenizer to split and make data in required format.
    for (int i = 0; i < itemSize; i++){
            tmpitemToken = itemTokens.nextToken("#");
            collectionTokens = new StringTokenizer(tmpitemToken, "|");
            collectionSize = collectionTokens.countTokens();
            for (int j = 0; j < collectionSize; j++){
                tmpCollectionToken = collectionTokens.nextToken("|");
                collectionSplit = tmpCollectionToken.split(",");
                dateSplit = collectionSplit[1].split("-");

        data += "['" + collectionSplit[0] + "'," + "new Date("+dateSplit[2]+","+dateSplit[1]+","+dateSplit[0]+")" + "," + collectionSplit[2] + "," + collectionSplit[3] + "]" + "," ; 
        }
        }
     /*
    final Data = [["Item","Date","Amt1","Amt2"],['Item1',new Date(2013,01,01),618699.88,603694.00],['Item2',new Date(2013,01,01),2650229.78,3124956.02],['Item1',new Date(2013,02,01),179667.66,354520.00],['Item2',new Date(2013,02,01),229715.02,1208445.76]]
    */
     out.print(data);
        out.flush();
    }
    catch(Exception e){
        e.printStackTrace();
    }

Answer 1

嗨，当我使用它时，我总是使用单引号作为文本而没有圆形日期

data.addRows（[ ['PXPP-F-N-D'，新日期（2012,0,01），85336.35,2245.69,1012.70]];

一切顺利百里

PS

我总是使用谷歌的这个例子作为起点https://developers.google.com/chart/interactive/docs/gallery/motionchart

    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Fruit');
    data.addColumn('date', 'Date');
    data.addColumn('number', 'Sales');
    data.addColumn('number', 'Expenses');
    data.addColumn('string', 'Location');
    data.addRows([
      ['Apples',  new Date (1988,0,1), 1000, 300, 'East'],
      ['Oranges', new Date (1988,0,1), 1150, 200, 'West'],
      ['Bananas', new Date (1988,0,1), 300,  250, 'West'],
      ['Apples',  new Date (1989,6,1), 1200, 400, 'East'],
      ['Oranges', new Date (1989,6,1), 750,  150, 'West'],
      ['Bananas', new Date (1989,6,1), 788,  617, 'West']
    ]);

Answer 2

对于动态图表，请修改此行并代替corechart使用motionchart

google.load('visualization', '1', {'packages':['corechart']});

代替PieChart添加MotionChart

var chart= new google.visualization.PieChart(
    document.getElementById('chart-div')
);

请检查此链接.....

Google Chart using JSP, JSON, JQuery, with mysql datasource...

JSP中的Google Motion图表

display jsp :(此页面调用来自数据库的数据的ajax请求）

loader jsp :(这个页面是我尝试创建json字符串并传回显示jsp的加载器页面）

2 个答案: