5Graph - jQuery легкий гибкий плагин для построения HTML5 графиков. Возможности 5Graph:

  • Псотроение нескольких графиков на одном канвасе;
  • Гибкая настройка каждого графика;
  • Построковая настройка всплывающих подсказок;
  • Автоматическая маштабируемость графика;

Первое что нужно сделать подключить jQuery на страницу так как без него плагин не будет работать затем подключить сам плагин. Его можно скачать и подключить локально.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://graph.prootime.ru/code/5graph.min.js" ></script>

После чего вам станет доступна функция plotgraph() которой нужно передать четыре параматра которые лучше брать с генератора, как пользоваться генератором и в целом плагином показано на следующем видео:

plotgraph([id канваса],[массив с точками],[массив общих настроек],[настройки всплвающих подсказок])

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

//массив точек с описаниями
var data = {'graph': [
	{'point': [
		{"val": 40, "gval":"10 июня", "desc": "Строка 1"},
		{"val": 60, "gval":"11 июня", "desc": "Строка 1"},
		{"val": 50, "gval":"12 июня", "desc": "Строка 1"},
		{"val": 10, "gval":"13 июня", "desc": "Строка 1"},
		{"val": 40, "gval":"14 июня", "desc": "Строка 1"},
		{"val": 20, "gval":"15 июня", "desc": "Строка 1"},
		{"val": 30, "gval":"16 июня", "desc": "Строка 1"},
		{"val": 50, "gval":"17 июня", "desc": "Строка 1"},
		{"val": 30, "gval":"18 июня", "desc": "Строка 1"},
		{"val": 100, "gval":"19 июня", "desc": "Строка 1"},
		{"val": 80, "gval":"20 июня", "desc": "Строка 1"},
		{"val": 70, "gval":"21 июня", "desc": "Строка 1"}    
	],
	'properties':{
		'linecolor':'#8cb9c8', //цвет линий соединящих точки графика
		'pointcolor':'#8cb9c8', //цвет точек
		'spacecolor':'#8cb9c8', //цвет области под графиком
		'linewidth':2, //толщина линий соединяющие точки
		'pointradius':3, //радиус точек
		'spacealpha':0.1, //степень прозрачности области под графиком
		'activepointwidth':4 //радиус активной точки
	}
	}]};

//массив с основными настройками 	
var properties = {
	"background":"#ffffff", //общий фон 
	"linescolor":"#dbdbdb", //цвет сетки
	"lineswidth":1, //ширина линий сетки
	"gridwidth":141, //минимальное расстояние между вертикальными линиями
	"gorizontfontcolor":"#969696", //цвет текста на горизонтальных линиях
	"verticalfontcolor":"#969696", //цвет текста на вертикальных линиях
	"gorizontfont":"bold 11px Arial", //шрифт на горизонтальных линиях
	"verticalfont":"bold 11px Arial", //шрифт на вертикальных линиях
};

//массив для настройки вида вспывающих подсказок
var hints = {
	'background':'#4a4a4a', //фон подсказки
	'bordercolor':'#000', //цвет границы
	'borderwidth':2, //ширина границы
	'paddingtb':2, //отступы сверху и снизу
	'paddinglr':5, //отступы слева и справа
	'borderradius':6, //закругленность прямоугольника
	'lineheight':2, //расстояние между строками
	'font':[ //шрифты построчно
		{'color':'#fff','font':'bold 12px Verdana'}//первоя строка    
	]
};
					

Обсуждаем плагин на этой странице: http://prootime.ru/5graph-jquery-pugin

Общие настройки графика
1. Количество графиков
1
2. Цвет фона
3. Цвет сетки
4. Ширина линий сетки
1
5. Минимальное расстояние между вертикальными линиями
150
6. Цвет текста на горизонтальных линиях
7. Цвет текста на вертикальных линиях
8. Шрифт на горизонтальных линиях
9. Шрифт на вертикальных линиях
Настройки подсказок
1. Фон подсказки
2. Цвет границы
3. Ширина границы
2
4. Отступы сверху и снизу
2
5. Отступы слева и справа
5
6. Закругленность прямоугольника
6
7. Расстояние между строками
2
8.1 Цвет первой строчки
8.2 Цвет второй строчки
8.3 Цвет третей строчки
8.4 Цвет четвертой строчки
8.5 Цвет пятой строчки
9.1 Шрифт первой строчки
9.2 Шрифт второй строчки
9.3 Шрифт третей строчки
9.4 Шрифт четвертой строчки
9.5 Шрифт пятой строчки
Настройки графика [ 1 ]
1. Цвет линий соединящих точки графика
2. Цвет точек
3. Цвет области под графиком
4. Толщина линий соединяющие точки
2
5. Радиус точек
3
6. Степень прозрачности области под графиком
0.1
7. Радиус активной точки
4
Настройки графика [ 2 ]
1. Цвет линий соединящих точки графика
2. Цвет точек
3. Цвет области под графиком
4. Толщина линий соединяющие точки
2
5. Радиус точек
3
6. Степень прозрачности области под графиком
0.1
7. Радиус активной точки
4
Настройки графика [ 3 ]
1. Цвет линий соединящих точки графика
2. Цвет точек
3. Цвет области под графиком
4. Толщина линий соединяющие точки
2
5. Радиус точек
3
6. Степень прозрачности области под графиком
0.1
7. Радиус активной точки
4
Настройки графика [ 4 ]
1. Цвет линий соединящих точки графика
2. Цвет точек
3. Цвет области под графиком
4. Толщина линий соединяющие точки
2
5. Радиус точек
3
6. Степень прозрачности области под графиком
0.1
7. Радиус активной точки
4
Настройки графика [ 5 ]
1. Цвет линий соединящих точки графика
2. Цвет точек
3. Цвет области под графиком
4. Толщина линий соединяющие точки
2
5. Радиус точек
3
6. Степень прозрачности области под графиком
0.1
7. Радиус активной точки
4

После подключения плагина к странице вам доступна функция plotgraph() которой нужно передать 4 пареметра первый параметр ид канваса на котором будет построен график, например #canvas, вторым параметром нужно передать в данные графиков, это значение каждой точки графика, его описание и настройки внешнего вида графика в подмассиве. Третим параметром передаеьтся массив общих настроек графика это общий фон, цвет и тольщина сетки и т.д. , четвертым параметром настройки всплывающих подсказок.

Данные графиков
point Массив точек с описаниями
properties Массив настроек внешнего вида данного графика
properties.linecolor Цвет линий соединящих точки графика
properties.pointcolor Цвет точек
properties.spacecolor Цвет области под графиком
properties.linewidth Толщина линий соединяющие точки
properties.pointradius Радиус точек
properties.spacealpha Степень прозрачности области под графиком
properties.activepointwidth Радиус активной точки
Общие настройки
background Общий фон
linescolor Цвет сетки
lineswidth Ширина линий сетки
gridwidth Минимальное расстояние между вертикальными линиями
gorizontfontcolor Цвет текста на горизонтальных линиях
verticalfontcolor Цвет текста на вертикальных линиях
gorizontfont Шрифт на горизонтальных линиях
verticalfont Шрифт на вертикальных линиях
Настройки подсказок
background Фон подсказки
bordercolor Цвет границы
borderwidth Ширина границы
paddingtb Отступы сверху и снизу
paddinglr Отступы слева и справа
borderradius Закругленность прямоугольника
lineheight Расстояние между строками