Sådan oprettes en realtidsgraf ved hjælp af JavaScript og Pusher

Verden har brug for alt uber hurtigt nu. Der er masser af datastrømme, der genereres af forskellige systemer hver dag. De tjener til at træffe beslutninger i mange brancher. Realtidsovervågning og analyse er blevet meget vigtig i dag. Datastrømme inkluderer realtidsovervågning af websitetrafik, serverydelse, vejropdateringer og IOT-sensorer. Det er vigtigt at analysere og fortolke denne serie af data, for hvilke interaktive diagrammer og grafer er en fremragende løsning.

I denne artikel vil vi opbygge en Node.js-server til at eksponere API'er til at levere historiske data til en metric (i dette tilfælde vejr i London). Det giver også en API til at indtage nye datapunkter. Vi vil også opbygge en front-end-app med et linjediagram for at vise temperaturændringerne i vejret i London i realtid. Den applikation, vi bygger, ser sådan ud:

Tilmeld dig Pusher

Det første skridt til at starte denne tutorial er at tilmelde dig Pusher eller logge ind med dine eksisterende legitimationsoplysninger, hvis du allerede har en konto. Efter login er du nødt til at oprette en ny app og vælge Vanilla JavaScript til frontend sammen med Node.js til back-end. Du vil derefter blive bragt til en destinationsside, der indeholder 'at komme i gang'-koden for både front-end og back-end, som vi vil bruge senere i vejledningen.

Node.js Server API'er til overvågning og Analytics-system

De væsentlige API'er til alle analysesystemer til enhver metric eller enhed er:

  1. Indtagelses-API - En API til at indtage de nye datapunkter for en bestemt enhed. På vores server til dette blogindlæg opretter vi en API til at indtage nye temperaturdata på et bestemt tidspunkt for London. Denne API kan kaldes af ethvert globalt vejrsystem eller enhver IOT-sensor.
  2. Historical Data API - Denne API returnerer alle data inden for et interval fra denne dato. For vores server opretter vi en simpel API. Det vil returnere nogle statiske historiske data med begrænsede datapunkter for Londons temperaturværdier for enhver dag.

Node.js Express Server Skeleton

Vi opretter en grundlæggende Express Server sammen med at instantiere Pusher-biblioteksserverforekomsten. Vi vil oprette en ny mappe for vores projekt og oprette en ny fil server.js . Føj følgende kode til denne fil:

API til at få historiske temperaturdata

Nu vil vi tilføje nogle statiske data vedrørende Londons temperatur på bestemte tidspunkter i løbet af en dag og gemme det i enhver JavaScript-variabel. Vi udsætter også en rute for at returnere disse data, når nogen påkalder dem ved hjælp af et GET HTTP-opkald.

API til indtagelse af temperaturdatapunkt

Nu vil vi tilføje koden til at udsætte en API for at indtage temperaturen på et bestemt tidspunkt. Vi udsætter en GET HTTP API med temperatur og tid som forespørgselsparametre. Vi bekræfter, at de ikke er tomme parametre. Vi gemmer dem ved at skubbe dataPoints- arrayet til vores statiske JavaScript-variabel londonTempData . Tilføj venligst følgende kode til server.js- filen

I ovenstående kode vil vi bortset fra lagring i datakilden også udløse en begivenhed 'ny temperatur' på en ny kanal 'london-temp-chart' . For hver unikke datakilde eller et diagram kan du oprette en ny kanal.

Den begivenhed, der udløses af vores server, behandles af frontend for at opdatere diagrammet / grafen i realtid. Begivenheden kan indeholde alle de vigtige data, som diagrammet har brug for for at vise datapunktet korrekt. I vores tilfælde sender vi temperaturen på det nye tidspunkt til vores front-end.

Opbygning af frontend-appen ved hjælp af Vanilla JavaScript og Chart.js

Nu vil vi opbygge front-end applikationen. Det viser et linjediagram, der repræsenterer temperaturændringerne for London City på forskellige tidspunkter i løbet af dagen. Den vigtigste tilgang til visning af realtidsgrafer er:

  1. Vi er nødt til at foretage et første Ajax-opkald for at hente historiske data og gengive grafen med de eksisterende data.
  2. Vi abonnerer på eventuelle begivenheder for nye datapunkter, der gemmes på en bestemt kanal.

Grundlæggende HTML-skabelon

Vi opretter en ny mappe kaldet offentlig i vores projektrod og opretter derefter en ny filindeks.html i denne mappe. Denne fil indeholder den grundlæggende HTML-kode til gengivelse af en simpel overskrift og en underhoved med appens navn sammen med få ikoner. Vi importerer også Pusher JavaScript- biblioteket fra dets CDN URL.

