понедельник, 21 ноября 2011 г.

Создание инфографики в google code




Привет, красавчики =)

Никогда не сомневался в амбициях и крутости Гугла, и проект code.google.com это в очередной раз подтверждает.

Я думаю столько типов чартов вы не видели никогда. Предлагаю пошаговую инструкцию по использованию этого замечательного инструмента.


В арсенале этого монстра можно создавать все популярные диаграммы. Помимо этого предлагается функционал для создания dashboards (дашбордов), интерактивной инфоргафики и карт.




Если Вы не программист, то всё равно сможете разобраться в системе.

  • Кликаем Get Started



Вас перекинет на страницу
   Quick Start
  Here's a simple example of a page that displays a pie chart

  •  Кликаем на ссылку pie chart  

Вас перекинет на страницу
   Visualization: Pie Chart
  • Листаем страницу и ищем следующее

Code it yourself on the Visualization Playground
  • Переходим по ссылке Visualization Playground



Таблица слева это библиотека со всевозможными видами диаграмм
Таблица справа это окно редактирования кода

Рассмотрим Pie Chart (круговая/пирожковая диаграмма), так любимая американскими менеджерами


Допустим, нам нужно показать распределение выручки от реализации одежды
  • Пусть рынок выглядит следующим образом

Детская   35%
Мужская  40%
Женская  25%



  • Ищем в коде функцию data.addRows(5); и заменяем эту строчку на data.addRows(3); чтобы взять три кусочка

Далее по пунктам
   addRows - добавление строчек
  addColumn - добавление столбцов

  1.  Создали таблицу и заполнили её поля - Детям 35 и Мужчинам 40, Женщинам 25. Так же мы удалили строчки, которые заполняют несозданные поля.
  2. Ждем Debug, а затем Run
  3. Наблюдаем как создается круговая диаграмма
В итоге мы только меняем тег title, который отвечает за название диаграммы и всё готово.






Спасибо, что делитесь с друзьями


Понравилась статья? Пожалуйста, поделитесь!

Не упускайте ничего. Оставайтесь в курсе!

Мы ценим, что ты подписан на нас.

Позвольте себе высказать личное мнение в комментариях

comments powered by HyperComments

Related Posts Plugin for WordPress, Blogger...

Нужна инфографика?

Заказать

Самое свежее здесь. Присоединяйся!