Веб-разработка

индекс
236,88

Highcharts: Красивые, динамические чарты за 5 минут!

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

Чарты работают со всеми популярными браузерами, включая Safari на iPhone.
Минимальная версия для IE составляет 6+. Также браузеры поддерживающие Canvas элемент, и в некоторых случаях SVG для графического рендеринга.
Чарты бесплатны для не коммерческого использования, однако цена для коммерческого использования на одном сайте составляет $80, безлимитное использование 360 долларов. Подробнее

Поддерживаются следующие типы вывода графиков:
line, spline, area, areaspline, column, bar, pie и scatter. и они могут быть комбинированы между друг другом при выводе конечному пользователю, и обладают возможностью отключения любого из них в режиме реального времени непосредственно пользователем для удобства разборки информации.

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

  • Чарты работают на чистом JS и не требуют каких-либо плагинов или Flash;
  • Вывод чартов довольно прост, и они могут быть использованы даже новичками в веб-разработке;
  • Есть увеличение отдельных областей;
  • Поддержка скинов /тем оформлений;
  • Поддержка tooltip с выводом информации;
  • В большинстве типов чартов есть поддержка date-time X-оси;
  • Размер библиотеки ~18кб;

Оффсайт, Галерея Чартов с примерами

image

Пример вывода графика в сопровождающем пост, изображении:
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Bananas', 'Plums']
},
tooltip: {
formatter: function() {
var s;
if (this.point.name) { // the pie chart
s = 'Total fruit consumption
'+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+ this.series.name +'
'+
this.x +': '+ this.y;
}
return s;
}
},
labels: {
items: [{
html: 'Total fruit consumption',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Jane',
data: [3, 2, 1, 3, 4]
}, {
type: 'column',
name: 'John',
data: [2, 3, 5, 7, 6]
}, {
type: 'column',
name: 'Joe',
data: [4, 3, 3, 9, 0]
}, {
type: 'spline',
name: 'Average',
data: [3, 2.67, 3, 6.33, 3.33]
}, {
type: 'pie',
name: 'Total consumption',
data: [{
name: 'Jane',
y: 13,
color: highchartsOptions.colors[0] // Jane's color
}, {
name: 'John',
y: 23,
color: highchartsOptions.colors[1] // John's color
}, {
name: 'Joe',
y: 19,
color: highchartsOptions.colors[2] // Joe's color
}],
center: [100, 80],
size: 100,
showInLegend: false
}]
});


PS: Список других библиотек от StWoland

UPD: тест Safari под рукой оказался только iPod Touch:
image
+125
4 января 2010, 07:57
408

комментарии (46)

+1
FTM #
Красиво и удобно. Must have.
+3
IDDQD #
насчет удобства погорячился
0
LeeMiller #
ну смотря как рассматривать параметр удобства. код вполне интуитивен, и без наворотов красивые чарты можно сделать чуть ли не методом тыка, и по шаблонам. Как оно дружит с вертской это уже другой вопрос. И да для работы из баз данных придется писать скрипты самому. а в целом библиотека намного лучше представленных на данный момент.
0
Mr_Floppy #
Здорово, мне для проекта как раз такая библиотека требуется!
0
Boomburum #
может кто подскажет ссыльк сервиса, который позволяет подобное онлайн рисовать? кроме гугла )
спасибо
+3
LeeMiller #
0
Boomburum #
спасибо, но не то ) ( там прям чрезвычайно гибкие настройки были...)
0
boom #
0
niceteg #
уже пользуюсь данной библиотекой в одном проекте… все довольны!
0
not_ice #
прикольно блин, хоть и подтормаживает :) беру на заметку
0
LeeMiller #
странно. а в чем это у вас тормозит?
у меня в ФФ 3.5 все гладко и быстро. поэтому меня эти чарты и заинтересовали, учитывая что анимация отрисовки происходит прям как в Flash.
+1
Metallist #
на первый взгляд очень неплохая штука, на всякий случай сохранил в закладках
0
grossu #
Если сравнивать некоммерческие лицензии, вы бы что предпочли — highcharts или amchart (на flash)?
0
LeeMiller #
highcharts намного меньше весит, работает без флеш, быстрее настраивается, легче в изучении, и готов работать из коробки, достаточно внести свои данные в примеры, и готово.
+2
LeeMiller #
минус очевиден, нельзя использовать в стартапе нацеленного на прибыль
0
LeeMiller #
За что минус? эту библиотеку действительно нельзя бесплатно использовать в стартапе, который предназначен для извлечения прибыли. Вопросы не ко мне, а к Highcharts лицензии.
+1
aleks_raiden #
если стартап нацелен на прибыль, то 360 баксов, это очень небольшая часть ЗП разработчика, который с этой либой может сделать что-то вменяемое
НЛО прилетело и опубликовало эту надпись здесь
0
grossu #
Спасибо за сравнение. 8000 точек — это конечно исключительное применение (не очень читабельный график, ага ;).
Ну и IE тоже не очень интересует, так как нам для админки — юзеры используют только нормальные браузеры.
0
minimedj #
А зачем Вам отображать 8000 точке? У Вас есть монитор с разрехением 8000 пикселей по горизонтали? :-)
НЛО прилетело и опубликовало эту надпись здесь
+11
StWoland #
Добавьте, пожалуйста, парочку ссылок на подобные бесплатные библиотеки.

Предлагаю вашему вниманию мой список, далеко не полный.

Условно бесплатные (для некоммерческого использования):
http://www.jscharts.com/

Бесплатные, с просьбой о donation:
LT Diagram Builder

Бесплатные:
Flot
Canvas 3D Graph
JQuery Visualize Plugin (тормознутый какой-то)
PlotKit

