Google data studio

Pie chart

A pie chart is a circular chart which is divided into slices
to illustrate numerical proportion. A pie chart is created with
.

piechart.html

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      google.charts.load('current', {'packages':});

      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {

      var data = new google.visualization.DataTable();
        data.addColumn('string', 'Fruit');
        data.addColumn('number', 'Quantity');
        data.addRows(,
          ,
          ,
          
        ]);

        var options = {
            'title': 'Fruits',
            'titleTextStyle': {
                'fontSize': '22', 
            },
            'width':500,
            'height':400
        };

        var chart = new google.visualization.PieChart(document.getElementById('mychart'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <div id="mychart"></div>
  </body>
</html>

The example creates a pie chart.

var data = new google.visualization.DataTable();
  data.addColumn('string', 'Fruit');
  data.addColumn('number', 'Quantity');
  data.addRows(,
      ,
      ,
      
]);

In the chart we show the proportions of available fruits.

var options = {
    'title': 'Fruits',
    'titleTextStyle': {
        'fontSize': '22', 
    },
    'width':500,
    'height':400
};

In the chart options, we set the chart title, change the default
title font size, and set the size of the chart.

var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

The pie chart is created with .

Figure: Pie chart

In this tutorial we have created scatter, line, and pie charts with Google charts library.

Шаблон Google Таблиц для приоритезации SEO

В наши дни большинство компаний представлены в Интернете, и если у вас есть веб-сайт, вам нужно изучать и отслеживать свои усилия по поисковой оптимизации, чтобы оставаться впереди в игре

Вот таблица Google от команды Moz для управления SEO вашего сайта, но, что более важно, расставляйте приоритеты задач и следите за процессом

Внизу есть несколько вкладок, которые лучше объяснены в сообщении выше. Большинство из них говорят сами за себя. Существует панель, которая действует как обзор и приоритеты SEO, где вы можете отслеживать важные задачи SEO. Затем есть временная шкала, которая дополнительно разделена на дни и недели. Вы также можете отслеживать проблемы с сайтом в отдельной таблице, когда роботы Google сканируют.

Круговая диаграмма

Вот простой пример страницы, которая отображает круговую диаграмму:

<html>
  <head>
    <!--Load the AJAX API-->
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type="text/javascript">

      // Load the Visualization API and the corechart package.
      google.charts.load('current', {'packages':});

      // Set a callback to run when the Google Visualization API is loaded.
      google.charts.setOnLoadCallback(drawChart);

      // Callback that creates and populates a data table,
      // instantiates the pie chart, passes in the data and
      // draws it.
      function drawChart() {

        // Create the data table.
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Topping');
        data.addColumn('number', 'Slices');
        data.addRows(,
          ,
          ,
          ,
          
        ]);

        // Set chart options
        var options = {'title':'How Much Pizza I Ate Last Night',
                       'width':400,
                       'height':300};

        // Instantiate and draw our chart, passing in some options.
        var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>

  <body>
    <!--Div that will hold the pie chart-->
    <div id="chart_div"></div>
  </body>
</html>

Как отформатировать встроенный лист Google

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

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

Все эти проблемы с форматированием станут более очевидными, когда вы встроите свою таблицу Google на свой веб-сайт. Но заблаговременное планирование и структурирование вашей электронной таблицы так, чтобы она хорошо помещалась на вашей веб-странице, сэкономит вам много времени на проб и ошибок.

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

Когда вы закончите, вы должны отформатировать и отформатировать лист именно так, как вы хотите, чтобы он выглядел на вашем веб-сайте.

Помните, что проще встроить всего один лист с одной вкладки. Вы можете опубликовать всю электронную таблицу, но она будет включать вкладки на вашей странице и может сделать навигацию по электронной таблице слишком сложной для посетителей вашего веб-сайта. Поэтому мы рекомендуем хранить всю информацию на вкладке, которую вы хотите встроить на свой веб-сайт.

Вкладка Выравнивание

Переходим на вкладку Выравнивание. Здесь задается расположение числа или текста внутри ячейки: по вертикали, горизонтали, относительно центра, по направлению и т.д.

Расположение и назначение команд, как и в других окнах Excel, интуитивно понятно. Достаточно прочитать названия. Тут выравнивание по вертикали, тут – горизонтали. Можно объединить несколько ячеек в одну или длинное название переносить по словам

Обращу лишь внимание на пару интересных моментов

Когда в ячейку вносится число, оно автоматически «прилипает» к правому краю, а текст – к левому краю. Если число будет в левом столбце, а текст в следующем справа, то содержимое обоих столбцов будет выглядеть примерно так.

Читать такое не удобно (все сливается и нужно присматриваться). Поэтому правильно сделать отступ текста от левого края. Для этого достаточно выбрать в списке по горизонтали пункт по левому краю (отступ) и установить рядом в окошке значение отступа. См. рисунок ниже.

Теперь глазу намного приятнее.

Аналогичным образом можно отлепить число от правого края.

И еще один полезный совет. При создании таблицы в шапке часто объединяют ячейки, чтобы общее название «накрывало» сразу несколько столбцов. К примеру, как на картинке ниже.

«Продажи» захватывают все столбцы. Выглядит красиво, но не практично. К примеру, при выделении одного столбца диапазон автоматически расширится на все столбцы, находящиеся под объединенной ячейкой. Если попытаться скопировать этот диапазон, то может выскочить ошибка с сообщением о несовпадении ячеек. В общем, не очень практично. В то же время нужно сохранить внешний вид, как на картинке выше. Есть простой прием. Достаточно внести «Продажи» в крайнюю левую ячейку диапазона, посередине которого оно должно оказаться. Затем, начиная с этого слова, выделить вправо остальные ячейки диапазона, и выбрать пункт по центру выделения на вкладке Выравнивание.

Получится тот же эффект, только ячейки не будут объединены.

Рекомендую взять на вооружение этот способ форматирования. В конце статьи находится видео о том, как расположить надпись в середине диапазона, не используя объединение ячеек.

Значительная часть команд из вкладки Выравнивание также вынесена на ленту.

Следующие вкладки Шрифт, Граница, Заливка имеют понятное назначение и вид. С их помощью выбирается шрифт, цвет, размер и т.д.

Таблица без границ выглядит незавершенной

Поэтому ячейкам и таблице в целом нужно придать красивую, но не отвлекающую внимание, обводку. Выбираем во вкладке Граница тип границы, цвет, если нужно, и место проведения

Предварительный макет отображается тут же в середине окна.

Заливка ячейки производится в следующей вкладке. Здесь все еще понятней. Выбрали диапазон, залили, как нужно.

Последняя вкладка Защита используется для ограничения доступа к ячейкам (можно сделать так, чтобы нельзя было вносить изменения и др.). В конце статьи есть видео с подробным объяснением, как сделать защиту листа Excel и отдельных ячеек.

Самые часто используемые команды есть на ленте.

Если назначение какой-либо кнопки не понятно, следует подвести курсор и прочитать всплывающую подсказку.

При использовании форматирования следует помнить о том, что слишком пестрая раскраска сбивает с толку и рассеивает внимание

Поэтому формат желательно использовать только для увеличения читабельности и привлечения внимания к наиболее важной информации. Увлекаться не стоит

Увлекаться не стоит.

Если у вас проблемы с дизайнерским представлением или различные варианты формата не приводят к желаемому результату, то можно воспользоваться готовыми стилями. Выделяем нужный диапазон и нажимает кнопку Стили ячеек на вкладке Главная на ленте.

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

Пробуйте различные варианты. Смотрите, что нравится больше. Но лучше, повторюсь, не увлекаться. Думайте о тех, кто будет работать с вашими таблицами да и о себе тоже, когда придется открыть этот файл через несколько месяцев.

Строим сводную таблицу со средними/максимальными значениями по тематикам

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

QUERY(‘Книги’!A1:D;»SELECT avg(C), avg(D) pivot B»;1)

Мы используем похожий диапазон (в отличие от предыдущего в нем есть продажи за 2015 и 2016 годы), извлекаем средние значения по столбцам C и D (SELECT avg(C), avg(D)) и группируем их по столбцу B (тематика).

Полученный результат транспонируем для удобного отображения (с помощью функции TRANSPOSE (ТРАНСП)):

Можно использовать и другие функции вместо avg (среднего), например max (максимальные значения):

Или отобразить и среднее, и максимум, но только по столбцу D:

SELECT avg(D), max(D)

Мгновенная вставка картинок из интернета

На лист таблицы можно в два счета вставить любое изображение из сети. Просто вставьте в ячейку формулу как на рисунке:

Это были лишь некоторые из самых интересных фич. Если вы осознали мощь программы и захотели начать активно ее использовать, рекомендую посмотреть эти 16 видео-уроков для получения стартовых знаний.

Опрос: Что вы такого делаете в Excel, что не можете делать в Google Sheet?

(5.00 из 5, оценили: 3)

Вы научитесь переводить текст на другой язык (или на свой) прямо в Google Таблицах, ускорять работу документов и делать их легче, выделять в них уникальные элементы и автоматически проставлять ссылки, быстро переводить данные из файла в файл (по этой теме есть даже видеоурок), а также сравнивать между собой два списка. Готовы? Тогда за дело.

Create Google Material Line Chart (Uses Material Design)

Let’s see how to create a Line chart using the Material Chart version.

&lt!DOCTYPE html>
&lthtml>
&lthead>
    &ltscript src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">&lt/script>
    &ltscript type="text/javascript" src="https://www.gstatic.com/charts/loader.js">&lt/script>
&lt/head>

&ltbody>
    &ltdiv id="chart" style="width:auto; height:300px;">&lt/div> 
&lt/body>

&ltscript>
    
    google.charts.load('current', { packages:  });
    google.charts.setOnLoadCallback(drawLineChart);

    function drawLineChart() {
        $.ajax({
            url: "https://www.encodedna.com/library/sample-sales.json",
            dataType: "json",
            type: "GET",
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                var arrSales = ];    

                
                $.each(data, function (index, value) {
                    arrSales.push();
                });

                
                var options = {
                    chart: {
                        title: 'Monthly Sales',
                        subtitle: '-- quantities sold'
                    },
                    axes: {
                        x: {
                            0: { side: 'top'}   
                        }
                    }
                };

                
                var figures = google.visualization.arrayToDataTable(arrSales)

                
                var chart = new google.charts.Line(document.getElementById('chart'))

                
                chart.draw(figures, google.charts.Line.convertOptions(options));
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('Got an Error');
            }
        });
    }
