Kreiranje grafikona pomoću Google Chart API-ja.

Uvijek sam se pitao kako se pojavila fraza kao što je "slika zamjenjuje hiljadu riječi". To se lako može pripisati menadžerima, jer su oni ti koji, nakon pregleda dugačke liste brojeva, mogu pronaći grafikon na kraju stranice koji kombinuje sve brojeve, pokazujući na taj način gornju frazu. Dijagrami i grafikoni pružaju kratka recenzija veliki broj informacije. Uz pomoć grafikona, osoba može brzo uočiti bilo koji trend, uporediti različite rezultate ili uočiti obrazac.

Postoji mnogo načina za kreiranje grafikona na ASP.NET web stranici. Možete koristiti klase u imenskom prostoru System.Drawing da biste kreirali dijagrame programski. Također možete koristiti Microsoft office Web komponente (OWC). Postoje i besplatni softver u obliku alata za crtanje grafikona, kao i u izobilju komponente treće strane. Microsoft takođe je ušao u igru ​​i obezbedio Microsoft kontrole grafikona za . NET Framework 3.5 SP1 (Kontrole grafikona za .NET Framework 3.5 SP1) .

Ovaj članak govori o tome kako koristiti Google Chart API za kreiranje grafikona. Google Chart API je besplatna usluga od Google, što omogućava programerima web aplikacija da kreiraju slike grafikona u pokretu kreiranjem elementa sa src atributom koji ukazuje na URL vezu koja uključuje podatke grafikona, oznake i druge informacije za niz upita. Na primjer, grafikon prikazan na desnoj strani dostupan je na http://chart.apis.google.com/chart?cht=p&chs=225x150&chd=t:100,30,70,25&chl=Q1|Q2|Q3|Q4&chtt= 2008 %20Prodaja%20Po%20Kvartalu. Čitajte dalje da naučite kako koristiti Google Chart API na vašoj ASP.NET web stranici!

Pregled Google Chart API-ja

Google Chart API omogućava programerima da kreiraju različite vrste grafikona u hodu. Google Chart API se pohranjuje pod vezom resursa (URL) na Googleovim web serverima, a nakon prijema pravilno formatirane veze (URL), vraća grafikon kao sliku. Karakteristike grafikona (boje, naslovi, ose, tačke iscrtavanja, itd.) se specificiraju putem niza upita za vezu (URL). Rezultirajuća slika se može prikazati pomoću elementa , ili se može pohraniti u sistem podataka vaš web server ili bazu podataka. Najbolji dio je što je Google Chart API besplatan i ne zahtijeva nikakav račun i prođite kroz proces registracije!

Glavna veza do API-ja Google Chart je http://chart.apis.google.com/chart?. Parametri koji određuju prikaz grafikona slijede iza simbola ?. Postoji mnogo opcija koje možete specificirati putem niza upita. jedini obavezni parametri su veličina grafikona (chs), podaci grafikona (chd) i tip grafikona (cht). Sljedeća tabela opisuje neke od korišćenih parametara:

Imajte na umu da bodovi ploca poslani u parametru chd nisu ono što želimo da budu na grafikonu - 43, 23, 12, 62, 34 i 39. Umjesto toga, poslani su procenti najveće vrijednosti ovih bodova. Drugim riječima, tačka grafa x pretvoren u postotak pomoću izraza ( x / maxDataPoint) * 100. Na primjer, stvarna vrijednost 43 postaje 43/62 * 100 = 69,3.

I dobit ćete sljedeći rezultat:

Izgleda dobro, zar ne? Ovaj grafikon vrlo jednostavno i trebalo nam je 1,5 sekunde da ga kreiramo. Ako provedete više vremena u istraživanju Google funkcije API za grafikone, naći ćete opcije koje možete koristiti za određivanje boja, dodavanje osi, oznaka i još mnogo toga standardne karakteristike. Na primjer, možemo uključiti numeričke vrijednosti na y-osi da prikažemo broj posjeta i dana na x-osi jednostavnim ažuriranjem veze za korištenje sljedeći red query: ?cht=lc&chs=300x200&chd=t:69.3,37.1,19.4,100.0,54.8,62.9&chds=0.62&chtt=Mjesečni%20Promet &chxt=x,y&chxl=0:|1.|7.|14.|21.|31.&chxr=1,0,62

