Як запитувати електронну таблицю Google

Кругові діаграми, лінійні графіки та інші види графіки можуть допомогти вам візуалізувати важливі бізнес-дані таким чином, щоб цифри не могли. Якщо ви не малюєте діаграми вручну, для їх створення потрібне спеціальне програмне забезпечення. Також часто вам потрібна база даних для зберігання та отримання даних, необхідних для створення діаграми. Google усуває необхідність підтримувати для цього базу даних, дозволяючи створювати діаграми з електронних таблиць, що зберігаються у вашому обліковому записі Google Документів. Використовуючи безкоштовні бібліотеки інтерфейсу програмування Google, ви можете запитувати будь-яку електронну таблицю та автоматично створювати професійні діаграми.

1.

Запустіть свій веб-переглядач та перейдіть на таку веб-сторінку:

http://spreadsheets.google.com/ccc?key=pCQbetd-CptGXxxQIG7VFIQ

На цій сторінці відображається загальнодоступна електронна таблиця, яка містить чотири стовпці: Країна, Код країни, Населення та Щільність населення. Запропонований вами запит розповсюджує електронну таблицю через Інтернет та повертає його дані на вашу веб-сторінку.

2.

Відкрийте один із своїх документів HTML та додайте наступний код JavaScript після вступного тегу, який з’являється у верхній частині документа ::

Перші два теги сценарію роблять бібліотеку API Google доступною для вашого документа HTML. Тег посилань дозволяє вашому документу використовувати бібліотеку візуалізації Google, яка створює графіки з даних, які ваш код отримує з вашої електронної таблиці Google.

3.

Додайте тег сценарію, показаний нижче після коду, перерахованого на попередньому кроці:

Функція createChart - викликається після завершення функції навантаження - передає кілька параметрів функції візуалізації. У цьому прикладі він передає URL-адресу загальнодоступної електронної таблиці Google, тип діаграми, яку ви бажаєте створити, та ідентифікатор елемента HTML-div, який відображатиме діаграму. Значення змінної chartType - "PieChart", а значення контейнераId - "myChart".

4.

Додайте наступний код після коду, показаного на останньому кроці:

dataWrapper.draw (),}

Цей код малює діаграму і закриває тег сценарію.

5.

Додайте HTML-код, показаний нижче, у розділ тіла документа:

Цей елемент div - чий ідентифікатор відповідає значенню, збереженому в змінній контейнераId - все, що потрібно, щоб діаграма з’явилася на веб-сторінці. Він може відображати будь-який тип діаграми, який ви бажаєте створити. Змініть розміри ширини та висоти - вимірюються в пікселях - на різні значення, щоб відрегулювати розмір діаграми.

6.

Збережіть документ і перегляньте його в браузері. З'являється кругова діаграма та відображає дані, що зберігаються в електронній таблиці Google. Порівняйте діаграму зі стовпцями, які ви переглядали під час перегляду цього документа.

7.

Поверніться до свого документа HTML і змініть значення charterType з "PieChart" на "LineChart". Збережіть документ і поверніться до свого браузера. Натисніть F5, щоб очистити тимчасове зберігання браузера. Ваша веб-сторінка перезавантажується, тепер відображає лінійну діаграму.

8.

Вивчайте зразок коду, поки вам не сподобається, як він працює.

9.

Перейдіть до свого облікового запису Документів Google і відкрийте одну зі своїх електронних таблиць.

10.

Скопіюйте URL-адресу, що відображається в адресному рядку веб-переглядача та поверніться до свого документа HTML. Знайдіть функцію createChart і знайдіть змінну dataSourceUrl. Поруч із цією змінною відображається URL-адреса електронної таблиці Google. Видаліть цю URL-адресу та вставте URL-адресу електронної таблиці. Додайте URL-адресу в окремі лапки, як показано в попередньому прикладі.

11.

Збережіть документ і перегляньте його у своєму браузері після очищення тимчасового зберігання браузера, натиснувши клавішу F5. Тепер діаграма відображає дані з вашої електронної таблиці.

Поради

  • Ваші запити можуть створювати інші типи діаграм, такі як гістограми, діаграми розсіювання та графіки стовпців. Перейдіть на сторінку Інструменти діаграм Google, щоб переглянути типи діаграм, які можна використовувати у своєму HTML-коді. Клацніть одну з діаграм на цій сторінці, щоб переглянути деталі діаграми та ім'я, яке слід використовувати, призначаючи її змінної charterType вашого коду. Ім'я, яке ви використовуєте, як правило, складається з типу назви діаграми з великої літери, що видаляється з імені. Наприклад, щоб створити діаграму області, встановіть значення chartType на AreaChart.
  • Якщо ваша електронна таблиця Google приватна, інші не зможуть переглядати вашу HTML-сторінку. Ви повинні оприлюднити свою електронну таблицю або поділитися нею з тими, кому ви надаєте дозвіл. Якщо вам потрібна допомога в управлінні дозволами Google Документів, відвідайте довідкову сторінку "Про спільний доступ у документах Google".

Follow us

Don't be shy, get in touch. We love meeting interesting people and making new friends.