Опубликовано Оставить комментарий

Плагин Google Chart на PlatformaLP

Platforma LP и Google Chart

В своей работе я часто использую платформу platforma lp  для быстрого создания лэндингов и тестирования различных гипотез. И вот решили мы в сервисе https://lead2call.ru немного оживить лэндинг и добавить ему интерактивности. Для мы выбрали google chart графики которые в режиме онлайн отображали бы интересные данные для потенциальных клиентов. И вот, что получилось!

lead2call

Что для этого потребовалось :

1) Библиотека  Google chart, для отображения данных

2) API на стороне backend , которое бы отдавало нужные нам данные

3) Cкрипт на platforma lp

 

 

С первыми двумя пунктами все просто библиотека google chart в свободном доступе, нужные Вам данные вы либо берете с  API сайта или с любого другого места, остановимся подробнее на том как все это сделать в platforma lp.

Для размещения произвольного Javascript кода на странице лэндинга Вам нужно будет создать плагин, добавить его Вы можете на в настройках страницы в меню метрика и скрипты. Дальше в самом лэндинге Вы вставляете произвольные HTML блоки с нужными вам Тэгами , как пример : <div id=»chart1″></div>

 

Дальше все просто , пишем скрипт, подгружающий по Ajax данные с нашего API , скармливаем  google полученные данные и выводим их с помощью функций в нужный нам div, пример :

var dataForNetwork = google.visualization.arrayToDataTable(data[‘network’]);  — инициализируем переменную и заполняем ее данными получеными с API

var options = { backgroundColor: ‘black’, legend: {position: ‘none’}, animation: { duration: 2000, easing: ‘out’, startup: true,}, title: ‘Пример вывода графика Google’, titleTextStyle: {color: ‘white’}, ‘height’: 300,}  — инициализируем переменную содержащую различные опции для отображения графика и добавляем немного анимации.

var chartNetwork = new google.visualization.ColumnChart(document.getElementById(‘chart1’)); — инициализируем переменную содержащую нужный нам вид графика и указываем в каком DIV будем отображат его

chartNetwork.draw(dataForNetwork, options); — ну и выводим все это на страницу .

Вот и все !

 

p.s.  Я оставил за бортом описание подключения самих графиков и написание ajax запроса , если это интересно пишите в комментариях я расскажу как это сделал я.