Rad s MongoDB grafikonima i novim JavaScript SDK -om

Podaci se spominju kao ulje 21. stoljeća. Ako je to točno, tada je vizualizacija podataka rafinerija koja pretvara sirove informacije u djelotvorne uvide. MongoDB je uvijek olakšavao i prilagodio rad s podacima, a nedavno je bezbolno vizualizirao vaše podatke pomoću MongoDB ljestvice .

reagirati izvorna traka kartica

MongoDB grafikoni omogućuju vam analizu, razumijevanje i poduzimanje radnji u vezi s vašim podacima. Jednostavno povežete izvor podataka MongoDB i u roku od nekoliko sekundi moći ćete stvoriti moćne grafikone i grafikone kako biste stekli uvid u svoje podatke. To vam omogućuje jednostavno stvaranje nadzornih ploča poput Tragač za COVID-19 stvorili sami Maxime Beugnet .

Nadalje, vaši MongoDB grafikoni nisu ograničeni samo na vas MongoDB Atlas primjer. Ove grafikone možete lako ugraditi u svoje aplikacije i upravo ćemo to danas raditi. Tradicionalni način rada s MongoDB grafikonima izvan MongoDB Atlasa bio je ugrađivanje koda dohvaćenog s Atlasove nadzorne ploče, ali nama programerima često je potrebna veća kontrola i tu je JavaScript SDK za MongoDB grafikone Ovaj SDK je trenutno u beta fazi, ali već nudi mnogo veću fleksibilnost u odnosu na samo ugradnju. U ovom ćemo vodiču naučiti kako ugrađivati ​​pomoću iframe pristupa, kao i kako koristiti JavaScript SDK.

Preduvjeti

Za ovaj vodič trebat će vam:

• Web preglednik

  
  
  
  
  

  ---

• MongoDB Atlas

Pojednostavit ćemo i sav naš kôd napisati u običnom JavaScriptu. Budite uvjereni da se sve što naučite lako može prevesti u vaš omiljeni JS okvir, poput Reagirati , Kutni , ili Viđeno . Ako još nemate MongoDB Atlas račun, besplatno se prijavite ovdje .

Upotrijebite kôd ADO200 za kredit od 200 USD.

Budući da ćemo cijeli svoj kôd pisati u običnom JavaScript -u, stvorimo HTML datoteku u koju će se smjestiti naš kôd. Napravite | _+_ | datoteka. Zapisat ću svoj kod Kôd Visual Studija te će koristiti Poslužitelj uživo proširenje za pokretanje jednostavnog poslužitelja koji će samo posluživati ​​| _+_ | datoteka. Naše početno polazište bit će sljedeće:

Početak rada s MongoDB ljestvicama

Prije nego što možemo stvoriti grafikone, potrebni su nam podaci. Na našu sreću, MongoDB ima brojne besplatne skupove podataka koje možemo koristiti. Na nadzornoj ploči MongoDB Atlas odaberite Klasteri tab. Odaberite klaster koji želite koristiti ili izradite novi za ovaj vodič i pritisnite gumb s tri točke da biste vidjeli dodatne mogućnosti. Na kraju odaberite Učitajte uzorak skupa podataka dugme. To će stvoriti brojne baze podataka napunjene uzorcima podataka. Ona koju ćemo koristiti zove se sample_airbnb .

Nakon što imate sample_airbnb dostupan skup podataka, spremni smo ga povezati kao izvor podataka za naše MongoDB karte. Idite na Grafikoni karticu u glavnom izborniku. Ako prije niste radili s MongoDB grafikonima, dobit ćete poziv na radnju za povezivanje izvora podataka prije nego što budete mogli stvarati grafikone. To ima smisla jer moramo imati podatke prije nego što ih možemo vizualizirati.

Kliknite na Dodajte izvor podataka gumb za početak. Odavde odaberite klaster u koji ste učitali uzorak skupa podataka, a zatim odaberite zbirku sample_airbnb . Konačno, imat ćete mogućnost odabira tko bi trebao imati pristup ovom skupu podataka, a za sada možete samo napustiti zadane postavke. Sada kada smo povezali izvor podataka, spremni smo za izradu prve nadzorne ploče.

Odaberite Nadzorna ploča opciju u glavnoj navigaciji, a zatim kliknite na Nova nadzorna ploča i ime nadzorne ploče. Konačno smo spremni za izradu našeg prvog grafikona.