Tilføjelse af diagrambibliotek

I JavaScript- og HTML-apps skal vi bruge enten SVG eller Canvas til at opbygge grafiske komponenter til at repræsentere matematiske grafer. Der er adskillige open source-biblioteker, der kan hjælpe dig med at gengive forskellige diagramtyper. Disse inkluderer søjlediagrammer, cirkeldiagrammer, linjediagrammer og scatter-diagrammer.

Til vores projekt vælger vi Chart.js, da det har ret simpelt API og gengiver robuste diagrammer ved hjælp af et Canvas HTML-tag. Du kan vælge ethvert kortbibliotek, men husk, at biblioteket skal have et middel til at opdatere diagrammet uden at gøre det helt igen. Chart.js giver en metode på ethvert instantieret diagram til at opdatere det.

Tilføj følgende kode til din index.html-fil på passende steder

Tilføjelse af JavaScript-fil og Instantiating Pusher-klientsidesbibliotek

Nu opretter vi en ny fil app.js i vores offentlige mappe og tilføjer også følgende kode for at instantiere Pusher-klientsidesbiblioteket.

I ovenstående kode har vi også tilføjet få hjælpemetoder til at foretage et Ajax-opkald og også vise eller skjule elementer fra DOM API.

Tilføjelse af kode for at hente historiske data

Nu vil vi tilføje koden for at hente de historiske temperaturdata for at vise grafen med de oprindelige værdier. Vi vil også instantiere et nyt diagramobjekt med en bestemt konfiguration for at gengive et linjediagram. Du kan læse mere om, hvordan du konstruerer disse konfigurationer i Chart.js-dokumentationen.

Tilføj venligst følgende kode til app.js-filen:

I ovenstående kode har vi tilføjet en funktion ved navn renderWeatherChart. Dette vil blive brugt til at gengive diagrammet ved hjælp seneste data, som er indlejret i chartConfig variablen under de centrale datasæt . Hvis vi vil tegne flere linjediagrammer på samme lærred, kan vi tilføje flere elementer til denne matrix.

Den data nøglen i hvert af elementerne i arrayet vil vise de forskellige punkter på grafen. Vi sender en ajax-anmodning til / getTemperature- API'en for at hente alle datapunkterne og placere dem i denne nøgle. Vi kalder gengivelsesmetoden for at vise grafen derefter. Nu kan vi køre kommandoen node server.jsog derefter gå til browseren med følgende URL for at se det oprindelige diagram gengivet ved hjælp af dataene.

//localhost:9000/

For at style vores app korrekt skal du tilføje følgende CSS i en ny style.css-fil inde i den offentlige mappe. Føj følgende kode til den fil:

Kode til opdatering af graf ved modtaget ny begivenhed

Nu vil vi abonnere på den unikke kanal, som vores server sender opdateringshændelser til denne graf på. For vores projekt hedder kanalen london-temp-chart, og begivenheden hedder ny temperatur . Tilføj venligst følgende kode for at behandle begivenheden, og opdater derefter diagrammet i realtid:

For at se denne kode i aktion skal du opdatere browseren, og du vil se det oprindelige diagram. Nu skal vi indtage et nyt datapunkt. Du bliver nødt til at ringe til følgende API enten ved hjælp af et mock API-kaldeværktøj eller ved hjælp af følgende URL med forskellige værdier i browseren.

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

For at teste din diagramopdateringskode kan du bruge følgende midlertidige kode i din app.js- fil. Det foretager dummy Ajax-anmodninger til ovenstående URL efter et specifikt tidsinterval.

Her er GitHub repo til reference til den komplette kode.

Konklusion

Endelig er vores realtidsanalyse-app klar. Vi vil se vejrtemperaturdiagrammet for London by opdateres i realtid.

Vi kan bruge koden fra dette blogindlæg til ethvert diagrambibliotek. Det kan også gengive enhver form for diagram som søjlediagram, scatterdiagram eller cirkeldiagram til opdatering i realtid.

Denne kode kan også bruges i flere Enterprise Apps. For eksempel overvågning af dashboards, analyserapporter, sensorregulerende apps og økonomiske apps. Pusher-biblioteket hjælper os med at sende begivenheder i realtid til alle tilsluttede apps på klientsiden. Disse apps kan forbruge dataene til at opdatere diagrammerne i realtid.

Denne artikel blev oprindeligt offentliggjort på Pushers blog.