Evo kako će grafikon izgledati:

Kreiranje Google grafikona za ASP.NET stranicu koristeći podatke iz baze podataka

Uz više posla, moći ćete da kreirate grafikon na osnovu vrednosti iz baze podataka sa Google pomoć API za grafikone. Samo trebamo kreirati odgovarajući niz upita na osnovu podataka na kojima trebamo da ga kreiramo, tipa grafikona i oznaka osi x i y (ako ih ima). Kasnije u članku, pogledaćemo izgradnju niza upita na ASP.NET stranici za upit baze podataka koji vraća obim prodaje po mjesecu za Northwind Traders. Radni kod možete preuzeti na kraju članka.

Prvi korak je kreiranje upita koji vraća tražene podatke. Moj primjer koristi bazu podataka Northwind, koja pohranjuje informacije o proizvodima (proizvodima), kupcima (kupcima), narudžbama (narudžbama) itd. Za ovaj primjer Odlučio sam da napravim grafikon bruto prodaje po mjesecima date godine. Vraća se sljedeći upit ove informacije za datu godinu:

SELECT MONTH(o.OrderDate) AS MonthVal, SUM(od.UnitPrice * od.Quantity) AS Total
IZ narudžbi AS o
INNER JOIN KAO od ON
od.OrderID = o.OrderID
WHERE(YEAR(o.OrderDate) = @Godina)
GRUPA PO MJESECU(o.OrderDate)
ORDER BY MonthVal

Baza podataka Northwind ima prodaju za 1996, 1997 i 1998. Ako jednu od ovih vrijednosti proslijedite kao parametar @Year, dobit ćete sljedeće rezultate:

Primjer specificira gornji upit u kontroli SqlDataSource i prikazuje rezultate na stranici u GridView kontroli. GridView je prilagođen da prikazuje rezultate kolone Total u formatu valute i formatira kolonu MonthVal tako da svaki red sadrži samo prva tri slova svakog mjeseca. Ovo formatiranje MonthVal je obrađen pomoćna funkcija u kodu iza, odnosno DisplayMonthName koji uzima mjesec kao numerička vrijednost(1, 2, ..., 12) i vraća formatiranu vrijednost ("Jan", "Feb", ..., "Dec"). Također sam dodao kontrolu DropDownList na stranicu tako da korisnik može odrediti vrijednost za parametar @Year - DropDownList je čvrsto kodiran na 1996, 1997 i 1998.

Pored kontrola SqlDataSource, GridView i DropDownList za godinu, stranica uključuje kontrolu slike za prikaz grafikona. Svojstvo ImageUrl elementa Image programski je postavljeno na odgovarajući URL u klasi iza koda. Ovo se rješava u DisplayChart metodi. Ova metoda počinje kreiranjem glavnog tijela veze (URL) - tip grafikona (cht), veličina grafikona (chs) i naslov grafikona. Tip i veličina grafikona su diktirani vrijednostima koje je odabrao korisnik pomoću kontrola DropDownList.

Zaštićeni poddisplej()
„Izgradnja veze na grafikonu
Dim chartUrl kao novi StringBuilder("http://chart.apis.google.com/chart?")

"Dodavanje vrste grafikona
chartUrl.AppendFormat("cht=(0)", Server.UrlEncode(ddlChartType.SelectedValue))

"Dodavanje veličine grafikona
chartUrl.AppendFormat("&chs=(0)", Server.UrlEncode(ddlChartSize.SelectedValue))

„Dodavanje naslova
chartUrl.AppendFormat("&chtt=(0)", Server.UrlEncode("Prodaja za " & ddlYear.SelectedValue))