Moj prvi MongoDB grafikon

Za izradu našeg prvog grafikona kliknite na Dodaj grafikon dugme. Bit će nam predstavljeno novo korisničko sučelje koje će nam omogućiti stvaranje našeg grafikona ili grafikona. Prvi korak je odabir izvora podataka, a mi ćemo odabrati | _+_ | kao naš izvor podataka. Nakon što to učinimo, vidjet ćemo stupac polja ispunjen svim poljima za tu zbirku.

S MongoDB grafikonima možemo stvoriti mnogo različitih vrsta grafikona i grafikona. Možemo stvoriti stupčaste ili stupne grafikone, linijske grafikone, tortne grafikone, čak i zemljopisne karte. Ovisno o vrsti grafikona koji želimo stvoriti, podaci koje moramo dostaviti će se promijeniti.

Sada je to samo način povlačenja i ispuštanja polja do kojih nam je stalo za naše pojedinačne grafikone. Za naš prvi grafikon, ono što želimo učiniti je usporediti prosječnu ocjenu koju nekretnina dobiva na temelju njezine cijene. Izradit ćemo stupac grafikona i za osi x povući ćemo cijena polje. Uključit ćemo binning kako bismo mogli grupirati nekretnine na temelju cijene, a to ćemo činiti u koracima od 50 USD. Za y-osi povući ćemo ocjena_ocjena_ ocjena polje i za agregaciju ćemo odabrati znači . To će nam dati prosječnu ocjenu koju su dobili objekti u tom cjenovnom razredu.

Dalje, ne moramo nužno prikazati sve cijene, pa dodajmo i filtar. Filtrirat ćemo na cijena polje, s minimalnom vrijednošću 50 i maksimalnom vrijednošću 500. Na kraju ćemo dodati i malo prilagođavanja, gdje ćemo za vrijednosti na osi x htjeti predznak vrijednosti staviti sa znakom $. Naš konačni grafikon će izgledati ovako:

Iz ovog grafikona možemo zaključiti da ćete, bez obzira na cijenu, imati dobro iskustvo s rezervacijom nekretnine u bilo kojem cjenovnom razredu. Spremimo ovaj grafikon za sada. Ako posjetimo našu nadzornu ploču, vidjet ćemo prikaz našeg novonastalog grafikona. Možemo mu promijeniti veličinu, premjestiti ga, dobiti kod za ugradnju, urediti ga, pa čak i izbrisati ako nismo zadovoljni s njim. Za sada ništa od toga nećemo učiniti. Ono što ćemo učiniti je stvoriti još par grafikona kako bismo stekli uvid u naš skup podataka.

Prosječna cijena po grafikonu zemlje

Sljedeći grafikon koji ćemo izraditi prikazat će prosječnu cijenu nekretnine u svakoj zemlji. Za ovo ćemo izraditi trakasti grafikon. Za osi x koristit ćemo cijena polje i zbirna srednja vrijednost. Za y-osi , koristit ćemo polje zemlje koje je poddokument adresa polje i sortirat ćemo po vrijednosti.

Ono što možemo zaključiti iz ovog grafikona je da Hong Kong nudi najskuplje opcije rezervacija, dok Portugal najmanje cijene.

Prosječna cijena po vrsti sobe

Ovaj grafikon uspoređuje prosječnu cijenu ovisno o vrsti sobe. Ovaj put ćemo koristiti kružni grafikon. Za naše Označiti koristit ćemo vrsta sobe polje i sortirati prema vrijednosti. Za luk koristit ćemo cijena polje i ponovno agregirati na srednju vrijednost. Ja ću dodati a cijena filtrirajte i ovdje, s minimalnom vrijednošću 10, a najvećom vrijednošću 500. Rezultat će izgledati ovako:

Kao što možete očekivati, troškovi najma cijelog stana ili kuće više su od privatne ili zajedničke sobe, ali ono što mi se učinilo zanimljivim je da je u prosjeku cijena privatne sobe bila niža od cijene zajedničke sobe.

Mogu provesti sate donoseći jedinstvena pitanja i izrađujući grafikone kako bih odgovorio na ta pitanja i dao uvid, ali mislim da ste shvatili. Gore prikazani grafikoni jedva grebu po površini onoga što je moguće. Provjerite Dokumentacija grafikona za mnogo više informacija, vodiča i pojedinosti o stvaranju i radu s različitim vrstama grafikona. Zatim uzmimo grafikone koje smo stvorili na nadzornoj ploči MongoDB Charts i upotrijebimo ih u našoj aplikaciji.

