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

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

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

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

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

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

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

Первое, что нужно сделать – это сходить сюда: 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 версию страницы, при публикации статьи.

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

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

Как вы видите, параметрами 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 минут работы — и у вас красивые графики.

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

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

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