Рисуем красивые графики заработка от Google Chart на своих блогах (манимейкерам)

Пост опубликован в категории РСЯ 2 комментария

Нужно было найти как на WP можно было бы рисовать красивые графики заданных параметров.

Такие графики вы, возможно, встречали на манимейкерских блогах.

Выглядят они примерно так:

grafik

Причем все это дело – не просто статическая картинка, а живой ява скрипт.

Я не программист и инструкция от Гугл Девелоперс у меня вызвала сильный перекос сознания, поэтому пришлось найти легкий путь, как их рисовать.

Не буду долго парить вам мозг, приступим сразу к сути.

Первое, что нужно сделать – это сходить сюда: http://wordpress.org/plugins/google-visualization-charts/  и залить этот плагин «Google Visualization Charts»

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

Далее – будем рисовать, собственно, то, ради чего он и ставился – красивые графики.

Вот код графика:

[$line_chart title="Статистика дохода сайта" v_title="Доход (руб)" width="580px" height="400px" scale_button="false"]

['x','По плану','По факту','Трафик'],

['Янв',100,140,135],

['Фев',200,270,167],

['Мар',500,560,295],

['Апр',1000,790,347],

['Май',1500,1302,486],

['Июн',2000,1470,570],

['Июл',2500,1903,780],

['Авг',3500,3200,990],

['Сен',4600,4570,1200],

['Окт',5700,5600,1429],

['Ноя',7400,5980,1570],

['Дек',8900,9560,1790]

[/$line_chart]

*Перед функциями line_chart в начале и в конце уберите знак доллара.

Выглядит он вот так:

[line_chart title=»Статистика дохода сайта» v_title=»Доход (руб)» width=»580px» height=»400px» scale_button=»false»]
[‘x’,’По плану’,’По факту’,’Трафик’],
[‘Янв’,100,140,135],
[‘Фев’,200,270,167],
[‘Мар’,500,560,295],
[‘Апр’,1000,790,347],
[‘Май’,1500,1302,486],
[‘Июн’,2000,1470,570],
[‘Июл’,2500,1903,780],
[‘Авг’,3500,3200,990],
[‘Сен’,4600,4570,1200],
[‘Окт’,5700,5600,1429],
[‘Ноя’,7400,5980,1570],
[‘Дек’,8900,9560,1790]
[/line_chart]

Вставлять код графика нужно в HTML версию страницы, при публикации статьи.

Называется она «Текст»:

123

Вставляем в то место, где хотим выводить график и вуаля. Остальное сделает плагин.

Как вы видите, параметрами width= «580px» и  height= «400px» – регулируем размеры графика.

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

В одной из строчек [‘x’,’По плану’,’По факту’,’Трафик’] – вы можете видеть 3 переменных. Х – это просто горизонталь.

Их можно сделать сколько угодно.

Но при этом в других строчках [‘Июл’,2500,1903,780] … должно быть столько же.

Например, тот же график, только с 2 переменными (вырезали линию «Трафик»):

[$line_chart title="Статистика дохода сайта" v_title="Доход (руб)" width="580px" height="400px" scale_button="false"]

['x','По плану','По факту'],

['Янв',100,140],

['Фев',200,270],

['Мар',500,560],

['Апр',1000,790],

['Май',1500,1302],

['Июн',2000,1470],

['Июл',2500,1903],

['Авг',3500,3200],

['Сен',4600,4570],

['Окт',5700,5600],

['Ноя',7400,5980],

['Дек',8900,9560]

[/$line_chart] 

*Перед функциями line_chart в начале и в конце уберите знак доллара

Выглядит он вот так:

[line_chart title=»Статистика дохода сайта» v_title=»Доход (руб)» width=»580px» height=»400px» scale_button=»false»]
[‘x’,’По плану’,’По факту’],
[‘Янв’,100,140],
[‘Фев’,200,270],
[‘Мар’,500,560],
[‘Апр’,1000,790],
[‘Май’,1500,1302],
[‘Июн’,2000,1470],
[‘Июл’,2500,1903],
[‘Авг’,3500,3200],
[‘Сен’,4600,4570],
[‘Окт’,5700,5600],
[‘Ноя’,7400,5980],
[‘Дек’,8900,9560]
[/line_chart]

Вот и все, 5 минут работы — и у вас красивые графики.

Качайте плагин, устанавливайте к себе на сайты и рисуйте красивые графики доходов для своих РСЯ марафонов и т.п.

Буду благодарен за ретвит и всяческие плюсы записи:)

Твит дня: “Не смейтесь над человеком, делающим шаг назад. Возможно, он берет разбег.»

Спасибо за ретвит!
Автор: Sickboy

Подписаться на обновления блога:

Обсуждение:

  1. Неандерталец:

    Твои примеры у меня работать отказались, взял с официального источника и заметил разницу:
    В твоих: scale_button=»false» — не работает.
    В оригинале: scale_button=»true» — работает.

  2. Ангелина:

    Полезная статья, как всегда нужная информация, спасибо)

Оставить комментарий

*** Правила комментирования блога ***