Zatim se poziva metoda Select elementa SqlDataSource. Ovi rezultati se nabrajaju i njihove vrijednosti se skupljaju u listu decimalnih vrijednosti (Decimal) (literalDataPointsList) i oznake za svaku tačku podataka, odnosno skraćenice svakog mjeseca, upisuju se u listu vrijednosti niza (xAxisLabels). Jednom kada se napišu vrijednosti tačaka grafikona, one će biti izražene kao postotak najveće vrijednosti i pohranjene u listi vrijednosti niza pod nazivomrelativneDataPointValues. Vrijednosti in ovu listu su zatim spojeni (odvojeni zarezima) i dodijeljeni parametru podataka grafikona (chd).

"Dodavanje tačaka podataka grafikona. Prvo morate dobiti podatke iz kontrole SqlDataSource
Zatamniti dataPointsView kao DataView = CType(dsChartData.Select(DataSourceSelectArguments.Empty), DataView)
Dim xAxisLabels kao nova lista (string)
Dim literalDataPointsList kao nova lista (od decimalnog)
Dim maxValue kao decimalni = 0

„Čitanje tačaka podataka i spremanje maksimalna vrijednost
Za svaku tačku Kao DataRowView u dataPointsView
„Uklanjanje centi iz bilo kojeg iznosa
literalDataPointsList.Add(Convert.ToDecimal(point("Total")))

„Provjeravam novi maksimum
Ako literalDataPointsList(literalDataPointsList.Count - 1) > maxValue Onda
maxValue = literalDataPointsList(literalDataPointsList.Count - 1)
End If

Ako je ddlChartSize.SelectedIndex<>0 IliElse literalDataPointsList.Count Mod 2 = 1 Onda
xAxisLabels.Add(DisplayMonthName(Convert.ToInt32(point("MonthVal"))))
Inače
xAxisLabels.Add(String.Empty)
End If
Sljedeći

„Izračunavanje relativnih vrijednosti tačaka podataka
Zatamnjene relativneDataPointValues ​​kao nova lista (od niza)
Za svaku tačku kao decimalni u literalDataPointsList
Zatamnjena relativna vrijednost kao decimalna = (tačka / maksimalna vrijednost * 100)
relativneDataPointValues.Add(relativeValue.ToString("0.00"))
Sljedeći

Zatim se specificiraju oznake za osi x i y. Osa y se proteže od 0 do maksimalne vrijednosti koju vraća upit, dok se podatkovne točke ose x učitavaju sa liste xAxisLabels. Konačno, svojstvo ImageUrl elementa Image postavlja se na vrijednost izgrađene veze (URL).

"Dodavanje dvije osi
chartUrl.Append("&chxt=x,y")

"Dodavanje vrijednosti za Y-os
chartUrl.AppendFormat("&chxr=1,0,(0)", maxValue.ToString("0"))

"Dodavanje oznaka za X-os
chartUrl.AppendFormat("&chxl=0:|(0)", String.Join("|", xAxisLabels.ToArray()))

"Učitavanje chartUrl "slike" u svojstvo imgChart elementa Image
imgChart.ImageUrl = chartUrl.ToString()
end sub

Na kraju biste trebali vidjeti grafikon ispod. Prva slika prikazuje prodaju iz 1996. kao linijski grafikon, a druga prikazuje prodaju iz 1997. kao trakasti grafikon.

Zaključak

Google Chart API nudi brzo i lak način stvarajući mnoštvo razne vrste dijagrami za vašu web stranicu. Da biste kreirali grafikon, trebate napraviti URL zahtjev za Google Chart API, prosljeđujući karakteristike grafikona (veličine, tačke podataka, boje, oznake, itd.) pomoću niza upita. API grafikona vraća sliku koju možete prikazati u elementu . Uz malo rada, možete kreirati takvu vezu grafikona direktno sa ASP.NET web stranice, kao i kreirati grafikone na osnovu informacija iz baze podataka. U ovom članku smo pogledali kako ručno kreirati vezu, au sljedećem ćemo pogledati specijaliziranu kontrolu koja podržava deklarativno povezivanje podataka i druge. korisne karakteristike.

Srećno programiranje!

Uvijek sam se pitao kako se pojavila fraza kao što je "slika zamjenjuje hiljadu riječi". To se lako može pripisati menadžerima, jer su oni ti koji, nakon pregleda dugačke liste brojeva, mogu pronaći grafikon na kraju stranice koji kombinuje sve brojeve, pokazujući na taj način gornju frazu. Grafikoni i grafikoni pružaju pregled velike količine informacija. Uz pomoć grafikona, osoba može brzo uočiti bilo koji trend, uporediti različite rezultate ili uočiti obrazac.

Postoji mnogo načina za kreiranje grafikona na ASP.NET web stranici. Možete koristiti klase u imenskom prostoru System.Drawing da programski kreirate dijagrame. Možete koristiti i Microsoft office web Komponente (OWC). Tu je i besplatni softver u obliku alata za dijagramiranje, kao i mnoštvo komponenti trećih strana. Microsoft se takođe uključio i obezbedio Microsoft kontrole grafikona za .NET Framework 3.5 SP1.

Ovaj članak govori o tome kako koristiti Google Chart API za kreiranje grafikona. Google Chart API je besplatna Googleova usluga koja omogućava programerima web aplikacija da kreiraju slike grafikona u pokretu kreiranjem elementa sa src atributom koji ukazuje na URL vezu koja uključuje podatke grafikona, oznake i druge informacije za niz upita. Na primjer, grafikon prikazan na desnoj strani dostupan je na http://chart.apis.google.com/chart?cht=p&chs=225x150&chd=t:100,30,70,25&chl=Q1/Q2/Q3/Q4&chtt= 2008 %20Prodaja%20Po%20Kvartalu. Čitajte dalje da naučite kako koristiti Google Chart API na vašoj ASP.NET web stranici!

Pregled Google Chart API-ja

Google Chart API omogućava programerima da kreiraju različite vrste grafikona u hodu. Google Chart API se pohranjuje pod vezom resursa (URL) na Googleovim web serverima, a nakon prijema pravilno formatirane veze (URL), vraća grafikon kao sliku. Karakteristike grafikona (boje, naslovi, ose, tačke iscrtavanja, itd.) se specificiraju putem niza upita za vezu (URL). Rezultirajuća slika se može prikazati pomoću elementa , ili mogu biti pohranjeni na sistemu datoteka ili bazi podataka vašeg web servera. Najbolji dio je što je Google Chart API besplatan i ne zahtijeva nikakav račun ili proces registracije!

Glavna veza do API-ja Google Chart je http://chart.apis.google.com/chart?. Parametri koji određuju prikaz grafikona slijede iza simbola ?. Postoji mnogo opcija koje možete specificirati putem niza upita. Jedini potrebni parametri su veličina grafikona (chs), podaci grafikona (chd) i tip grafikona (cht). Sljedeća tabela opisuje neke od korišćenih parametara:

Koristeći gornje informacije, možete testirati kreiranje vlastitih grafikona i grafikona koristeći Google Chart API. Na primjer, generirat će se sljedeći link linijski grafikon sa dimenzijama 300x200 i vrijednostima 43, 23, 12, 62, 34 i 39, te naslovom "Mjesečni promet": http://chart.apis.google.com/chart?cht=lc&chs=300x200&chd=t:69.3 ,37.1 ,19.4,100.0,54.8,62.9&chtt=Mjesečni%20Promet

Imajte na umu da bodovi ploca poslani u parametru chd nisu ono što želimo da budu na grafikonu - 43, 23, 12, 62, 34 i 39. Umjesto toga, poslani su procenti najveće vrijednosti ovih bodova. Drugim riječima, tačka grafikona x se pretvara u postotak koristeći izraz (x / maxDataPoint) * 100. Na primjer, stvarna vrijednost 43 postaje 43/62 * 100 = 69,3.

I dobit ćete sljedeći rezultat:

Izgleda dobro, zar ne? Ovaj dijagram je vrlo jednostavan i trebalo nam je 1,5 sekunde da ga napravimo. Ako provedete više vremena istražujući Google Chart API, pronaći ćete opcije koje možete koristiti za određivanje boja, dodavanje osi, oznaka i drugih standardnih funkcija. Na primjer, možemo uključiti numeričke vrijednosti na y-osi da prikažemo posjete i dane na osi x jednostavnim ažuriranjem veze da koristi sljedeći niz upita: ?cht=lc&chs=300x200&chd=t:69.3,37.1, 19.4 ,100.0,54.8,62.9&chds=0.62&chtt=Mjesečni%20Promet &chxt=x,y&chxl=0:/1./7./14./21./31.&chxr=1,0,62

