Как я писал ранее, на вебсервере мне понадобятся графики, ну и для одного калькулятора на сайт тоже сейчас хотелось бы визуализации. Поэтому здесь я соберу шпаргалку по поднятию и настройке отрисовки графиков с помощью flotr2.
Для полноты картины и порядка сформируем необходимые для нас задачи:
- Построить график простой функции (хело ворлд)
- Ввести интерактивное изменение параметров графика (определенный отрезок по Х, количество отсчетов на промежуток и т.д.)
- Научится забирать данные из файла и строить график по ним
В принципе пунктов не так много 🙂
Попробуем-ка построить синус, кода для которого валом по инету просто
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="flotr2.min.js"></script>
<script language="javascript">
function SinePlot()
{
var
d = [], // data series
i, graph;
// Generate first data set
for (i = 0; i < 20; i += 0.1) {
d.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(document.getElementById("chart"), [ d ], {
lines: {show:true},
mouse: {show:true, relative: true}
});
}
</script>
<title></title>
</head>
<body onload="SinePlot()">
<div id='chart' style="width:600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
</body>
</html>
<body onload=”SinePlot()”> использовано только ради вызова функции, ну а функция нам нужна будет в дальнейшем.
Теперь, пункт номер 2.
Для начала давайте добавим просто кнопку, по, которой график будет рисоваться график
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="flotr2.min.js"></script>
<script language="javascript">
function SinePlot()
{
var
d = [], // data series
i, graph;
// Generate first data set
for (i = 0; i < 20; i += 0.1) {
d.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(document.getElementById("chart"), [ d ], {
lines: {show:true},
mouse: {show:true, relative: true}
});
}
</script>
<title></title>
</head>
<body>
<div id='chart' style="width:600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<form name="PlotForm">
<input type="button" name="Plot" value=" Plot " onClick="SinePlot()">
</form>
</body>
</html>
Пришло время добавить начальное и конечное значения для оси х, а также можно сразу ввести и количество отсчетов на нашем отрезке:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="flotr2.min.js"></script>
<script language="javascript">
function SinePlot(obj)
{
var
d = [], // data series
i, graph;
// Generate first data set
for (i = obj.Xstart.value*1; i < obj.Xstop.value*1; i += (obj.Xstop.value*1 - obj.Xstart.value*1)/obj.SmplNumber.value*1 ) {
d.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(document.getElementById("chart"), [ d ], {
lines: {show:true},
mouse: {show:true, relative: true}
});
}
</script>
<title></title>
</head>
<body>
<div id='chart' style="width:600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<form name="PlotForm">
Number of samples <input type="text" name="SmplNumber" size="20">
<br>
X from <input type="text" name="Xstart" size="20"> to <input type="text" name="Xstop" size="20">
<input type="button" name="Plot" value=" Plot " onClick="SinePlot(this.form)">
</form>
</body>
</html>
Вот в этом месте я уже начал думать, что неплохо бы в формах помещать по старту какие-то дефолтные значения, что можно сделать с помощью атрибута value в теге input.
Также неплохо было бы уже сделать подписи графика
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="flotr2.min.js"></script>
<script language="javascript">
function SinePlot(obj)
{
var
d = [], // data series
i, graph;
// Generate first data set
for (i = obj.Xstart.value*1; i < obj.Xstop.value*1; i += (obj.Xstop.value*1 - obj.Xstart.value*1)/obj.SmplNumber.value*1 ) {
d.push([i, Math.sin(i)]);
}
// Draw Graph
graph = Flotr.draw(document.getElementById("chart"), [ d ], {
lines: {show:true},
mouse: {show:true, relative: true},
xaxis: {title:"time, s"},
yaxis: {titleAngle: 90, title:"Amplitude, V"}
});
}
</script>
<title></title>
</head>
<body>
<div id='chart' style="width:600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<form name="PlotForm">
Number of samples <input type="text" name="SmplNumber" value="1024" size="20">
<br>
X from <input type="text" name="Xstart" size="20" value="0"> to <input type="text" name="Xstop" value="20" size="20">
<input type="button" name="Plot" value=" Plot " onClick="SinePlot(this.form)">
</form>
</body>
</html>
Повернуть надпись по у мне так и не удалось.
Ну и финальный штрих – загрузка из файла.
Оказалось что с этим больше всего гемора если хотите грузить из текстового файла, или csv…
Порыпавшись пару раз вычитать обычный txt файл разнообразными методами со страшными названиями и подключаемыми библиотеками, я плюнул и просто созда файл data.js, в котором просто напросто создал массив data1, теоретически для моего будущего применения мне никто не мешает добавлять кроме цифр еще и квадратные скобки.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="flotr2.min.js"></script>
<script type="text/javascript" src="data.js"></script>
<script language="javascript">
function SinePlot(obj)
{
var
d = [], // data series
d2 = [],
i, graph;
// Draw Graph
graph = Flotr.draw(document.getElementById("chart"), [ data1 ], {
lines: {show:true},
mouse: {show:true, relative: true},
xaxis: {title:"time, s"},
yaxis: {titleAngle: 90, title:"Amplitude, V"}
});
}
</script>
<title></title>
</head>
<body>
<div id='chart' style="width:600px;height:400px;"></div>
<!--[if lt IE 9]><script src="js/excanvas.min.js"></script><![endif]-->
<input type="button" name="Plot" value=" Plot " onClick="SinePlot(this.form)">
</form>
</body>
</html>
Ну а скукоживание по х и по y я уже буду осваивать когда попытаюсь запускать все эту бороду на своем сервере, да и может кто подскажет другой более элегантный способ 🙂