Источники:
http://www.ajaxline.com/10-best-free-javascript-charts-solutions
http://webtecker.com/2008/06/12/10-free-chart-scripts/
+4
middle #
+3
ilyafd #
Как раз писал дополнение (: Но вы опередили.
Еще добавлю:
raphaeljs.com
www.deensoft.com/lab/protochart/

Источник:
womtec.ru/2009/12/creating-javascript-graph-and-chart/
0
NightWriter #
А вот за это спасибо, как раз собирал списочек
0
hydralien #
Ещё из бесплатных неплохих (правда флешовых) — Open Flash Charts
+2
aeryaguzov #
Очень повеселила диаграмма Запасов ядерного оружия СССР(России) и США в галерее чартов:-)
0
LeeMiller #
обалдеть. я и не заметил =)
–4
Chikey #
Использую чарты гугла. Просто нет ничего удобнее чем указывать все параметры в GET и получать рисунок ответом. Все вычисления — облачно. Их графики просто нельзя переплюнуть никаким js. Только если придется менять графики без перезагрузки страницы — тогда они будут полезны, это да.
0
SunexDevelopment #
Чарты отличные… Посмотрите, пожалуйста, в сторону www.google.com/finance?&gl=us&hl=en&q=NASDAQ:COMS&client=fss финансовых чартов… японские свечи, баровый график… Я бы сказал для коллекции не хватает :) И динамическую подгрузку при скроллинге если диапазон слишком велик, например…
0
xexsus #
Да, таких среди бесплатных не найти, а они нужны.
Вот самое перспективное, что удалось найти: people.iola.dk/olau/flot/examples/visitors.html
, но там допилить нужно.
0
hellt #
Отлично. Посоветую дребеденьгам.
0
zar0ku1 #
Использовал до этого JS Charts и Flot

P.S. автор, почему выбрал именно эту?
0
LeeMiller #
потому что показалась удобной, функциональной, и не обозретой на хабре.
0
Shael #
Очень клево, вот бы вы еще реализовали их и в виде GWT-библиотеки!
+3
vladon #
Я бы посоветовал взамен портал gramota.ru.

В заголовке ВСЕ запятые — лишние.

Что, за, мода, пошла, расставлять, кучу, запятых? (В этом предложении тоже не должно быть ни одной.)
0
LeeMiller #
запятая лишняя только после слова чарты. за нее спасибо
В русском языке запятая используется на письме:
— при перечислении…
0
vladon #
Вам не хватает чувства языка, наверное потому, что вы мало читали в детстве художественной литературы.

www.gramota.ru/spravka/rules/?rub=zap&text=19_27

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

С бодрым чувством надежды на новую, лучшую жизнь он в девятом часу ночи подъехал к своему дому.
Л. Толстой

Где жаркое волненье, где благородное стремленье и чувств, и мыслей молодых, высоких, нежных, удалых?
Пушкин

Стал накрапывать редкий, мелкий дождь.
Чехов

Но прилагательные не являются однородными, если предшествующее прилагательное относится ко всему последующему словосочетанию, а не непосредственно к существительному, например:
Шел длинный товарный поезд.
Чехов

За дорогой – стриженая липовая аллея.
Л. Толстой

Были в конторе старые висячие стенные часы.
Л. Толстой
0
aleks_raiden #
а вам, наверное, все же чувства такта, так как такие вещи обычно говорят лично, а не выставляя на всеобщее обозрение.
0
LeeMiller #
Я слышал, что хабр не базар, но видя как люди приходят в тему с чартами, а обсуждают русский язык, мне кажется что люди не понимают значения слов базар и флуд
–2
LeeMiller #
Шел длинный товарный поезд. это круто, Только товарный это его спецификация, а длинна это его внешнее описание.

Только чарты не динамически красивы, они динамические, красивые. И еще много какими могут быть. Я бы перечислил третьим определением, но не хотел перегружать тайтл.

Вы бы лучше следили за теми, кто вообще не знает что такое запятые. А придираться к одной запятой, увольте. За вторую я сказал спасибо.
0
vladon #
1. Отвечайте в реплике на то сообщение, которое вам было адресовано, а не начинайте новый тред.

2. Вот так будет понятнее: «красивые (динамические чарты)».

Динамические чарты — красивые. Не красивые чарты — динамические, а наоборот.

То же самое: «красивые зелёные динамические чарты», «большие красивые зелёные динамические чарты», «вертикальные большие красивые зелёные динамические чарты», «сгенерированные вертикальные большие красивые зелёные динамические чарты» — и НИГДЕ не нужны запятые, прикиньте?

А вот тут, например, нужны: «весёлые, красивые динамические чарты».

Впрочем, хотите остаться воинственно безграмотным, то дело ваше.
–2
LeeMiller #
да когда вы успокоитесь, они не «красивые динамические» они красивые и динамические. Я уже понял, что спорить с вами бесполезно. Вы даже в докторе Хаусе несоответствия ищите, как будто вы верите в то, что там происходит при первом просмотре, а потом понимаете что вас обманули. Не пытайтесь идеализировать мир, у вас ничего не получится. Без ляпов и ошибок не будет ничего, что нас развлекает и может разнообразить жизнь. Учите лучше юных людей, которые вообще не умеют разделять свои мысли.
+1
vladon #
Ок. Прилагательное «красивые» подходит к объекту «динамические чарты»? Не просто к «чарты», а к «динамические чарты»?
0
Boomburum #
Ура, нашел, что искал! :) extra.amcharts.com/editor/
Вот например — extra.amcharts.com/editor/column/
0
lol2Fast4U #
Вот бы его использовали в Google Analytics вместо флеша (:

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