Указание диаграммы в виде URL-адреса в браузере или тега <img>
называется запросом GET. Сделать запрос GET просто, но URL-адреса GET ограничены 2 КБ символов. Что, если у вас больше данных?
К счастью, 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'>