Highcharts. Документация: 1. Установка

Highcharts использует либо JQuery, MooTools и Prototype. Вам необходимо включить JavaScript файлs в заголовке вашей веб-страницы. Если вы уже подключили JQuery, вы можете пропустить первый пункт. Используйте этот код, чтобы включить Highcharts с JQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

В то время как JQuery адаптер встроен в Highcharts и Highstock, адаптер MooTools и Prototype адаптер должен быть включен отдельно. Используйте этот код, чтобы включить Highcharts с MooTools:

<script src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.2/mootools-yui-compressed.js" type="text/javascript"></script>
<script src="/js/adapters/mootools-adapter.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

и использовать этот код, чтобы включить Highcharts с Prototype:

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js" type="text/javascript"></script>
<script src="/js/adapters/prototype-adapter.js" type="text/javascript"></script>
<script src="/js/highcharts.js" type="text/javascript"></script>

Если вы устанавливаете Highstock, процедура такая же, как и выше, кроме имени файла JavaScript highstock.js, а не highcharts.js. Highcharts версии 1.x строились на excanvas.js для рендеринга в IE. С Highcharts 2,0 (и все Highstock версии) IE VML визуализации построения в библиотеке.

В сценарии тег в загодовке вашей веб-странице или в отдельном файл JS, добавить код JavaScript для инициализации графика. Обратите внимание, что идентификатор div, где вы хотите поместить диаграмму (см. № 3) приведены в renderTo опцию ниже:

var chart1; // globally available

$(document).ready(function() {

      chart1 = new Highcharts.Chart({

         chart: {

            renderTo: 'container',

            type: 'bar'

         },

         title: {

            text: 'Fruit Consumption'

         },

         xAxis: {

            categories: ['Apples', 'Bananas', 'Oranges']

         },

         yAxis: {

            title: {

               text: 'Fruit eaten'

            }

         },

         series: [{

            name: 'Jane',

            data: [1, 0, 4]

         }, {

            name: 'John',

            data: [5, 7, 3]

         }]

      });

   });

Приведенный выше код использует JQuery специфический способ запуска кода когда документ готов, как объясняется в документации JQuery. Если вы используете MooTools, вместо $(document).ready() синтаксиса вы написать немного по-другому:

<script type="text/javascript">
   window.addEvent('domready', function() {
      var chart1 = .......

Если для вставки диаграммы, имеется отдельный метод вызова конструктора Highcharts.StockChart . То в этих диаграммах, как правило,  данные предоставляются в отдельном массиве JavaScript, либо взяты из отдельного файла JavaScript или вызова Ajax на сервер.

var chart1; // globally available
$(document).ready(function() {
      chart1 = new Highcharts.StockChart({
         chart: {
            renderTo: 'container'
         },
         rangeSelector: {
            selected: 1
         },
         series: [{
            name: 'USD to EUR',
            data: usdtoeur // predefined JavaScript array
         }]
      });
   });

Добавьте div в веб-страницу. Назначьте ему идентификатор ссылки по возможности renderTo в № 2, а также установить определенную ширину и высоту, которая будет шириной и высотой диаграммы.

<div id="container" style="width: 100%; height: 400px"></div>

Кроме того, можно применять глобальную тему для ваших графиках. Тема - просто набор вариантов, которые применяются через метод Highcharts.setOptions. Дистрибутив содержит четыре стандартные темы. Чтобы применить тему из одного из этих файлов,  добавьте сразу после включения highcharts.js файл:

<script type="text/javascript" src="/js/themes/gray.js"></script>

Оригинал: highcharts documentation