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

Итак, сначала необходимо подключить к веб-странице несколько необходимых файлов, среди которых, конечно же, файл библиотеки jQuery – jquery-1.3.2.min.js. Кроме этого надо подключить файл плагина jquery.jqplot.min.js и файл его стилевого оформления jquery.jqplot.css.
Я не упомянул еще об одном подключаемом файле, который предназначен для браузеров IE – excanvas.js. Для того, чтобы создавать графические формы, рисовать линии, вращать изображения, плагин использует тэг canvas – элемент спецификации Web Applications 1.0, которая со временем, вероятно, воплотится в язык HTML5. Браузеры FireFox, Opera, Chrome, Safari поддерживают тэг canvas. Как обычно, исключением оказался Internet Explorer – не то, что в 6 и 7 версиях, даже в 8 версии поддержка этого тэга не планируется. Тут на помощь пришла компания Google, реализовав для IE полноценный API Canvas – это и есть файл excanvas.js.

Если Вы подключили все необходимые файлы, можно заняться html-разметкой:

<div id="example" style="height:320px; width:400px;"></div>

И всего-то… В элемент div с идентификатором #example будем выводить получившиеся графики.

Первый пример самый простейший – используем практически все настройки по умолчанию.

$(function(){
  $.jqplot("example",  [ [
                 [0,0], [1,2],
                 [3,5.12], [5,13.1],
                 [7,33.6], [9,85.9],
                 [11,219.9]
  ] ]);
});

Мы передали плагину всего два параметра – идентификатор элемента, в который будет осуществляться вывод графика и координаты точек, по которым этот график будет построен. Все остальное плагин jqPlot проделал вполне самостоятельно и мы получили в итоге следующий график:

Есть еще необязательный (но на практике очень важный) параметр – объект, в котором плагину передаются многочисленные настройки. Получается, что применить на веб-странице плагин jqPlot с настройками по умолчанию очень легко, но гораздо сложнее изучить эти настройки. Этим и займемся…

$(function(){
  line1 = [[1,2],[2,4],[3,8],[4,16],[5,8],[6,4],[7,2]];
  line2 = [4, 8, 16, 24, 16, 16, 8];
  line3 = [16, 16, 12, 18, 26, 24, 6];
  $.jqplot("example",
           [line1,line2,line3],
           {
           	 title: "Демонстрационный график",
           	 axes: {
           	 	yaxis: {
           	 		min:0, max:30
           	 	 },
           	 	 xaxis: {
           	 	 	min:0, max:8
           	 	 }
           	 },
           	 series: [
           	   { color:"#4bb2c5",label:"Николай" },
           	   { color:"#EAA228",label:"Алексей" },
           	   { color:"#839557",label:"Василий" }
           	 ],
           	 legend: {
           	 	show: true,
           	 	location: "ne",
           	 	xoffset: 12,
           	 	yoffset: 12 }
           }
          );
});

На первый взгляд все очень-очень сложно. Но это только так кажется. Посмотрите, какой получился график в результате выполнения этого кода, а потом расшифруем, что же мы тут понаписали….

Подготавливаем три массива, по которым будут построены три графика. Затем мы вызываем плагин jqPlot, которому в первом аргументе передаем идентификатор элемента, в который будут выводиться графики, во втором аргументе передается массив из приготовленных ранее данных, и, наконец, третий аргумент – объект с настройками плагина. Если с первыми двумя аргументами все более или менее понятно, то с третьим аргументом знакомство только предстоит.

Итак, первое свойство объекта, которое называется title – его значением является строка, в которой можно указать название графика.

Следующее свойство имеет название axes. Значение этого свойства в свою очередь также является объектом, в свойствах yaxis и xaxis которого описываются соответствующие оси координат. И опять значениями свойств yaxis и xaxis являются объекты, но уже описывающие конкретные характеристики осей координат. В примере, в свойствах min и max указаны минимальные и максимальные значения для соответствующих шкал.

Следующее свойство объекта настроек – свойство series, является массивом, каждый элемент которого есть объект, характеризующий какой-либо из графиков. Нетрудно догадаться, что свойство color описывает цвет, а в свойстве label хранится метка для соответствующего графика.

Последнее свойство, представленное в примере – свойство legend. Это объект, характеризующий легенду графика. Свойство show этого объекта принимает логические значения. В случае true плагин будет отображать легенду. Свойство location – расположение легенды. Значение ne заставит плагин расположить легенду в правом верхнем углу, т.е. ne – это nord-east, на северо-востоке. Свойства xoffset и yoffset определят отступы легенды от края.

Попробуем создать круговую диаграмму, для чего используем вот такой код:

$(function(){
  line1 = [["груши",3],
           ["яблоки",7],
           ["апельсины",2.5],
           ["бананы",6],
           ["арбузы",5],
           ["дыни",4]];
  $.jqplot("example", [line1], {
    title: "Пример круговой диаграммы",
    seriesDefaults: {
      renderer: $.jqplot.PieRenderer,
      rendererOptions: {
        sliceMargin:8
      }
    },
    legend: { show:true }
  });
});

А вот результат выполнения этого кода:

Среди подключаемых внешних файлов произошли изменения. Дополнительно был подключен файл plugins/jqplot.pieRenderer.min.js, который служит как раз для того, чтобы иметь возможность организовать круговую диаграмму.
Вообще, надо отметить, что jqPlot, который является плагином для библиотеки jQuery, в свою очередь имеет некоторое количество собственных плагинов, которые используются для реализации различных видов графиков и действий над ними. Одним из таких плагинов и является файл jqplot.pieRenderer.min.js.

Рассмотрим javascript-код. В начале все практически так же, как и в предыдущих примерах. Готовим данные для построения диаграммы, которые храним в переменной line1. Обратите внимание, что метку можно указать непосредственно в массиве, описывающем конкретную величину. Затем вызываем плагин jqPlot, которому в первом аргументе передаем идентификатор элемента, в котором будет построена диаграмма. Во втором аргументе передаем массив, содержащий данные для построения диаграммы. И, наконец, третий аргумент – объект с настройками.

Первое и третье свойства этого объекта нам уже знакомы. Свойство title определяет заголовок диаграммы, а legend в данном случае заставит плагин отображать легенду диаграммы.

А вот с важным свойством seriesDefaults мы пока не встречались. Значением этого свойства является объект, в котором определяются настройки по умолчанию. Передавая в этом объекте его отдельные свойства, можно переопределить поведение плагина. Так мы изменяем значение опции renderer на $.jqplot.PieRenderer, в отличие от определенного по умолчанию значения $.jqplot.LineRenderer для того, чтобы рисовать не линейные графики, а круговую диаграмму. В опции rendererOptions, значение которой в свою очередь тоже является объектом, передаем одну из настроек – sliceMargin, для того чтобы организовать отступы между сегментами круговой диаграммы.

Следующий пример – диаграмма, где значения представлены в виде столбцов. Код примера:

$(function(){
  line1 = [14, 32, 41, 44, 40, 37, 29];
  line2 = [7, 12, 15, 17, 20, 27, 39];
  $.jqplot("example", [line1, line2], {
    title: "Пример диаграммы с метками значений",
    stackSeries: true,
    seriesDefaults: {
      renderer: $.jqplot.BarRenderer,
      rendererOptions: { barMargin: 25 },
      pointLabels: { stackedValue: true }
    },
    axes: {
      xaxis:{ renderer:$.jqplot.CategoryAxisRenderer },
      yaxis:{ ticks:[0, 20, 40, 60, 80] }
    }
  });
});

и то, что получается в итоге:

Мы были вынуждены подключить довольно большое количество внешних файлов для реализации такой диаграммы. Помимо библиотеки jQuery, стилевого файла плагина jqPlot и собственно самого файла плагина, потребовались файлы plugins/jqplot.barRenderer.min.js, plugins/jqplot.categoryAxisRenderer.min.js и plugins/jqplot.pointLabels.min.js.

На этот раз готовим данные в двух массивах – line1 и line2. Вызываем плагин jqPlot. Первый параметр – идентификатор элемента div, куда выводится диаграмма. Второй параметр – данные. Третий параметр – объект с настройками.

Опция title нам уже хорошо знакома – это заголовок диаграммы. С опцией stackSeries только предстоит познакомиться. Она может принимать логические значения. В данном случае значение true заставит плагин расположить столбцы друг за другом – «стопкой».

Следующая опция seriesDefaults нам тоже немного знакома. В свойстве renderer указываем значение $.jqplot.BarRenderer, чтобы рисовать диаграмму в виде столбцов. В свойстве rendererOptions передаем объект только с одним свойством barMargin, чтобы установить размеры полей для столбцов диаграммы.

И, наконец, опция pointLabels, в которой передаем плагину еще один объект с одним свойством – stackedValue. Значение true в нашем случае определит отображение значений столбцов диаграммы такой же «стопкой», как и сами столбцы.

Последние свойство в объекте настроек – axes, поможет нам описать оси координат в том виде, в котором мы их хотим видеть. В свойстве xaxis передаем объект, где в опции renderer указываем значение $.jqplot.CategoryAxisRenderer – т.е. плагин для jqPlot, который будет использован для построения оси X. Теперь значения шкалы не будут рассчитываться автоматически. Вместо этого под каждым столбцом диаграммы будет указано название категории, и поскольку мы не указали явно эти названия, то они будут обозначены цифрами. В свойстве yaxis передаем объект, где в опции ticks указываем массив, значения которого будут использованы для построения оси Y.

И наконец, последний пример – Вы его уже могли испытать в самом начале, там где можно изменять график с помощью мыши. Вот js-код:

$(function(){
  line1=[4, 25, 13, 22, 14, 17, 15];
  $.jqplot("example", [line1],
    { title: "Изменяемые значения и линия тренда" }
  );
});

