Leksion- Geocharts

Grafikët janë një nga metodat më të përdorura për të shfaqur informacion statistikor dhe shpërndarje. Në cdo sistem të ndërtuar për të funksionuar në web është e nevojshme të ofrohen në fund të cdo procedure të dhëna të organizuara në grafikë për të ndihmuar në aspektin menaxherial të punës. Në këtë artikull do të fokusohemi tek sistemet e shit-blerjeve online të kategorizuara në E-Commerce. Këto sisteme kanë nevojë për një raportim të vazhdueshëm mbi ecurinë e punës online. Menaxherët kanë nevojë të kenë raporte në kohë reale mbi gjendjen e produkteve që ata shesin dhe mbi trendin e tyre për të marrë vendime për ecurinë e mëtejshme. Këto raporte jemi mësuar t’i shikojmë në format gridash dhe të eksportohen në formate të ndryshme si excel, word ose pdf. Google Maps na mundëson një metodë të re paraqitjeje të grafikut në shtrirje gjeografike. Mënyrat e paraqitjes janë si markera ose si rajone. Këto elemente janë mjete raportuese dhe ilustruese mjaft të kërkuara dhe tendenca është përfshirja e tyre në sistem. Një nga aplikimet më të zakonshme është edhe kontrolli i vizitorëve të sistemit për të parë interesimin e klientëve. Familjarizimi me këto metoda të reja grafike në hartë është një kërkesë e domosdoshme në sistemet moderne.

Më poshtë tregohet se si shfaqet ne formë markeri informaicioni mbi rritjen e numrit të shitjeve në Skrapar.

<html>

<head>

google.load('visualization', '1', {'packages': ['geochart']});

google.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {

var data = google.visualization.arrayToDataTable([

['City', 'Rritja e shitjeve'],

[ 'Ballsh', -0.20624],

[ 'Berat', 1.70097],

[ 'Devoll', 0.20714],

[ 'Divjakë', 2.80398],

[ 'Ersekë', -1.20009],

[ 'Fier', 1.61603],

[ 'Gjirokastër', -2.03323],

[ 'Korçë', -3.70830],

[ 'Kuçovë', 1.63514],

[ 'Lezhë', -3.06838],

[ 'Lushnjë', 2.85277],

[ 'Përmet', -0.88655],

[ 'Sarandë', -1.87790],

[ 'Skrapar', 2.50177],

[ 'Vlorë', -0.33712]

]);

var options = { region: 'AL', displayMode: 'markers',

resolution: 'provinces',

colorAxis: {colors: ['red', 'green']} };

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

chart.draw(data, options);

};

</script>

</head>

<body >

</body>

</html>

Ngjyrat e chartit lëvizin në një segment që ia parapërcaktojmë tek kodi i mëposhtëm :

colorAxis: {colors: ['red', 'green']} }, ku vlera më e vogël përfaqësohet nga ngjyra e parë dhe ajo më e larta nga vlera e dytë, ndërkohë që ngjyrat e vlerave të tjera janë të ndërmjetme. Në rastin tonë ngjyra më e kuqe i korrespondon vlerës -3.708, ndërkohë që ngjyra më e gjelbër i korrespondon vlerës 2.853 . Skraparit i cili ka vlerë 2.50177, i korrespondon një ngjyrë e gjelbër pasi është vlerë e përafërt me atë të skajit të djathtë. Si koncept e njëjta gjë vlen edhe për madhësinë e markerit sa më i kuq të jetë markeri aq me i vogël do të jetë ai, dhe anasjelltas, sa më i gjelbër të jetë markeri aq më i madh është.

Geocharter me markera për qytete i cili tregon se numri i shitjeve në

Sarandë për Laptopin HP në muajin mars ka qenë 7

<html>

<head>

google.load('visualization', '1', {'packages': ['geochart']});

google.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {

var data = google.visualization.arrayToDataTable([

['City', 'Shitjet per 03/2013 te Laptop HP NB 655 H5L26EA'],

[ 'Ballsh', 2],

[ 'Berat', 8],

[ 'Devoll', 1],

[ 'Divjakë', 1],

[ 'Ersekë', 2],

[ 'Fier', 12],

[ 'Gjirokastër', 5],

[ 'Korçë', 9],

[ 'Kuçovë', 1],

[ 'Lezhë', 2],

[ 'Lushnjë', 0],

[ 'Përmet', 0],

[ 'Sarandë', 7],

[ 'Skrapar', 2],

[ 'Vlorë', 4]

]);

var options = { region: 'AL', displayMode: 'markers',

resolution: 'provinces',

colorAxis: {colors: ['red', 'green']} };

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

chart.draw(data, options);

};

</script>

</head>

<body >

</body>

</html>

Geocharter me markera për qytete i cili tregon se gjendja e arkës në

Sarandë është 178166

<html>

<head>

google.load('visualization', '1', {'packages': ['geochart']});

google.setOnLoadCallback(drawMarkersMap);

