Графики с помощью flotr2

Как я писал ранее, на вебсервере мне понадобятся графики, ну и для одного калькулятора на сайт тоже сейчас хотелось бы визуализации. Поэтому здесь я соберу шпаргалку по поднятию и настройке отрисовки графиков с помощью 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 я уже буду осваивать когда попытаюсь запускать все эту бороду на своем сервере, да и может кто подскажет другой более элегантный способ 🙂

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.