Указание диаграммы в виде URL-адреса в браузере или <img> называется запросом GET. Сделать запрос GET просто, но URL-адреса GET ограничены 2K символами. Что делать, если у вас есть больше данных, чем это?
К счастью, Chart API поддерживает HTTP POST для запросов диаграмм длиной до 16 КБ. Компромисс заключается в дополнительной сложности использования POST.
Вот пример самого простого типа POST-запроса: использование элемента <form> :
Эта диаграмма на самом деле является страницей, размещенной в <iframe> . Вот код формы:
<form action='https://chart.googleapis.com/chart' method='POST'> <input type="hidden" name="cht" value="lc" /> <input type="hidden" name="chtt" value="This is | my chart" /> <input type='hidden' name='chs' value='600x200' /> <input type="hidden" name="chxt" value="x,y" /> <input type='hidden' name='chd' value='t:40,20,50,20,100'/> <input type="submit" /> </form>
Ответ на действительный запрос POST представляет собой диаграмму PNG, такую же, как и ответ на запрос GET.
Существует несколько способов использования POST, и все они требуют дополнительного кодирования либо в коде страницы, либо на сервере, на котором размещается страница. Чтобы использовать POST, вы обычно создаете отдельную страницу для каждой диаграммы и встраиваете или ссылаетесь на эти страницы на своей главной странице с помощью тегов <iframe> или <img> , как показано ниже.
Вот примеры использования POST как с JavaScript, так и с PHP.
Использование JavaScript для POST-запроса
Самый простой способ выполнить POST-запрос JavaScript — создать страницу, на которой размещена форма с данными диаграммы в элементах <input> , и выполнить POST-запрос страницы в своем обработчике onLoad() , и страница будет заменена диаграммой. PNG. Страница, на которой размещена эта диаграмма, должна включать эту страницу с помощью <iframe> . Вот код страницы диаграммы:
post_chart.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='application/javascript'>
// Send the POST when the page is loaded,
// which will replace this whole page with the retrieved chart.
function loadGraph() {
var frm = document.getElementById('post_form');
if (frm) {
frm.submit();
}
}
</script>
</head>
<body onload="loadGraph()">
<form action='https://chart.googleapis.com/chart' method='POST' id='post_form'>
<input type='hidden' name='cht' value='lc'/>
<input type='hidden' name='chtt' value='This is | my chart'/>
<input type='hidden' name='chs' value='300x200'/>
<input type='hidden' name='chxt' value='x'/>
<input type='hidden' name='chd' value='t:40,20,50,20,100'/>
<input type='submit'/>
</form>
</body>
</html> Если вы используете элемент <form> , вам не нужно URL-кодировать ваши строки (хотя вам все равно нужно будет использовать специальные символы, такие как |, чтобы создать возврат каретки в заголовках диаграмм).
Затем эту диаграмму можно загрузить на другую страницу с помощью <iframe> на главной странице, например:
другая_страница.html
<iframe src="post_chart.html" width="300" height="200"></iframe>
Использование PHP для POST-запроса
Большинство серверных языков поддерживают явные запросы POST. Вот пример создания POST-запроса с использованием PHP. В этом примере демонстрируется страница, которая создает линейную диаграмму со 150 случайными значениями. Чтобы использовать это самостоятельно, вы должны настроить массив $chart , чтобы включить свои собственные значения.
chartserver-image.php
<?php
// Create some random text-encoded data for a line chart.
header('content-type: image/png');
$url = 'https://chart.googleapis.com/chart';
$chd = 't:';
for ($i = 0; $i < 150; ++$i) {
$data = rand(0, 100000);
$chd .= $data . ',';
}
$chd = substr($chd, 0, -1);
// Add data, chart type, chart size, and scale to params.
$chart = array(
'cht' => 'lc',
'chs' => '600x200',
'chds' => '0,100000',
'chd' => $chd);
// Send the request, and print out the returned bytes.
$context = stream_context_create(
array('http' => array(
'method' => 'POST',
'content' => http_build_query($chart))));
fpassthru(fopen($url, 'r', false, $context));
?> Встроить эту диаграмму проще, чем пример JavaScript, потому что вы можете просто указать на свою страницу POST с помощью <img> , как показано здесь:
другая_страница.html
<img width='600' height='200' src='chartserver-image.php'>