Evo kako će grafikon izgledati:

Kreiranje Google grafikona za ASP.NET stranicu koristeći podatke iz baze podataka

Uz više posla, možete kreirati grafikon na osnovu vrijednosti iz baze podataka koristeći Google Chart API. Samo trebamo kreirati odgovarajući niz upita na osnovu podataka na kojima trebamo da ga kreiramo, tipa grafikona i oznaka osi x i y (ako ih ima). Kasnije u ovom članku, pogledaćemo stvaranje stringa upita na ASP.NET stranici za upit baze podataka koji vraća obim prodaje po mesecima za Northwind Traders. Radni kod možete preuzeti na kraju članka.

Prvi korak je kreiranje upita koji vraća tražene podatke. Moj primjer koristi bazu podataka Northwind, koja pohranjuje informacije o proizvodima (proizvodima), kupcima (kupcima), narudžbama (narudžbama) itd. Za ovaj primjer, odlučio sam da napravim grafikon bruto prodaje po mjesecima date godine. Sljedeći upit vraća date informacije za datu godinu:

SELECT MONTH(o.OrderDate) AS MonthVal, SUM(od.UnitPrice * od.Quantity) AS Total
IZ narudžbi AS o
INNER JOIN KAO od ON
od.OrderID = o.OrderID
WHERE(YEAR(o.OrderDate) = @Godina)
GRUPA PO MJESECU(o.OrderDate)
ORDER BY MonthVal

Baza podataka Northwind ima prodaju za 1996, 1997 i 1998. Ako jednu od ovih vrijednosti proslijedite kao parametar @Year, dobit ćete sljedeće rezultate:

Primjer specificira gornji upit u kontroli SqlDataSource i prikazuje rezultate na stranici u kontroli GridView. GridView je prilagođen da prikazuje rezultate kolone Total u formatu valute i formatira kolonu MonthVal tako da svaki red sadrži samo prva tri slova svakog mjeseca. Ovim MonthVal formatiranjem rukuje pomoćna funkcija u pozadinskom kodu, odnosno DisplayMonthName, koja uzima mjesec kao numeričku vrijednost (1, 2, ..., 12) i vraća formatiranu vrijednost ("Jan", "Feb", ..., "dec"). Također sam dodao kontrolu DropDownList na stranicu tako da korisnik može odrediti vrijednost za parametar @Year - DropDownList je čvrsto kodiran na 1996, 1997 i 1998.

Pored kontrola SqlDataSource, GridView i DropDownList za godinu, stranica uključuje kontrolu slike za prikaz grafikona. Svojstvo ImageUrl elementa Image programski je postavljeno na odgovarajući URL u klasi iza koda. Ovo se rješava u DisplayChart metodi. Ova metoda počinje kreiranjem glavnog dijela veze (URL) - tipa grafikona (cht), veličine grafikona (chs) i naslova grafikona. Tip i veličina grafikona su diktirani vrijednostima koje je odabrao korisnik pomoću kontrola DropDownList.

Zaštićeni poddisplej()
„Izgradnja veze na grafikonu
Dim chartUrl kao novi StringBuilder("http://chart.apis.google.com/chart?")

"Dodavanje vrste grafikona
chartUrl.AppendFormat("cht=(0)", Server.UrlEncode(ddlChartType.SelectedValue))

"Dodavanje veličine grafikona
chartUrl.AppendFormat("&chs=(0)", Server.UrlEncode(ddlChartSize.SelectedValue))

„Dodavanje naslova
chartUrl.AppendFormat("&chtt=(0)", Server.UrlEncode("Prodaja za " & ddlYear.SelectedValue))