function drawMarkersMap() {

var data = google.visualization.arrayToDataTable([

['City', 'Gjendje Arka'],

[ 'Ballsh', 106676],

[ 'Berat', 47823],

[ 'Devoll', 120809],

[ 'Divjakë', 75733],

[ 'Ersekë', 98981],

[ 'Fier', 51393],

[ 'Gjirokastër',135201],

[ 'Korçë', 69844],

[ 'Kuçovë', 82683],

[ 'Lezhë', 106599],

[ 'Lushnjë', 74986],

[ 'Përmet', 208498],

[ 'Sarandë', 178166],

[ 'Skrapar', 6036],

[ 'Vlorë', 105599]

]);

var options = { region: 'AL', displayMode: 'markers',

resolution: 'provinces',

colorAxis: {colors: ['red', 'green']} };

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

chart.draw(data, options);

};

</script>

</head>

<body >

</body>

</html>

Të dhënat gjeografike merren nga serverat e google me anë të web serviseve. API i sistemit të informacionit gjeografik që vë në dispozicion Google, i njohur ndryshe si Google Maps , përdor web servicet si ndërfaqe për të marrë nga shërbime të jashtme të dhënat gjeografike dhe përdorimin e tyre në aplikimin me harta dhe geocharts. Këto web service dërgojnë kërkesa HTTP drejt një URL specifike duke i shoqëruar me parametrat dhe argumentat përkatëse të shërbimit. Në përgjithsi të dhënat që kthejnë këto shërbime janë në formatin JSON ose XML të cilat më tej procesohen ose interpretohen nga aplikimi ynë. Thirrja e një web service-i siç paraqitet edhe në kodin më sipër bëhet duke include-uar një script me source si më poshtë:

Paketa që merret në loadim me anë të google.load është "geochart".

google.load('visualization', '1', {'packages': ['geochart']});

Klasa përgjegjëse për shfaqjen e geochart quhet google.visualization.GeoChart, dhe si parametër merr konteinerin ku do të vendoset geochart i cili në rastin e aplikimit është layeri “chart_div”.

var visualization = new google.visualization.GeoChart(container);

Për të dhënat data të cilat do të jenë input për geochartin duhet të përcaktojmë mirë nëse do të shfaqim shtete “Country”, apo qytete “City”. Më pas duhet të përcaktohen saktë opsionet e charter-it.

var options = { region: 'AL', displayMode: 'markers',

resolution: 'provinces',

colorAxis: {colors: ['red', 'green']} };

Atributi region përcakton zonën e cila është Shqipëria së cilës i korrespondon kodi ‘AL’. Atributi displaymode default është regions ku meret në konsideratë e gjithë forma e qytetit ndërsa në rastin kur është shënuar markers të dhënat shfaqen në formë rathësh të cilët janë të customizueshëm dhe në bazë të vlerës ndryshojnë ngjyrën dhe madhësinë.

Atributi resolution i cili default është countries dhe përcakton se cili është rezolucioni për kufijtë e hartës, mund të marrë vlera 'countries', ‘provinces’, ‘metros’ (e fundit vlen vetëm për SHBA).

Në rastin e mëposhtëm kemi të përcaktuar një objekt var options = {}; përcaktim i cili tregon se të gjithë atributet marin vlera default. Ngjyrat variojnë nga e bardha tek e gjelbra e errët. Si rajon është marrë e gjithë bota kurse si rezolucion janë shtetet.

Në këtë geochart paraqitet numri i vizitorëve që ka sistemi e-commerce. Ky chart është i ngjashëm me atë cfarë ofron google analitycs. Sistemi për cdo vizitor të faqes mban shënim në bazë të të dhënave IP dhe shtetin të cilit i përket. Me anë të një query dhe me ndihmën e ODBC merren të dhënat në server site dhe kur kthehen në client i formatojmë në formën e një array me kolonën e parë shtetet dhe të dytën numrin e vizitave. Një aplikim shumë i nevojshëm ky pasi e mënjanon nevojën e një API për google analitycs të cilin do të duhej ta menaxhonte dhe implemetonte një specialist, ndërkohë që rezultatet e shfaqura nga ky geochart janë lehtësisht të kuptueshme dhe të thjeshta për tu gjeneruar.

Geocharter me rajone për të treguar numrin e vizitorëve të sistemit

nga shtete të ndryshme të botës

<html>

<head>

google.load('visualization', '1', {'packages': ['geochart']});

google.setOnLoadCallback(drawRegionsMap);

function drawRegionsMap() {

var data = google.visualization.arrayToDataTable([

['Country', ‘Shikueshmeria’],

['Germany', 300],

[Albania, 400],

['United States', 900],

['Brazil', 400],

['Canada', 500],

['France', 600],

['RU', 700]

]);

var options = {};

var chart = new google.visualization.GeoChart(document.getElementById('chart_div'));

chart.draw(data, options);

};

</script>

</head>

<body>

</body>

</html>

Parametrat:

Configuration Options

Continent Hierarchy and Codes

Methods

Events