&lt/script>
&lt/html>

Try it

As you can see, the chart now looks different from the chart I have created in my first example. It looks neat and properly aligned (not too much left margin). However, there are no curves, and see where the legend (Sales Figure) is positioned, by default.

However, it has some new (useful) features.

The data extraction part is the same like in the Classic version that I have explained in the . However, the API loading part is slightly different. Instead of corechart package, I am using line package.

google.charts.load(‘current’, { packages: });

Its very specific now. Since I am creating a Line chart, I’ll use the Line package.

Now look at the Options section. It has two new features called the subtitle and axes. Careful, how you spell it and use it. It is case sensitive.

I can now add a subtitle below the title. The axes.x option (available only in Material Charts version) allows developers to show the labels (in our case Month) on top or at the bottom. Its default value is bottom.

There are few more changes in the Material Line Charts version from its older/core version. Look how I’ve defined the chart type and finally drawing it.

var chart = new google.charts.Line(document.getElementById(‘chart’))
chart.draw(figures, google.charts.Line.convertOptions(options));

There are many new features in the Google Material Charts version that you can use to create some nice and interactive charts using live data. For now, this is it.

• There is one problem though. If you see both the examples, the first example uses an option called the legend (the object showing the text «Sales Figure»), which allowed me to position the legend either top or bottom. This option is missing in the new Material Line Charts version (when I wrote this post).

