Google / YouTube Insight в стиле «Интерактивные PNG»?

Question

Я смотрю на функцию YouTube Insight и хочу узнать, как создаются их PNG-диаграммы.

Если у вас есть видео и посмотрите статистику, вы получите кучу PNG-изображений, которые во многих отношениях можно считать интерактивными.Посмотрите на изображение ниже.

Насколько я могу судить, все состоит из изображений PNG.Я ожидал увидеть элементы флэш-памяти, но не вижу.

Например: ползунок, в котором вы выбрали диапазон дат, можно перетаскивать, нажимать, и изображение обновляется динамически без перезагрузки страницы.Я думаю, может быть, сделаны вызовы в стиле ajax, которые заменяют изображение?Насколько я понимаю, это абсолютно незаметно.

Еще один пример: вы можете выбрать страну, нажав на карту мира.Изображения мгновенно обновляются для отображения выбранной демографии.Есть ли что-то простое, например, карты изображений для захвата кликов?

Скриншот Google / YouTube Insight http://www.mattis.st/images/google_insight.png

Мои вопросы:

1).Как вы создаете PNG изображения с информацией из базы данных?Я предпочитаю использовать PHP, так что если вам нравится настраивать ваши ответы в этом направлении.Я не ищу никаких "плагинов" третьей части, кроме, возможно, jQuery.

2).Как они создают «интерактивность» в своих PNG-файлах?

PNG-файлы доступны для интерактивного клика и кликабельности, когда вы проверяете Google Insight для своих собственных видео.Проверка нормальной статистики для видео загружает только статические PNG.

Я знаю об Open Flash Chart и подобных им, однако я хочу создать свой собственный код, чтобы узнать как можно больше и иметь возможность адаптировать код для моегоиспользовать.

Я действительно ценю любые ответы.Пожалуйста, попросите разъяснений, если я неясен.

РЕДАКТИРОВАТЬ: я изучил исходный код Google / YouTube дальше и нашел одно из изображений:

<img src="http://chart.apis.google.com/chart?chs=422x110&amp;cht=lc&amp;chco=808080&amp;chd=s:At9j0jSUPJKMM&amp;chls=1&amp;chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">

, которое выглядит так (сохраненоиз моего действительного сеанса):

Изображение из источника http://www.mattis.st/images/google_insight2.png

Как видите, это фоновое PNG-изображение без полос и наложения выбора диапазона.

Answer 1

<div id="GEOMAP_map" style="">
  <embed type="application/x-shockwave-flash" 
    src="/insights/search/resources/544738731-geomap.swf" 
    width="500" height="310" style="undefined" id="geomap"
    name="geomap" bgcolor="#FFFFFF" quality="high"
    allowscriptaccess="always" wmode="opaque" flashvars="(...)"></div>

Мне кажется, что вспышка.

Answer 2

AFAIK Вам всегда понадобится плагин для генерации изображений из PHP (будь то GD или ImageMagick ).У меня нет никакого опыта работы с ImageMagick, но я знаю, что GD не самая быстрая кошка ... Я бы не рассчитывал на то, что она будет генерировать ваши диаграммы на лету!

И, как подсказываетjustkt, вы можете использовать любую библиотеку js для создания интерактивности.Не требуется необычная вспышка:)

Answer 3

Подумав об этом, еще больше изучив источник и изучив ответы, которые вы, ребята, сделали, я пришел к следующим выводам:

1)PNG создаются с помощью Google Charts API (спасибо, Том!).

2).Интерактивность создается с помощью классного программирования на JavaScript.Полнота этого очень впечатляет, и я постараюсь реализовать что-то похожее в моем проекте.

Спасибо за ваши ответы и ваше время.