Zatim se poziva metoda Select elementa SqlDataSource. Ovi rezultati se nabrajaju i njihove vrijednosti se skupljaju u listu decimalnih vrijednosti (Decimal) (literalDataPointsList) i oznake za svaku tačku podataka, odnosno skraćenice svakog mjeseca, upisuju se u listu vrijednosti niza (xAxisLabels). Jednom kada su vrijednosti tačaka iscrtavanja zapisane, one će biti izražene kao postotak najveće vrijednosti i pohranjene u listi vrijednosti niza pod nazivomrelativneDataPointValues. Vrijednosti na ovoj listi se zatim spajaju (odvojene zarezima) i dodjeljuju parametru podataka grafikona (chd).

"Dodavanje tačaka podataka grafikona. Prvo morate dobiti podatke iz kontrole SqlDataSource
Zatamniti dataPointsView kao DataView = CType(dsChartData.Select(DataSourceSelectArguments.Empty), DataView)
Dim xAxisLabels kao nova lista (string)
Dim literalDataPointsList kao nova lista (od decimalnog)
Dim maxValue kao decimalni = 0

„Čitanje tačaka podataka i pohranjivanje maksimalne vrijednosti
Za svaku tačku Kao DataRowView u dataPointsView
„Uklanjanje centi iz bilo kojeg iznosa
literalDataPointsList.Add(Convert.ToDecimal(point("Total")))

„Provjeravam novi maksimum
Ako literalDataPointsList(literalDataPointsList.Count - 1) > maxValue Onda
maxValue = literalDataPointsList(literalDataPointsList.Count - 1)
End If

Ako je ddlChartSize.SelectedIndex<>0 IliElse literalDataPointsList.Count Mod 2 = 1 Onda
xAxisLabels.Add(DisplayMonthName(Convert.ToInt32(point("MonthVal"))))
Inače
xAxisLabels.Add(String.Empty)
End If
Sljedeći

„Izračunavanje relativnih vrijednosti tačaka podataka
Zatamnjene relativneDataPointValues ​​kao nova lista (od niza)
Za svaku tačku kao decimalni u literalDataPointsList
Zatamnjena relativna vrijednost kao decimalna = (tačka / maksimalna vrijednost * 100)
relativneDataPointValues.Add(relativeValue.ToString("0.00"))
Sljedeći

Zatim se specificiraju oznake za osi x i y. Osa y se proteže od 0 do maksimalne vrijednosti koju vraća upit, dok se podatkovne točke ose x učitavaju sa liste xAxisLabels. Konačno, svojstvo ImageUrl elementa Image postavlja se na vrijednost izgrađene veze (URL).

"Dodavanje dvije osi
chartUrl.Append("&chxt=x,y")

"Dodavanje vrijednosti za Y-os
chartUrl.AppendFormat("&chxr=1,0,(0)", maxValue.ToString("0"))

"Dodavanje oznaka za X-os
chartUrl.AppendFormat("&chxl=0:/(0)", String.Join("/", xAxisLabels.ToArray()))

Na kraju biste trebali vidjeti grafikon ispod. Prva slika prikazuje prodaju iz 1996. kao linijski grafikon, a druga prikazuje prodaju iz 1997. kao trakasti grafikon.

Zaključak

Google Chart API nudi brz i jednostavan način za kreiranje mnogo različitih vrsta grafikona za vašu web stranicu. Da biste kreirali grafikon, trebate napraviti URL zahtjev za Google Chart API, prosljeđujući karakteristike grafikona (veličine, tačke podataka, boje, oznake, itd.) pomoću niza upita. API grafikona vraća sliku koju možete prikazati u elementu . Uz malo rada, možete kreirati takvu vezu grafikona direktno sa ASP.NET web stranice, kao i kreirati grafikone na osnovu informacija iz baze podataka. U ovom članku smo pogledali kako ručno kreirati vezu, au sljedećem ćemo pogledati specijaliziranu kontrolu koja podržava deklarativno povezivanje podataka i druge korisne funkcije.

Spremajući informacije u bazu podataka, u ovom članku je vrijeme za prikaz podataka iz iste baze podataka grafički oblik. Da, prijatelji, za početak ćemo površno pogledati dostupne tehnologije. I nakon što smo se odlučili za jedan, integriramo ga u našu web stranicu.

