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<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:
    image
    Метки:
    Поделиться публикацией
    Комментарии 49
    • +1
      Красиво и удобно. Must have.
      • +3
        насчет удобства погорячился
        • 0
          ну смотря как рассматривать параметр удобства. код вполне интуитивен, и без наворотов красивые чарты можно сделать чуть ли не методом тыка, и по шаблонам. Как оно дружит с вертской это уже другой вопрос. И да для работы из баз данных придется писать скрипты самому. а в целом библиотека намного лучше представленных на данный момент.
      • 0
        Здорово, мне для проекта как раз такая библиотека требуется!
        • 0
          может кто подскажет ссыльк сервиса, который позволяет подобное онлайн рисовать? кроме гугла )
          спасибо
        • 0
          уже пользуюсь данной библиотекой в одном проекте… все довольны!
          • 0
            прикольно блин, хоть и подтормаживает :) беру на заметку
            • 0
              странно. а в чем это у вас тормозит?
              у меня в ФФ 3.5 все гладко и быстро. поэтому меня эти чарты и заинтересовали, учитывая что анимация отрисовки происходит прям как в Flash.
            • +1
              на первый взгляд очень неплохая штука, на всякий случай сохранил в закладках
              • 0
                Если сравнивать некоммерческие лицензии, вы бы что предпочли — highcharts или amchart (на flash)?
                • 0
                  highcharts намного меньше весит, работает без флеш, быстрее настраивается, легче в изучении, и готов работать из коробки, достаточно внести свои данные в примеры, и готово.
                  • +2
                    минус очевиден, нельзя использовать в стартапе нацеленного на прибыль
                    • 0
                      За что минус? эту библиотеку действительно нельзя бесплатно использовать в стартапе, который предназначен для извлечения прибыли. Вопросы не ко мне, а к Highcharts лицензии.
                      • +1
                        если стартап нацелен на прибыль, то 360 баксов, это очень небольшая часть ЗП разработчика, который с этой либой может сделать что-то вменяемое
                      • НЛО прилетело и опубликовало эту надпись здесь
                        • 0
                          Спасибо за сравнение. 8000 точек — это конечно исключительное применение (не очень читабельный график, ага ;).
                          Ну и IE тоже не очень интересует, так как нам для админки — юзеры используют только нормальные браузеры.
                          • 0
                            А зачем Вам отображать 8000 точке? У Вас есть монитор с разрехением 8000 пикселей по горизонтали? :-)
                            • НЛО прилетело и опубликовало эту надпись здесь
                        • +11
                          Добавьте, пожалуйста, парочку ссылок на подобные бесплатные библиотеки.

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

                          Условно бесплатные (для некоммерческого использования):
                          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/
                        • +2
                          Очень повеселила диаграмма Запасов ядерного оружия СССР(России) и США в галерее чартов:-)
                          • 0
                            обалдеть. я и не заметил =)
                          • –4
                            Использую чарты гугла. Просто нет ничего удобнее чем указывать все параметры в GET и получать рисунок ответом. Все вычисления — облачно. Их графики просто нельзя переплюнуть никаким js. Только если придется менять графики без перезагрузки страницы — тогда они будут полезны, это да.
                            • 0
                              Чарты отличные… Посмотрите, пожалуйста, в сторону www.google.com/finance?&gl=us&hl=en&q=NASDAQ:COMS&client=fss финансовых чартов… японские свечи, баровый график… Я бы сказал для коллекции не хватает :) И динамическую подгрузку при скроллинге если диапазон слишком велик, например…
                            • 0
                              Отлично. Посоветую дребеденьгам.
                              • 0
                                Использовал до этого JS Charts и Flot

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

                                            this.chart.setTitle({text:"Заголовок"})

                                            Но когда экспортирую этот график в файлы (png,pdf...) ее стандартными средствами экспорта (кнопки справа вверху), то отображается не измененный заголовок, а тот, который был указан при создании графика.
                                            Может кто-то встречался с подобной проблемой и решил ее?
                                            • 0
                                              Ну вот, решаешь проблему пару часов, уже руки опускаются. А как обратишься за консультацией, дак через пару минут сам решишь проблему. В общем нужно использовать такой код для решения проблемы:

                                              var s='Новый заголовок'
                                              this.chart.setTitle({text:s})
                                              this.chart.options.title.text=s

                                              Может кому пригодится
                                            • 0
                                              Я тут для одного своего проекта на коленке замучился искать, как вывести несколько графиков на одной странице.

                                              Допустим:
                                              1. Температура на улице
                                              2. Температура в доме
                                              3. Температура процессора

                                              Один график запросто, несколько не могу. Подскажите пожалуйста. Доки для меня довольно сложны, я практически не знаю английский язык.

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