Мы подключили два плагина: plugins/jqplot.dragable.min.js и plugins/jqplot.trendline.min.js. Первый реализует возможность перемещения узлов графика с помощью указателя мыши, второй – рассчитывает линию тренда.
Сам javascript-код довольно прост, так как мы не передаем никаких дополнительных настроек, за исключением заголовка. Остальные действия выполняем как обычно – готовим данные, вызываем плагин, которому передаем идентификатор целевого элемента, данные и немного настроек.

Скачать примеры статьи (рус.)
Сайт плагина jqPlot (англ.)
Скачать плагин jqPlot (англ.)
Демо на сайте разработчиков плагина (англ.)
Туториал по опциям плагина (англ.)
Перечень всех опций в удобочитаемом виде (англ.)

Вы можете скачать исходный код примера, и воспроизвести это пример на своем сайте.

В этом примере не используется ни JavaScript, ни какие-либо другие приложения. Используется только HTML-разметка и CSS.

Повторюсь, я немного «оживил» пример, добавив php-код, который генерирует набор случайных двузначных чисел. Нажмите кнопку «Пересчитать» и диаграмма изменится.

Стоит только осознать идею Алена, как все становится понятным. Для построения диаграммы выбран элемент dl (definition list). Но можно рассматривать элементы dt (definition titles) как пункты по оси X и элементы dd (definition descriptions) как значения по оси Y.

Чтобы понять это, давайте посмотрим на пример разметки диаграммы без стилевого оформления. Вот так это выглядит:

1-й день

27

2-й день

53

А вот соответствующий этому HTML-код:

<dl>
  <dt>1-й день</dt>
  <dd>27</dd>
  <dt>2-й день</dt>
  <dd>53</dd>
</dl>

Далее добавляем внутрь элементов dd элементы span и внутри них элементы em. Элементам span назначаем имена классов. В итоге должно получиться вот это:

<dd><span class="type2 p80"><em>80</em></span></dd>

Теперь начнем разбираться с таблицей стилей.

dl#csschart, dl#csschart dt, dl#csschart dd{
    margin:0;
    padding:0;
}
dl#csschart{
    background:url(bg_chart.gif) no-repeat 0 0;
    width:400px;
    height:400px;
}

Удаляем установленные по умолчанию поля и отступы и в следующем правиле задаем для элемента dl свойство background и определяем его ширину width и высоту height.
Файл bg_chart.gif – картинка фона для диаграммы в которой нарисованы оси X и Y. Картинка как раз имеет размеры 400х400 px.

dl#csschart dt{
    display:none;
}

Делаем невидимыми элементы dt, поскольку информация, содержащаяся в них (1-й день, 2-й день,…) нам не нужна.
Дальше – интереснее…. Элемент dd содержит два дочерних элемента – span и em. Таким образом можно манипулировать тремя элементами.
Элементы dd позиционируются с помощью добавления полей, установки их высоты в 100% и ширины в соответствии с шириной шага сетки на фоновой картинке. Элементы dd включаются в «плавающую» модель (float:left;), используется относительное (position:relative;) позиционирование, что позволяет сопоставлять дочерние по отношению к dd элементы (span и em) со своим родителем (dd). Ниже это можно увидеть в CSS-коде.

dl#csschart dd{
  position:relative;
  float:left;
  width:36px;
  height:360px;
  margin-top:20px;
}
dl#csschart dd.first{
  margin-left:22px;
}

Элементы span выполняют роль колонок, позиционируются абсолютно относительно своего родительского элемента (dd) и располагаются в самом низу, что позволяет им «вырастать» до нужного размера, базируясь на значении количества процентов. Элементы em – квадратики, где цифрами отображается количество процентов. Кусочек этого кода приведен ниже:

dl#csschart span{
  position:absolute;
  display:block;
  width:33px;
  bottom:0;
  left:0;
  z-index:1;
  color:#555;
  text-decoration:none;
}
dl#csschart span em{
  display:block;
  font-style:normal;
  float:left;
  line-height:200%;
  background:#fff;
  color:#555;
  border:1px solid #b1b1b1;
  position:absolute;
  top:50%;
  left:3px;
  text-align:center;
  width:23px;
}

Но как же получается требуемая высота?
Давайте снова обратим внимание на HTML-разметку.

<dd><span class="type2 p80"><em>80</em></span></dd>

Мы увидим, что элемент span имеет два css класса.
Первый класс определяет тип столбика диаграммы, посмотрите css-код и тут все станет понятно:

dl#csschart span.type1 {
  background:url(type1.gif) repeat-y;
}
dl#csschart span.type2{
  background:url(type2.gif) repeat-y;
}
dl#csschart span.type3{
  background:url(type3.gif) repeat-y;
}
dl#csschart span.type4{
  background:url(type4.gif) repeat-y;
}

Просто в качестве фонового изображения используются небольшие разноцветные полоски.
Второй же класс (p0 – p100) фактически определяет высоту элементов span.

dl#csschart span.p0{height:0%;}
dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}
dl#csschart span.p3{height:3%;}
dl#csschart span.p4{height:4%;}
.........................
dl#csschart span.p99{height:99%;}
dl#csschart span.p100{height:100%;}

Вот так работает эта штука.