Тайм-аут запроса html источника данных Google chartapi истек - PullRequest
Новая
       16

Тайм-аут запроса html источника данных Google chartapi истек

0 голосов
/ 23 июня 2011

Я просто пытаюсь реализовать то, что, по моему мнению, является примером пользовательского HTML-источника данных Google. Я явно что-то упускаю, но не могу этого увидеть.

Цель состоит в том, чтобы моя страница по умолчанию извлекала данные таблицы из моего собственного источника данных и составляла их схему.

Я получаю сообщение об ошибке: в конечном итоге отображается диалоговое окно тайм-аута.

У меня есть два файла default.htm и data.htm. В течение некоторого времени это также будет на соответствующем веб-сайте. (Www.ichoosewellness.com/chartapitest).

default.htm: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <script type="text/javascript" src="https://www.google.com/jsapi"></script>  

     <script type="text/javascript">
        google.load('visualization', '1', { packages: ['corechart'] });

     </script>  

     <script type="text/javascript">

        function drawVisualization() {
            // Replace the data source URL on next line with your data source URL.
            var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html');
            // Send the query with a callback function.
            query.send(handleQueryResponse);
        }

        function handleQueryResponse(response) {

            if (response.isError()) {
                alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
                return;
            }

            var data = response.getDataTable();

            // Create and draw the visualization.
            var comboChart = new google.visualization.ComboChart(document.getElementById('chart_div'));
            comboChart.draw();

            var div = document.getElementById('chart_div');
            div.style.backgroundColor = 'red';
        }

        google.setOnLoadCallback(drawVisualization);

        var div = document.getElementById('chart_div');
        div.style.backgroundColor = 'red';


     </script>

</head>

<body>

    <div id='chart_div' style="width: 500px; height: 250px; border: 1px solid green;">

    </div>

</body>

</html>

data.htm 

  <html>
<body>
    <table border='1' cellpadding='2' cellspacing='0'>
        <tr style='font-weight: bold; background-color: #aaa;'>
            <td>
                label 1
            </td>
            <td>
                label 2
            </td>
        </tr>
        <tr bgcolor='#f0f0f0'>
            <td align='right'>
                1
            </td>
            <td>
                a
            </td>
        </tr>
        <tr bgcolor='#ffffff'>
            <td align='right'>
                2
            </td>
            <td>
                b
            </td>
        </tr>
        <tr bgcolor='#f0f0f0'>
            <td align='right'>
                3
            </td>
            <td>
                c
            </td>
        </tr>
        <tr bgcolor='#ffffff'>
            <td align='right'>
                4
            </td>
            <td>
                d
            </td>
        </tr>
    </table>
</body>
</html>

1 Ответ

0 голосов
/ 14 сентября 2011

Этот вопрос довольно старый, но я добавлю то, что узнал об этом, так как у меня была похожая проблема.

В основном я пытался заставить google.visualization.Query () вызвать мой сервис WCF REST и вернуть ему json dataTable.Каждый раз, когда выполняется запрос, он выдаст ошибку тайм-аута, даже если запрос GET выполнен успешно.Виновником оказалось форматирование строки ответа и разрешений между доменами.

Формат ответа очень специфичен и выдает ошибку тайм-аута, если не будет правильно определен.Вы должны просмотреть формат ответа с помощью зубного гребня и прочитать подробную документацию ниже.

Вот URL, который подробно объясняет правильный формат: http://code.google.com/apis/chart/interactive/docs/dev/implementing_data_source.html 1

Во-вторых, не забывайте о разрешении межсайтового домена. Поскольку я тестировал с localhost: 63532 и вызывал службу REST, расположенную на localhost: 63002, они не были одинаковыми.домен и не запрашивался. Для тестирования мне нужно было добавить следующее в заголовок ответа. 

Access-Control-Allow-Origin:http://localhost:63532

Эти два элемента были ключом к преодолению ошибки тайм-аута.

ВВ случае, когда ваш код вызывает HTML, если вы прочитали связанную документацию выше, там есть раздел, описывающий формат ответа HTML. Вот соответствующий текст:

Если в запросе указано: html,Ответ должен быть страницей HTML, определяющей таблицу HTML с данными. Это полезно для отладки вашего кода, потому что браузер может отобразить ваш результат вчитаемый формат напрямую.Вы не можете отправить запрос для ответа HTML с помощью объекта google.visualization.Query.Вы должны сделать запрос для ответа HTML, используя пользовательский код или набрав URL, похожий на этот, в своем браузере:

Поскольку в своем коде вы пытаетесь это сделать: 

var query = new google.visualization.Query('http://www.ichoosewellness.com/chartapitest/data.htm?tqx=reqId:1;out:html');

Из документации видно, что это не поддерживается функцией запроса.

...