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кб;
Оффсайт, Галерея Чартов с примерами
Пример вывода графика в сопровождающем пост, изображении:
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<br/>'+
this.point.name +': '+ this.y +' fruits';
} else {
s = ''+ this.series.name +'<br/>'+
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:
