Како се прави графикон у стварном времену помоћу ЈаваСцрипт-а и Пусхера

Свету је сада све потребно убер-брзо. Много токова података генеришу различити системи сваки дан. Они служе у доношењу одлука у многим индустријама. Надгледање и анализа у реалном времену постали су веома важни данас. Токови података укључују реално праћење промета на веб локацијама, перформансе сервера, ажурирања времена и ИОТ сензоре. Важно је анализирати и протумачити овај низ података, за које су интерактивно графикони и графикони изврсно решење.

У овом чланку ћемо изградити Ноде.јс сервер за излагање АПИ-ја који пружају историјске податке за метрику (у овом случају време у Лондону). Такође ће пружити АПИ за уношење нових тачака података. Такође ћемо правити фронт-енд апликацију са линијским графиконом за приказ промена температуре у лондонском времену у реалном времену. Апликација коју направимо изгледаће отприлике овако:

Пријава за Пусхер

Први корак за започињање овог водича је пријава на Пусхер или пријава са постојећим акредитивима ако већ имате налог. Након пријављивања, мораћете да направите нову апликацију и изаберете Ванилла ЈаваСцрипт за фронт-енд заједно са Ноде.јс за бацк-енд. Тада ћете бити преусмерени на одредишну страницу која садржи код „почетак рада“ и за предњу и за позадину, коју ћемо касније користити у водичу.

АПИ-ји Ноде.јс сервера за систем за надзор и аналитику

Основни АПИ-ји за било који аналитички систем за било који показатељ или ентитет су:

  1. АПИ за гутање - АПИ за уношење нових тачака података за било који одређени ентитет. На нашем серверу за овај пост на блогу направићемо АПИ за уношење нових података о температури у одређено време за Лондон. Овај АПИ може позвати било који глобални временски систем или било који ИОТ сензор.
  2. АПИ за историјске податке - овај АПИ ће вратити све податке у распону од овог датума у ​​времену. За наш сервер ћемо створити једноставан АПИ. Вратиће неке статичне историјске податке са ограниченим тачкама података за вредности температуре Лондона за било који дан.

Ноде.јс Екпресс Сервер Скелетон

Направићемо основни Екпресс Сервер заједно са инстанцијом инстанце сервера Пусхер библиотеке. Направићемо нову фасциклу за наш пројекат и креираћемо нову датотеку сервер.јс . Додајте следећи код у ову датотеку:

АПИ за добијање историјских података о температури

Сада ћемо додати неке статичке податке о температури Лондона у одређено време током дана и сачувати их у било којој ЈаваСцрипт променљивој. Такође ћемо изложити руту за враћање ових података кад год их неко позове помоћу ГЕТ ХТТП позива.

АПИ за уношење тачке података о температури

Сада ћемо додати код за излагање АПИ-ја за уношење температуре у одређено време. Изложићемо ГЕТ ХТТП АПИ са температуром и временом као параметрима упита. Потврдићемо да то нису празни параметри. Чувамо их гурајући у низ датаПоинтс наше статичке ЈаваСцрипт променљиве лондонТемпДата . Молимо додајте следећи код у датотеку сервер.јс

У горе наведеном коду, осим чувања у извору података, покренућемо и догађај „нова температура“ на новом каналу „лондон-темп-цхарт“ . За сваки јединствени извор података или графикон можете створити нови канал.

Догађај који је покренуо наш сервер обрадиће фронт-енд да би ажурирао графикон / графикон у реалном времену. Догађај може садржати све важне податке који су графикону потребни за правилно приказивање тачке података. У нашем случају, температуру ћемо у ново време слати на наш фронт-енд.

Изградња Фронт-Енд апликације користећи Ванилла ЈаваСцрипт и Цхарт.јс

Сада ћемо направити фронт-енд апликацију. Приказаће се линијска карта која приказује промене температуре у Лондон Цити-у у различито доба дана. Кључни приступ за приказивање графова у реалном времену је:

  1. Морамо упутити почетни Ајаков позив да дохватимо историјске податке и прикажемо графикон са постојећим подацима.
  2. Претплатићемо се на све догађаје за нове тачке података које се чувају на одређеном каналу.

Основни ХТМЛ предложак

Направићемо нову фасциклу која се зове публиц у корену нашег пројекта, а затим ћемо у овој фасцикли направити нову датотеку индек.хтмл . Ова датотека ће садржати основни ХТМЛ код за приказивање једноставног заглавља и потнаслова са именом апликације, заједно са неколико икона. Такође ћемо увести ЈаваСцрипт библиотеку Пусхер са ЦДН УРЛ адресе.

Додавање библиотеке графикона

У ЈаваСцрипт и ХТМЛ апликацијама морамо да користимо СВГ или Цанвас за изградњу графичких компоненти које представљају математичке графиконе. Постоје бројне библиотеке отвореног кода које вам могу помоћи да прикажете различите типове графикона. Ту спадају тракасти, тортни, линијски и скатер.

За наш пројекат ћемо одабрати Цхарт.јс јер има прилично једноставан АПИ и приказује робусне графиконе користећи Цанвас ХТМЛ ознаку. Можете да изаберете било коју библиотеку графикона, али имајте на уму да би библиотека требало да има средства за ажурирање графикона без да га у потпуности поново приказује. Цхарт.јс пружа метод на било којем инстанцираном графикону за његово ажурирање.

Додајте следећи код у своју датотеку индек.хтмл на одговарајућим местима

Додавање ЈаваСцрипт датотеке и инстанцирање библиотеке на страни клијента

Сада ћемо створити нову датотеку апп.јс у нашој јавној фасцикли, а такође ћемо додати следећи код за инстанцирање библиотеке на страни клијента Пусхер.

У горњи код смо додали и неколико корисних метода за упућивање Ајак позива и такође приказивање или скривање елемената из ДОМ АПИ-ја.

Додавање кода за преузимање историјских података

Сада ћемо додати код за преузимање историјских података о температури за приказ графикона са почетним вредностима. Такође ћемо инстанцирати нови објекат Цхарт са одређеном конфигурацијом да прикажемо Лине Цхарт. Можете прочитати више о томе како конструисати ове конфигурације у документацији Цхарт.јс.

Додајте следећи код у датотеку апп.јс:

У горњи код додали смо функцију која се зове рендерВеатхерЦхарт. Ово ће се користити за приказивање графикона помоћу најновијих података који су уграђени у променљиву цхартЦонфиг под кључним скуповима података . Ако желимо да нацртамо више графикона на истом платну, можемо додати више елемената у овај низ.

Подаци кључ у сваком од елемената низа ће приказати различите тачке на графикону. Учинићемо ајак захтев на / гетТемпературе апи да преузме све тачке података и стави их у овај кључ. Тада ћемо позвати метод рендеровања да би се приказао графикон. Сада можемо покренути команду, node server.jsа затим отићи до прегледача са следећом УРЛ адресом да бисмо видели почетни графикон приказан помоћу података.

//localhost:9000/

Да бисте правилно обликовали нашу апликацију, додајте следећи ЦСС у нову датотеку стиле.цсс унутар јавне фасцикле. Додајте следећи код у ту датотеку:

Код за ажурирање графикона о новом примљеном догађају

Сада желимо да се претплатимо на јединствени канал на који ће наш сервер слати догађаје ажурирања за овај графикон. За наш пројекат, канал се зове лондон-темп-цхарт, а догађај нова температура . Додајте следећи код за обраду догађаја, а затим ажурирајте графикон у реалном времену:

Да бисте видели овај код на делу, морате освежити прегледач и видећете почетни графикон. Сада морамо да унесемо нову тачку података. Морали бисте да позовете следећи АПИ или помоћу неке лажне алатке за позивање АПИ-ја или користећи следећу УРЛ адресу са различитим вредностима у прегледачу.

//localhost:9000/addTemperature?temperature=17&time=1500

Да бисте тестирали код за ажурирање графикона, можете да користите следећи привремени код у датотеци апп.јс. Учиниће лажне Ајак захтеве на горњу УРЛ адресу након одређеног временског интервала.

Овде је ГитХуб репо за референцу на комплетан код.

Закључак

Коначно, наша апликација за аналитику у стварном времену је спремна. Графикон временске температуре за град Лондон видећемо како се ажурира у реалном времену.

Код из овог блога можемо користити за било коју библиотеку графикона. Такође може приказати било коју врсту графикона као што су тракасти, расејани или тортни графикон за ажурирање у стварном времену.

Овај код се такође може користити у више апликација за предузећа. На пример, надгледање контролних табли, извештаја аналитике, апликација за регулацију сензора и финансијских апликација. Библиотека Пусхер нам помаже да шаљемо догађаје у реалном времену у све повезане апликације на страни клијента. Ове апликације могу да троше податке за ажурирање графикона у реалном времену.

Овај чланак је првобитно објављен на Пусхеровом блогу.