Предыдущий пост, посвященный построению диаграмм с помощью веб-сервиса Hohli Online Charts Builder, навел на размышления о том, что где-то должен быть такой же простой, но еще более универсальный способ онлайн-визуализации данных, доступный для применения каждому, и вместе с тем достаточно мощный, чтобы удовлетворить самые изысканные эстетические потребности. Как оказалось, такой способ действительно есть. Это - Google Chart Tools (Google-диаграммы).
Google Chart Tools позволяет без чрезмерных усилий и затрат времени встраивать в веб-страницы и блоги самые разнообразные профессионально оформленные диаграммы практически на любой вкус. Правда, для этого нужно иметь доступ к исходному коду веб-страницы, куда будет вставляться диаграмма.
Чтобы вставить в ваш сайт или блог диаграмму из коллекции Google Chart Tools нужно проделать несколько простых шагов.
Шаг 1. Посетите Charts Gallery - галерею диаграмм Google, которая находится среди многого прочего в разделе Google code, предназначенном, преимущественно для специалистов. Хотя в этот раздел обычно заглядывают лишь веб-разработчики, не бойтесь, вам не придется ничего программировать. В Google Charts Gallery представлены образцы стандартных диаграмм, коды которых разработаны специалистами Google, и без проблем вставляются в любую веб-страницу, а также дополнительные диаграммы (Additional Charts), среди которых можно найти весьма причудливые образцы.
Шаг 2. Выберите понравившийся образец диаграммы, например, круговую диаграмму (Pie Chart). Щелкнув мышью по гиперссылке Pie Chart в заголовке диаграммы, вы перейдете на страницу, где будет представлен образец диаграммы и ее исходный код, который послужит шаблоном для создания вашей диаграммы:
Шаг 3. Чтобы приспособить этот код для ваших нужд, скопируйте его в Блокнот или другой аналогичный текстовый редактор. На рисунке красными рамочками выделена та часть кода, которая нам понадобиться. Остальное удалите. Код в верхней рамочке отвечает за построение диаграммы, но на странице не отображается. Код в нижней рамочке отвечает за отображение диаграммы на веб-странице.
Шаг 4. Отредактируйте код в верхней рамочке, заменив демонстрационные данные на свои. Если внимательно рассмотреть этот код, то совсем нетрудно понять что там к чему. Если непонятно, пишите в комментарии. Отредактированный код вставьте в код своей веб-страницы или блога. Лучше разместить его как можно ближе к началу страницы. Хотя можно и в любом месте, главное, не ниже, чем код в нижней рамочке. Код в нижней рамочке не изменяйте. Вставьте его в код веб-страницы там, где должна отображаться диаграмма. Например, такая, как эта:
В разделе Additional Charts можно найти вот такие нестандартные диаграммы.
Редактируя код шаблона, будьте внимательны. Случайно удалив кавычку или скобку вы сделаете код неработоспособным.