Dodavanje MongoDB grafikona u našu aplikaciju

Sada kad imamo neke grafikone s kojima možemo raditi na našoj MongoDB Atlas nadzornoj ploči, idemo dalje i izvozimo ove grafikone u našu aplikaciju. Kao što sam spomenuo u uvodu, postoje dva načina za izvoz grafikona. Prvo, jednostavno koristimo kod za ugradnju koji ugrađuje iframe u našu aplikaciju i prikazuje grafikon. Da bismo vam pokazali kako to funkcionira, uzmimo naš grafikon Prosječna cijena po vrsti sobe i ugradimo ga u našu aplikaciju.

Zadržite pokazivač iznad tortnog grafikona i pritisnite ... gumb za prikaz dodatnih opcija. Na izborniku odaberite Ugradi grafikon . Vjerojatno ćete vidjeti modalni skočni prozor koji vam govori da izvor podataka za ovaj grafikon nema omogućeno neovlašteno vanjsko dijeljenje, što znači da ovaj grafikon nismo konfigurirali za dijeljenje izvan MongoDB Atlasa. Kliknite na Konfigurirajte vanjsko dijeljenje vezu za pregled naših mogućnosti.

Prvo ćemo omogućiti vanjsko dijeljenje, ali tada će nam se predstaviti dvije mogućnosti kako želimo da se ti vanjski grafikoni vide. Opcije su Samo ovjereni potpis ili Neovlašteni ili provjereni potpis . Želimo odabrati drugu. Ako odaberemo prvu, imat ćemo samo mogućnost prikaza grafikona na strani poslužitelja prosljeđivanjem tajnog ključa. Ovo je sigurnija opcija i onu koju bismo htjeli koristiti ako bismo zaista htjeli zaključati pristup tim grafikonima.

Nakon što omogućimo neovlašteni pristup, vidjet ćemo naše mogućnosti za ugradnju grafikona. To možemo učiniti putem iframe -a ili putem JavaScript SDK -a. Prvo ćemo pokazati kako to možete učiniti s iframe metodom. Jednostavno biste kopirali kôd za ugradnju i zalijepili ga u aplikaciju gdje želite da se grafikon pojavi. Ovdje postoji ograničen broj konfiguracijskih mogućnosti, poput postavljanja mjerača automatskog osvježavanja, kao i unaprijed definirane svijetle ili tamne teme, no dodatne bismo parametre mogli dodati ručno.

Idemo u naš kôd i zalijepimo ovaj kôd za ugradnju kako bismo provjerili učitava li se naš grafikon ispravno.

Ako sada otvorimo našu stranicu u pregledniku, vidjet ćemo prikaz našeg MongoDB grafikona. Nismo morali napisati nikakav kôd za prikaz ovog grafikona, a datoteka skripte koju smo uvezli u zaglavlje dokumenta ne koristi se. Sve što je potrebno za iscrtavanje i prikaz grafikona sadržano je u iframeu.

Pristup iframe odlično funkcionira ako jednostavno želite ugraditi grafikon u svoju aplikaciju. No, za programere kojima je potrebno malo više fleksibilnosti, JavaScript SDK je za vas. Pristup iframe dopušta vam da prođete kroz mnoge iste opcije kao i JavaScript SDK, ali za mene je rad sa SDK -om mnogo prikladniji.

Dodavanje MongoDB grafikona u našu aplikaciju s JavaScript SDK -om

U gornjem primjeru koristili smo ugrađeni iframe pristup za dodavanje našeg MongoDB grafikona u našu aplikaciju. Iako je ovo jednostavno i besprijekorno, ne daje nam puno fleksibilnosti. Ovdje dolazi JavaScript SDK MongoDB Charts. Komentirajmo ugrađeni kôd koji smo ranije zalijepili. Sada između oznaka skripte, upotrijebimo SDK za programsko stvaranje grafikona. Kod će izgledati ovako:

Vrijednosti koje želite ažurirati su | _+_ | i | _+_ |. Vrijednosti ovih svojstava možete pronaći u modalu ugrađenog grafikona odabirom opcije JavaScript SDK umjesto opcije Iframe. Krajnji rezultat izgleda malo drugačije.