Thanks for reading.

← PreviousNext →

Формулы

В Google Sheet 371 функция! Здесь их полный список с описаниями на русском языке. Они распределены по 15 разделам:

Для справки, в Excel их на сто функций больше. Если что-то очень нужное, как раз из этой сотни, это не повод отказываться от Google Spreadsheet. Ведь можно создать функцию под себя!

Инструкция по созданию собственных функций

1. Открываем редактор скриптов:

2. Набираем код функции:

function c100wN(x) {
x = x*100*1.4;
return x;
}

3. Сохраняемся.

4. Пробуем:

Этот пример функции очень простой, но вооружившись учебником по экономике/статистике/дискретной математике, вы сможете заставить Google SpreadSheet делать вычисления высокой степени сложности и избавиться от необходимости платить за Excel.

P.S. В Excel тоже можно создавать пользовательские функции.

How to make a Gantt Chart in Google Sheets

Gantt chart is a simple instrument to create task sequences and track deadlines in project management. In this type of chart, titles, start and end dates, and duration of tasks are transformed into waterfall bar charts.

The Gantt charts clearly show the time schedule and current state of a project. This type of chart will be very useful if you are working with your colleagues on a certain project, which is divided into stages.

Of course, Google Sheets can’t replace professional project management software, but the accessibility and simplicity of the proposed solution are certainly worthy of attention.

