Диаграмма Google Motion в JSP

Я перехожу по ссылке диаграммы движения Google, однако я использую jsp для генерации данных и передачи этих данных в загрузчик jsp (запрос jquery ajax). Ниже мой код. Пожалуйста, помогите мне исправить это.

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>

загрузчик 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();
    }

google-visualization jsp
person street hawk    schedule 07.02.2013    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Привет, когда я использовал это, я всегда использовал одинарные кавычки для текста и никаких круглых дат.

data.addRows([['PXPP-F-N-D',новая дата (2012,0,01),85336.35,2245.69,1012.70]]);

Всего наилучшего Барри

PS

Я всегда использую этот пример из Google в качестве отправной точки 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']
    ]);
person Barry    schedule 12.02.2013
comment
Привет, Барри, я отредактировал свой вопрос. пожалуйста, проверьте еще раз сейчас. Спасибо - person street hawk; 14.02.2013
comment
Какую ошибку вы получаете? Можно ли увидеть, как будет выглядеть окончательный HTML-код, который будет отправлен в API? Извините, я не парень из JSP. Просто надеялся, что это будет так же просто, как соответствие формату, установленному Google. Ваш [Item,Date,Amt1,Amt2] противоречил способу, установленному Google, и тому, как я его использовал. Я человек Oracle plsql, который просто подумал, что может помочь. - person Barry; 15.02.2013
comment
is3D : true Я не думаю, что это подходящий вариант для диаграммы движения. Как и название, это взято из примера круговой диаграммы? - person Barry; 15.02.2013
comment
этот сайт помогает? sites.google.com/site/youvisualize/motion- диаграмма --- json-от-url - person Barry; 15.02.2013
comment
да, Барри, ты прав. Первоначально я работал с круговой диаграммой, и когда я закончил (успех) с ней, я перешел на диаграмму движения. Я не думаю, что 3D является проблемой. Ошибка переоценки, моя страница не выдает никаких ошибок, так как код выходной страницы находится в javascript. В любом случае, ваша ссылка выше является хорошей. Позвольте мне поработать над этим. Спасибо. - person street hawk; 18.02.2013

arrow_upward
1
arrow_downward

Для графика движения отредактируйте эту строку и вместо corechart используйте motionchart

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

и вместо PieChart добавить MotionChart

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