Da vas malo podsjetim, ko je zaboravio da je ovo komponenta projekta. Pregledni pregled planiranja članka može se pogledati.
Pa počnimo. Za prikaz različitih podataka koriste se različiti grafikoni i grafikoni. Razmotrite neke JavaScript biblioteke za kreiranje brze i efikasne vizualizacije podataka.

Spisak nekih od njih:
- D3.js - JavaScript biblioteka sa open source, za obradu i vizualizaciju podataka. Grafovi se generišu pomoću HTML, SVG i CSS;
-ChartJS- open source projekat. Koristi HTML5 platno za renderiranje. Dolazi sa setom "gotovih" osnovnih grafikona;
- Chartlist.js - koristi SVG za renderovanje grafikona / grafikona, a takođe se upravlja i konfiguriše pomoću CSS3 medijskih upita i Sass-a;
- n3-grafikone - izgrađene na D3.js i AngularJS. Pruža mnoge standardne dijagrame kao prilagođene AngularJS direktive;
- EmberCharts je open source, izgrađen na D3.js i Ember.js. Koristi SVG za prikazivanje grafova;
- Smoothie Charts - za rad sa protokom podataka u realnom vremenu. HTML5 canvas element se ovdje koristi za prikazivanje grafa. Čista JavaScript biblioteka koja pruža takve opcione karakteristike za grafikone u realnom vremenu;
-Chartkick - JavaScript biblioteka za crtanje/dijagramiranje u Ruby aplikacijama. Grafikoni se generišu putem SVG-a;
-MeteorCharts - Za renderovanje grafikona možete odabrati bilo koju od ovih tehnologija: HTML5 canvas, WebGL, SVG, pa čak i DOM;
-Flot je JavaScript biblioteka za jQuery koja vam omogućava da kreirate grafikone/grafikone.

I mnoge druge. Ja ću se fokusirati na - JavaScript biblioteku, za jednostavna kreacija grafovi. Pruža mnogo unaprijed izgrađenih grafikona. Ima ih mnogo podešavanja konfiguracije(API Google Chart Tools je moćan skup alata za vizualizaciju podataka.) koji vam pomažu da se promijenite izgled grafike. Grafovi se generiraju pomoću HTML5/SVG kako bi se osigurala kompatibilnost među pretraživačima i prenosivost na više platformi na iPhone, iPad i Android. Također sadrži VML za podršku starijih verzija IE.

Sada idemo na praksu. Google Charts pruža informacije i alate za programere za integraciju ove tehnologije u svoj resurs https://developers.google.com/chart/

Radit ćemo sa linijskim grafikonom (sl. s lijeve strane). Pređimo na navedeni primjer ovu uslugu sljedeći link. https://developers.google.com/chart/interactive/docs/gallery/linechart. Kada Linijski grafikon koji se prikazuje unutar pretraživača koristeći SVG ili VML . Prikazuje opise alata kada pređete preko tačaka. Pa, sreli smo se sa SVG-om , prilikom izgradnje interaktivne slike kontrolera prikupljanja podataka. I savjeti su također odlični.Uzmimo predložak skripte iznad prikazanog grafikona i zalijepimo ga na našu stranicu. Nacrtajmo samo jedan grafikon. Hajde da napravimo neke promene Hajde da analiziramo gde šta i gde. Dakle, kod u studiju.

Ispod na sl. rezultat korištenja ove skripte:

Pratimo link http://ap-impulse.ru/interface.php na interaktivni web interfejs. Na lijevoj strani je grafikon zasnovan na statičkim podacima.

Iznad smo ispitali upotrebu biblioteke Google Charts na našem resursu, rad s dokumentacijom i rastavili kod. Ovaj resurs ima širok izbor grafikona i grafikona, kao i primjer njihove upotrebe i Puni opis. Kao što je već spomenuto, koristili smo statičke podatke. Za naš projekat moramo čitati iz baze podataka u koju smo u prošlom članku naučili kako unositi podatke iz GET parametara. U sljedećem ćemo se osvrnuti na povezivanje s bazom podataka, crtanje, kao i greške koje se javljaju. Ovdje ćemo stati za danas. Sve za sada.