So, we have a product launch plan, which can be presented as a dataset below.

Let’s add two columns to our table: the start day of task and task duration.

We put day 1 for the start of the first task. To count the start day for the second task, we shall deduct the start date of the whole project (July 1, cell B2) from the start date of the second task (July 11, cell B3).

The formula in D3 will be:

Pay attention that reference for B2 cell is absolute, which means that if we copy the formula from D3 and paste it to the range D4:D13, the reference won’t change. For instance, in D4 we will see:

Now let’s count the duration of each task. For this we shall deduct the start date from the end date.

Thus, in E2 we’ll have:

In E3:

Now we are ready to build our chart.

As you probably remember, in Google Sheets we can use several data ranges to build a chart.

In our case, we are going to use names of tasks, start days and durations. This means that we will take data from columns A, D, E.

With the help of Ctrl key select the necessary ranges.

Then as usual go to menu: Insert — Chart.

Choose the Chart type Stacked Bar Chart.

Now our task is to make the values in Start on day column not be displayed in the chart, but still be present in it.

For this we should make the values invisible. Let’s go to Customize tab, then Series — Apply to: Start on day — Color — None.

Now the values in Start on day column are invisible, but still, they affect the chart.

We can continue editing our Google Sheets Gantt chart, change the title, location of legend, etc. You are free to make here any experiments.

Have a look at our final chart.

Here one can find the end date of each project stage and sequence of their implementation. Unfortunately, you can’t change the location of data labels.

Here are some important tips on working with Google Sheets Gantt chart:

You can add new tasks and change their deadlines.
Charts change automatically if new tasks are added or changed.
You can mark the days on X-axis in more detail, using the chart editor settings: Customize — Gridlines — Minor gridline count.
You can give access to the chart to other people or give them status of observer, editor or administrator.
You can publish your Google Sheets Gantt chart as a web-page, which your team members will be able to see and update.

Что такое тег шаблона

Тег шаблона — это код, который поручает WordPress «сделать» или «получить» что-нибудь. В случае с файлом header.php, тег шаблона, выводящий название сайта на WordPress, будет выглядеть следующим образом:

<h1><?php bloginfo('name'); ?></h1>

Тег шаблона <?php bloginfo(); ?>, заключенный в теги заголовка H1. Тэг bloginfo() получает информацию из вашего , а также > в Административной панели. В представленном здесь примере, слово name, заключенное в кавычки внутри тега, поручает тегу «получить название блога». Это называется параметр.

Параметры тэга шаблона

Кроме параметра name шаблонного тэга <?php bloginfo(); ?>, существует и другая информация, которую он может отобразить. Давайте рассмотрим несколько таких параметров — и вы сможете найти больше информации и примеров на странице Кодекса bloginfo().

name: Как упоминалось выше, отображает название сайта и установлено администратором в панели > по умолчанию.
description: Это называется «подзаголовок» вашего блога, обычно содержащий описательные предложения, которые говорят: «Мой блог о…». Установлено администратором в панели > .
url: Если вам необходимо отобразить URL или веб-адрес вашего WordPress-сайта, используйте параметр URL. Он также берется из панели > .
admin_email: Если хотите отобразить e-mail администратора, вам не нужно вносить его в файлы шаблона. В результате таких действий он может стать открытым для сборщиков почты, использующих сложное программное обеспечение для сбора e-mail адресов и рассылки по ним спама. При использовании bloginfo('admin_email'), e-mail отображается на странице для читателей, но фактический почтовый адрес скрыт от сборщиков. Здрово, не правда ли? E-mail администратора устанавливается в панели > .
version: Иногда вы хотите показать, какую версию WordPress используете. Темы, поставляемые вместе с WordPress, по умолчанию содержат такую информацию в шаблоне подвала. Он просто отображает текующую версию WordPress, используемую вами.

Для отображения версии WordPress, тег шаблона должен выглядеть следующим образом:

<p>Блог работает на WordPress версии <?php bloginfo('version'); ?></p>

Блог работает на WordPress версии 5.9

Следует заметить, что параметр version генерирует только номер версии Worpdress, но не сами слова «Блог работает на WordPress версии». Это было написано перед тэгом, так чтобы они были видны на веб-странице.

Для более подробного изучения параметров шаблонных тэгов, смотрите Анатомия Тэгов Шаблона и Как передавать в Тэги параметры.

Знакомимся с Google Docs

Основное преимущество Google Docs — возможность совместной работы в режиме онлайн, просмотра изменений, сделанных каждым участником, и автоматического сохранения актуальной версии. Особенно полезны для работы с данными Google Spreadsheets, или Google Таблицы — аналог приложения Excel. Google Docs могут пригодиться вам в следующих целях:

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

Все данные в примерах ниже вымышлены.

Использование публикации в Интернете

Самый простой способ встроить таблицу Google на веб-сайт — использовать Опубликовать в сети функция внутри таблиц Google. Посмотрим, как это работает.

После того, как ваш лист отформатирован соответствующим образом, выберите файл из меню. Выбрать Опубликовать в сети.

2. В следующем окне выберите раскрывающийся список под Ссылка на сайт и выберите вкладку с данными, которые вы хотите встроить на свою веб-страницу.

3. Затем выберите раскрывающийся список под Встроить, и убедитесь страница интернета выбирается из списка (он должен быть выбран по умолчанию).

4. Выберите Публиковать кнопка. Выберите ОК во всплывающем окне подтверждения. Выбор в окне публикации изменится. Выберите Встроить вкладку снова. Выделите и скопируйте код внедрения, отображаемый в окне.

Теперь вы готовы вставить этот код на свой веб-сайт, чтобы встроить электронную таблицу.

Кейс «Считаем средний чек, выбирая данные с определенной даты»

На скриншоте массив данных, с которым мы будем работать:

Наша задача: отобрать строки с продажами начиная с 1 апреля и посчитать по ним средний чек, используя количество клиентов, то есть получить среднее взвешенное.

Начнем. Создадим QUERY с умножением количества клиентов (столбец B) на средний чек (столбец С) начиная с определенной даты:

Правильно использовать дату в формуле QUERY так:

QUERY работает с датой только в формате yyyy-mm-dd. Чтобы перевести дату из ячейки Е1 в этот вид, используем формулу ТЕКСТ (TEXT) с условием «yyyy-mm-dd»;
перед датой и перед апострофом нужно написать date;
можно и не делать ссылку на ячейку с датой, а написать ее сразу в QUERY, тогда формула будет выглядеть так:

дата с двух сторон обрамляется одиночными кавычками (‘).

Вернемся к тому, что у нас получилось. Наша формула выдала вот такой массив данных:

Это построчные произведения количества клиентов на средний чек. Нам нужно просуммировать их, для этого введем перед формулой СУММ (SUM):

Чтобы получить средний чек, получившееся число нужно разделить на общую сумму клиентов в отобранных строках. Чтобы закрепить использование QUERY, опять воспользуемся этой формулой.

Берем предыдущую формулу, меняем B*C на sum(B) и получаем такую конструкцию:

Наконец, совмещаем формулы:

Все работает, ура! 53 (этот результат видно на всплывающей подсказке в верхнем левом углу) — средний чек с учетом количества клиентов, рассчитанный через среднее взвешенное.

Что такое Google DataStudio

Это инструмент визуализации данных, который позволяет выгрузить данные из разных источников и свести их в онлайн-отчеты, а потом расшарить в лучших традициях Google Документов.

Сразу замечу, в рамках контекстной рекламы отчеты бывают 3 видов по глубине:

Основные показатели, например, отчет по прибыли в разрезе Яндекс.Директа, AdWords, cоциальных сетей и др., чтобы «держать руку на пульсе».
Средней глубины, например, отчет по рекламным кампаниям или категориям товаров в разрезе Яндекс.Директа.
Глубокий, как когортный анализ или конверсия по вложенности URL, такие отчеты нужно сводить вручную.

Так вот в Data Studio целесообразно строить отчеты только по основным показателям.

На момент написания статьи доступна только beta с ограничениями:

Не позволяет агрегировать данные из разных источников, например, взять из Google Analytics количество кликов по датам и свести с количеством звонков по тем же датам из обычной таблицы в Excel.

5. Создание графиков для SaaS Dashboard

Теперь мы сформируем JSON-данные для графиков и будем использовать FusionCharts и его компонент React для их визуализации.

В функции , которую мы создали на предыдущем шаге, мы определим пустой массив, в котором будут данные для графиков. Ниже приведен необходимый код:

Мы будем использовать диаграмму «Multi-series 2D Single Y Combination Chart» (mscombi2d) на нашей панели. FusionCharts предоставляет множество атрибутов, которые можно использовать для настройки стилей диаграмм.

Теперь мы создадим файл с именем «chartCosmetics.js», в котором будут параметры стилей для нашего графика, чтобы нам не приходилось определять их каждый раз, когда мы его создаем. Вот как это выглядит:

Теперь, мы сформируем массив JSON-данных для каждого графика и будем использовать указанные выше параметры стилей:

Примечание: Необходимо объявить нулевую переменную в состоянии приложения для каждого графика, чтобы ее можно было использовать позже, как мы делали выше для данных Google Sheet.

Теперь, когда JSON-данные готовы для наших графиков, мы передадим их компоненту React в FusionCharts под элементом , который мы создали для каждого графика.

Чтобы узнать больше об использовании компонента FusionCharts React, вы можете обратиться к странице документации для разработчиков.

Вы можете выполнить вышеуказанные шаги, чтобы создать оставшиеся графики. Теперь мы будем вызывать функцию с в качестве аргумента метода , чтобы наша панель по умолчанию загружала данные для 2018. Если вы уже выполнили вышеуказанные шаги, у вас должна быть функционирующая панель, как на рисунке ниже:

D3.js

Для некоторых D3 — первое, что приходит в голову, когда речь заходит о визуализации данных. Это действительно мощный open source проект, позволяющий создавать невероятные визуальные эффекты при помощи изменения DOM. Графики рисуются при помощи HTML5, SVG и CSS.

Библиотека соответствует стандартам W3C и поддерживается всеми актуальными браузерами. Разработчики любят её за широкий спектр возможностей и мощный API. Демонстрация возможностей D3 доступна здесь.

Будьте внимательны — D3 поставляется без встроенных графиков, и для рисования потребуется сперва установить соответствующие пакеты расширений. Впрочем, можно найти немало сборок на основе D3 с уже готовыми наборами графиков.

Лицензия: open-source, бесплатна для любого использования.

Использование фильтров в Google Data Studio

При подключенном коннекторе Google Analytics вы можете использовать фильтр выбора сегмента, где можно указать, например, применение только Organic Traffic (очень удобно для построения отчетов исключительно по каналу SEO):

Вы также можете нажать “Добавить фильтр”, после чего у вас появится меню по добавлению фильтра:

Например, мы хотим создать фильтр по отображению данных только с мобильных устройств, для этого мы:

Называем наш фильтр (как угодно).
Оставляем параметр “Включить”.
Выбираем “Тип устройства”.
Выбираем условие “Содержит”.
Вводим значение “mobile”.
Нажимаем “Сохранить”.

Вы можете включать/исключать разные значения из доступных полей в подключенном источнике. Это очень удобно для построения дашбордов, ведь какие-то значения вам не нужно отображать, и их можно исключить.

Настройка передачи потока данных

Для получения данных из других источников вам необходимо настроить их передачу, в чем поможет встроенный коннектор. Например, если вы хотите получать данные из Google Analytics (трафик, конверсии, время на сайте и т. д.), то выбираете коннектор Google Analytics, а коннектор Google Таблицы передает все данные из таблицы, которую вы подключите.

Google Data Studio может выгружать данные не только через коннекторы Google, но и через другие источники (платные и бесплатные).

Один из самых полезных бесплатных источников для построения отчета по интернет-маркетингу — Datafan.pro, который позволяет передавать данные из социальных сетей (Facebook, Instagram).

Есть также платные коннекторы, например, можно выделить интересные варианты от партнеров Data Studio , которые передают данные из сервисов Яндекса (Метрика, Директ) и других инструментов:

Подключить данные можно не только в начале разработки отчета, но и добавив их к уже созданному отчету. Для этого кликните на “Добавить данные” в верхнем меню:

Создание диаграммы

Давайте представим таблицу с численностью населения стран мира в виде столбчатой диаграммы. На оси y отобразим цифры, а на оси x название стран. Для начала создадим элемент canvas с идентификатором .

<canvas id="popChart" width="600" height="400"></canvas>

Атрибуты width и height определяют размеры диаграммы. Для того чтобы график был адаптивным мы должны определить ширину и высоту элемента canvas.

Далее нам необходимо инициализировать класс . Сделать это можно, выбрав элемент страницы, инициировав библиотеку через jQuery или 2d контекст элемента canvas.

var popCanvas = $("#popChart");
var popCanvas = document.getElementById("popChart");
var popCanvas = document.getElementById("popChart").getContext("2d");

Всё что осталось сделать — передать параметры в конструктор:

var barChart = new Chart(popCanvas, {
  type: 'bar',
  data: {
    labels: ,
    datasets: ,
      backgroundColor: 
    }]
  }
});

Chart.js извлечёт информацию из объекта который мы предали и нарисует соответствующий график. В параметре необходимо указать тип диаграммы. Данное поле может принимать одно из следующих значений: , , , , , или . В данной серии статей мы рассмотрим в отдельности каждый вид.

Сами данные передаём через ключ data. В опции можем указать цвет, в который окрасятся столбцы диаграммы. По умолчанию данное значение равно .

На самом деле для каждого типа диаграмм характерны особые характеристики. В результате мы получим следующий результат:

Для того чтобы увидеть конкретные цифры достаточно подвести курсор мыши к тому или иному столбцу. Можно заметить что размеры графика не соответствую выставленным нами ранее. Зато диаграмма полностью адаптивна под различные устройства.

Если вам необходимо чтобы диаграмма была одного и того размера на всех устройствах, то поставьте значение в поле .

Строим графики

После того как мы создали показатели, переходим в главное рабочее пространство.

Первый инструмент на дашборде – это даты, по которым строится отчет, мы по умолчанию указываем «Последние 30 дней (включая сегодня)». То есть, когда кто-то откроет ваш отчет, дата будет выставлена по умолчанию.

Теперь построим обычный график с линиями.

Справа во вкладке Данные видим настройки доступные:
Источник данных — в одной таблице может быть >1 источника, например, можно вывести данные сразу нескольких аккаунтов Google Analytics для менеджера или подтягивать звонки из Google Таблиц.

Параметр: параметр времени — например, Date.

Показатель — числовые значения, например, Сеансы, можно вывести Доход, Цели, Стоимость или собственные показатели.

Изначально может ввести в заблуждение, что оси наложены на одну ось ординат (вертикальная). Для этого нужно одну ось привязать к левой оси ординат, а другую к правой.

Добавим название графика с помощью текстового блока:

Далее добавим ряд ключевых показателей:

Выделим основные показатели прямоугольником и переместим его на задний план.

Добавим фильтр, чтобы была возможность отфильтровать график по источникам. Например, если мы снимем галочку с yandex, то график и показатели будут отбражаться только по google.

