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

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

Для полноты картины и порядка сформируем необходимые для нас задачи:

  • Построить график простой функции (хело ворлд)
  • Ввести интерактивное изменение параметров графика (определенный отрезок по Х, количество отсчетов на промежуток и т.д.)
  • Научится забирать данные из файла и строить график по ним
В принципе пунктов не так много :)
Попробуем-ка построить синус, кода для которого валом по инету просто

<body onload=”SinePlot()”> использовано только ради вызова функции, ну а функция нам нужна будет в дальнейшем.

Вот, что получается в результате работы этого кода.

Теперь, пункт номер 2.
Для начала давайте добавим просто кнопку, по, которой график будет рисоваться график

Результат

Пришло время добавить начальное и конечное значения для оси х, а также можно сразу ввести и количество отсчетов на нашем отрезке:

Результат

Вот в этом месте я уже начал думать, что неплохо бы в формах помещать по старту какие-то дефолтные значения, что можно сделать с помощью атрибута value в теге input.

Также неплохо было бы уже сделать подписи графика

Повернуть надпись по у мне так и не удалось.

Результат.

Ну и финальный штрих – загрузка из файла.
Оказалось что с этим больше всего гемора если хотите грузить из текстового файла, или csv…
Порыпавшись пару раз вычитать обычный txt файл разнообразными методами со страшными названиями и подключаемыми библиотеками, я плюнул и просто созда файл data.js, в котором просто напросто создал массив data1, теоретически для моего будущего применения мне никто не мешает добавлять кроме цифр еще и квадратные скобки.

Результат

Ну а скукоживание по х и по y я уже буду осваивать когда попытаюсь запускать все эту бороду на своем сервере, да и может кто подскажет другой более элегантный способ :)

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">