povećajte kromirane jezičke

Sada grafikon zauzima cijeli zaslon. Razlog tome je što se on iscrtava u okvirima našeg grafikona div, koji u ovom trenutku nema specificiran stil, pa je prema zadanim postavkama puna širina prozora našeg preglednika. To možemo promijeniti dodavanjem malo stila u našu aplikaciju.

Puno bolje. JavaScript SDK omogućuje nam dodatno pozivanje različitih metoda i filtara na grafikonu. Iako se neke od ovih značajki mogu prenijeti i s iframe pristupom, mnogo je čišće i lakše raditi s njima kada koristite SDK. Pogledajmo neke primjere.

Sada smo dodali mnogo više koda za kontrolu izgleda i osjećaja, kao i funkcionalnosti našeg grafikona. U konfiguraciji SDK -a onemogućili smo atribuciju pa se logotip MongoDB više ne prikazuje u donjem desnom kutu našeg grafikona. Dodali smo i dvije metode koje izravno utječu na naš grafikon. Prvi | _+_ | metoda osvježava grafikon. U našem slučaju to nije važno jer nemamo stalno nove podatke koji bi utjecali na prikaz grafikona, ali recimo da ste imali IoT uređaj koji je slao podatke svakih nekoliko sekundi i htio ih mapirati. Mogućnost programske kontrole kada se osvježavanje vrši, na mjeraču vremena ili ručno, uvelike bi poboljšalo upotrebljivost i korisnost grafikona. Druga metoda, | _+_ |, omogućuje nam kontrolu varijabli koje čine grafikon. U ovom slučaju, kada kliknemo na Samo u SAD -u gumb, naš će se grafikon ažurirati kako bi prikazao prosječnu cijenu sobe po tipu sobe za nekretnine koje se nalaze u Sjedinjenim Državama.

Razgovarajmo o funkcionalnosti filtera još malo. Već sam pokazao kako možete filtrirati svoje podatke na nadzornoj ploči MongoDB Charts povlačenjem i ispuštanjem polja koja želite filtrirati i igranjem s opcijama. Ovo odlično funkcionira ako se nalazite na nadzornoj ploči, ali što ako ne želite odobriti svima u svojoj tvrtki pristup vašoj bazi podataka grafikona. Ovdje dolazi dopuštanje filtriranja iz vaše aplikacije i zaista sjaji.

Prije nego što funkcija filtra proradi, morat ćemo otići na nadzornu ploču grafikona i omogućiti polja na kojima želimo da naši korisnici mogu filtrirati.

Prijeđite na nadzornu ploču MongoDB Charts, odaberite grafikon s kojim želite raditi, a zatim s ... izbornik odaberite Ugradi grafikon . Vidjet ćete okvir za tekst za Korisnički specificirani filtri , a ovdje možete odabrati jedno ili više polja za koje želite da budu dostupni korisnicima za filtriranje. U našem slučaju samo ćemo dodati | _+_ | budući da jedini filtar koji prikazujemo ograničava naš grafikon na temelju zemlje. Nakon što odaberete polja, korisnici ili programeri sada mogu programski filtrirati to polje.

Spajajući sve zajedno

U ovom smo vodiču naučili o MongoDB ljestvice i kako s njima raditi u MongoDB Atlas nadzornoj ploči, kao i unutar vlastite aplikacije. Naučili smo različite načine ugradnje grafikona pomoću iframe i JavaScript SDK metoda te prednosti i nedostatke svake metode. Ako samo želite prikazati svoje grafikone i stvoriti brzu nadzornu ploču, pristup iframe može biti najbolji način, ali ako želite dodatne značajke i funkcionalnosti, JavaScript SDK, koji je trenutno u beta verziji, pruža mnogo veću fleksibilnost, a ipak je vrlo jednostavan za Raditi sa.

Isprobajte MongoDB ljestvice prijavom na besplatni Atlas MongoDB račun. Upotrijebite kôd ADO200 za kredit od 200 USD. Za ovaj vodič nema GitHub repoa jer je sav kôd na vrhu. Ako imate pitanja ili povratnih informacija, pogledajte novi MongoDB forumi zajednice .

Sretan grafikon!

Izvorno objavio Ado Kukić na https://developer.mongodb.com

#mongodb #javascript #web-razvoj #baza podataka