Кстати о фильтрах: в нашем случае нужны данные только по каналу «Контекстная реклама». Для этого нужно добавить фильтр на уровне отчета. Зайдем в меню Ресурс > Настроить фильтры и нажмем Добавить фильтр

Фильтр работает по аналогии с фильтрами в самом Google Analytics:

Включить/Исключить — трафик по каналу CPC мы включаем в отчет или исключаем из него.
Выбираем Параметр/Показатель и задаем условие, например, параметр Medium (канал трафика) = CPC (тип платного трафика).

Подробнее останавливаться не будем, так как аналогичную информацию можно найти в интернете.

Теперь нажимаем на любой элемент, который хотим отфильтровать. В поле «Фильтр» нажимаем Добавить фильтр, где и выбираем наш новый фильтр «Платный трафик».

Добавим таблицу с конверсией по регионам, для этого нам потребуется сделать новый показатель, как мы делали ранее. Для этого нажмите Добавить показатель в правой панели и Создать новый.

Клики > Лиды = Лиды / Sessions

Ну и напоследок сделаем таблицу по эффективности менеджеров, так как наш Google Analytics бы интегрирован с AmoCRM, что позволяет выгружать в него продажи.

Чтобы не смущать пользователей отчета английский названиями Cost, Revenue и так далее, их можно заменить на русские. Находим источник данных в меню Ресурс > Добавленные источники данных и нажимаем Изменить.

2. Подключение API Google Sheets и выборка данных

Мы перейдем на страницу Google Sheet, которую будем использовать в нашем приложении для панели инструментов. Вот скриншот того, как это выглядит, построенный с некоторыми примерами данных, которые я собрал для вымышленного SaaS-бизнеса. Вы увидите ежемесячные данные за три года, сфокусированные на некоторых ключевых показателях эффективности (SaP) SaaS-бизнеса. К ним относятся доходы, клиенты и другие показатели роста.

Теперь нам нужно поделиться листом, чтобы каждый мог его увидеть. Для этого в меню Файл нажмите Поделиться. Затем нажмите Получить общую ссылку, и после ее обработки лист будет предоставлен для доступа «Любой, у кого есть ссылка» по умолчанию.

Поскольку мы хотим сделать лист общедоступным, перейдите к разделу «Любой, у кого есть ссылка для просмотра» и выберите опцию Дополнительно в раскрывающемся списке. Выберите «On — Public on the web» и сохраните.

Вы можете получить доступ к листу, который я буду использовать по этой ссылке.

Мы запомним идентификатор таблицы (это можно найти в URL-адресе для Google Sheets, у меня это ).

Мы будем использовать метод для нашего приложения панели. Он возвращает один или несколько диапазонов значений из электронной таблицы. Вы можете узнать больше об этом здесь. Вооружившись ключом API и идентификатором электронной таблицы, давайте обратимся к проводнику API Google Sheets, чтобы проверить его (вы также можете использовать браузер/postman (я использовал его!), Чтобы проверить результат и получить ответ JSON, который выглядит примерно так):

Я подверг цензуре API-ключ — вы можете поставить свой собственный ключ API на его место.

Теперь давайте откроем наш рабочий каталог (для меня ) в редакторе кода и создадим новый файл с именем . Добавим свой API-ключ и идентификатор электронной таблицы следующим образом.

Теперь перейдем к файлу . Мы будем добавлять все непосредственно в , который дал нам наш шаблон. Это не лучшая архитектура, а просто демонстрация концепций.

Следующие шаги показывают, как я подключу наше приложение для панели к API Google Sheets и получу из него данные:

1. Импортируйте файл , который мы создали с помощью приведенного ниже кода, и объявите переменную с URL-адресом запроса для API Google Sheets.

2. Теперь мы установим пустой массив в , как показано в коде ниже:

3. Извлечем JSON-данные из метода жизненного цикла React :

Потрясающие! Теперь, когда мы установили соединение с нашими Google Sheets, мы можем приступить к созданию макета для нашей панели.

Примечание: Вы можете проверить соединение, залогировав переменную items в state.