Regional Text Google Chart Text Onclick Tutorial
✂🏃🏾‍♀️🏃🏼‍♂️
☞
📖

🔀 📅 ➕ 📧
Regional Text Google Chart Text Onclick Tutorial

Regional Text Google Chart Text Onclick Tutorial   🔍

The SVG elements in the Google Chart Geo Charts subplayer, for Map Chart option, in our latest Regional Maps web application of interest, featuring in yesterday’s Regional Text Google Chart Text Tooltip Tutorial, behave, for the most part, as far as Javascript DOM ideas go, like regular HTML elements, with their event-driven programming capabilities.

And so, getting past “the look” of them, we turn our attention today, to the “way they behave” via …

  • event … in our case onclick event … logics … pointing to …
  • Javascript … largely using …
  • DOM … Document Object Model

… modus operandi, making those regional text parts to these Regional Maps spring to life, and become more useful, and now capable of navigating a user to relevant …

… resources, that latter one accessed on a double click, but not needing the ondblclick event, just checking for a second call, in a row, of that onclick event Javascript function …

<?php echo ”


var lastwwoo='';



function wowox() {

var latlongstuffs=[],alatis='',alongis='',suggm='';



if (lastwwoo != '//wikipedia.org/wiki/' + encodeURIComponent(event.target.innerHTML.split('<')[0].replace(/\ /g,'_').replace(/\+/g,'_'))) {

lastwwoo='//wikipedia.org/wiki/' + encodeURIComponent(event.target.innerHTML.split('<')[0].replace(/\ /g,'_').replace(/\+/g,'_'));

window.open('//wikipedia.org/wiki/' + encodeURIComponent(event.target.innerHTML.split('<')[0].replace(/\ /g,'_').replace(/\+/g,'_')),'_blank','top=50,left=50,height=600,width=600');

} else {

latlongstuffs=document.head.innerHTML.split(',' + String.fromCharCode(39) + event.target.innerHTML.split('<')[0] + String.fromCharCode(39) + ',2]');



if (eval('' + latlongstuffs.length) > 1) {

alatis=('+' + latlongstuffs[0].split('[')[eval(-1 + latlongstuffs[0].split('[').length)].split(',')[0]).replace('+-','-');

alongis=('+' + latlongstuffs[0].split('[')[eval(-1 + latlongstuffs[0].split('[').length)].split(',')[1]).replace('+-','-');

//suggm='//maps.google.com/maps?z=11&t=m&q=loc:' + alatis + alongis;

//suggm='//earth.google.com/web/@' + alatis + alongis + ',328.51120179a,63169669.71505167d,1y,0h,0t,0r';

suggm='//maps.google.com/maps?q=' + alatis.replace('+','') + ',' + alongis.replace('+','');

if (lastwwoo != suggm) {

lastwwoo=suggm;

window.open(suggm,'_blank','top=60,left=60,height=580,width=920');

}



}



}

}


“; ?>

It also occurred to us we could improve on the “strike rate” shading more “island based country” parts of country boundaries behind our Regional Map (SVG) text elements because we had all those extra text anchor positions to check polygons against …

<?php echo ”


var tarray=[]; // elsewhere filled with SVG text element objects



function pointInPolygon(polygon, point) { // thanks to https://community.appinventor.mit.edu/t/geofence-check-if-a-point-is-inside-a-polygon-javascript-map/57091

var odd = false, tar=0, worryonthis=false, jtar=0, excludethis=false, excludeall=false;

var inlisti=['>Jawa<'];

var exlisti=['>Champasak'];

var callitoffi=['>Attapu'];

for (var i = 0, j = polygon.length - 1; i < polygon.length; i++) {

if (((polygon[i][1] > point[1]) !== (polygon[j][1] > point[1]))

&& (point[0] < ((polygon[j][0] - polygon[i][0]) * (point[1] - polygon[i][1]) / (polygon[j][1] - polygon[i][1]) + polygon[i][0]))) {

odd = !odd;

}

j = i;

}

if (!odd && !doingtar) {

if (eval('' + tarray.length) > 0) {

doingtar=true;

excludeall=false;

for (jtar=0; jtar<inlisti.length; jtar++) {

if (tarray[tar].outerHTML.indexOf(callitoffi[jtar]) != -1) {

excludeall=true;

}

}

if (!excludeall) {

for (tar=0; tar<tarray.length; tar++) {

worryonthis=false;

excludethis=false;

for (jtar=0; jtar<inlisti.length; jtar++) {

if (tarray[tar].outerHTML.indexOf(exlisti[jtar]) != -1) {

excludethis=true;

}

}

if (!excludethis) {

for (jtar=0; jtar<inlisti.length; jtar++) {

if (tarray[tar].outerHTML.indexOf(inlisti[jtar]) != -1) {

worryonthis=true;

}

}

odd=pointInPolygon(polygon, eval('[' + tarray[tar].outerHTML.split('x=\"')[1].split('\"')[0] + ',' + tarray[tar].outerHTML.split('y=\"')[1].split('\"')[0] + ']'));

if (odd) {

doingtar=false;

return odd;

} else if (worryonthis) {

odd=pointInPolygon(polygon, eval('[' + eval(-8 + eval('' + tarray[tar].outerHTML.split('x=\"')[1].split('\"')[0])) + ',' + eval(-8 + eval('' + tarray[tar].outerHTML.split('y=\"')[1].split('\"')[0])) + ']'));

if (!odd) {

odd=pointInPolygon(polygon, eval('[' + eval(8 + eval('' + tarray[tar].outerHTML.split('x=\"')[1].split('\"')[0])) + ',' + eval(8 + eval('' + tarray[tar].outerHTML.split('y=\"')[1].split('\"')[0])) + ']'));

}

if (!odd) {

odd=pointInPolygon(polygon, eval('[' + eval(8 + eval('' + tarray[tar].outerHTML.split('x=\"')[1].split('\"')[0])) + ',' + eval(-8 + eval('' + tarray[tar].outerHTML.split('y=\"')[1].split('\"')[0])) + ']'));

}

if (!odd) {

odd=pointInPolygon(polygon, eval('[' + eval(-8 + eval('' + tarray[tar].outerHTML.split('x=\"')[1].split('\"')[0])) + ',' + eval(8 + eval('' + tarray[tar].outerHTML.split('y=\"')[1].split('\"')[0])) + ']'));

}

if (odd) {

doingtar=false;

return odd;

}

}

}

}

}

doingtar=false;

return odd;

}

}

return odd;

}


“; ?>

Again, feel free to try thechanged geo_chart⚫php used in the Map Chart option of the inhouse web application interfacer.


Previous relevant Regional Text Google Chart Text Tooltip Tutorial is shown below.

Regional Text Google Chart Text Tooltip Tutorial

Regional Text Google Chart Text Tooltip Tutorial   🔍

Inherent with the involvement of Google Chart Geo Charts in Regional Text Google Chart Text Configurations Tutorial‘s web application Map Chart option …

This entry was posted in eLearning, Event-Driven Programming, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *