{"id":61939,"date":"2023-12-10T03:01:55","date_gmt":"2023-12-09T17:01:55","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61939"},"modified":"2023-12-16T09:47:12","modified_gmt":"2023-12-15T23:47:12","slug":"google-chart-image-chart-image-map-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-image-map-tutorial\/","title":{"rendered":"Google Chart Image Chart Image Map Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Image Map Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_image_map.jpg\" title=\"Google Chart Image Chart Image Map Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Image Map Tutorial<\/p><\/div>\n<p>Do you like to come at explaining things in layers?  Sort of like the analogy &#8230;<\/p>\n<ul>\n<li>you start a project thinking of it in terms of &#8220;2D&#8221; &#8230; and then to move forward &#8230;<\/li>\n<li>you spend a day making it work for &#8220;3D&#8221; (and keep the &#8220;2D&#8221; working as well)<\/li>\n<\/ul>\n<p> &#8230; or &#8230;<\/p>\n<ul>\n<li>you start a web application project thinking of only working via a URL entered on the web browser address bar &#8230; and then to move forward &#8230;<\/li>\n<li>you spend a day making it work for serving the same purpose and\/or a difference purpose called within an HTML iframe  (and keep it working for the address bar way as well)<\/li>\n<\/ul>\n<p>And so we look at a &#8220;picturesque&#8221; but &#8220;kinda dumb&#8221; <font size=1>(as far as &#8220;action items&#8221; go)<\/font> image we have coming off the interfacing to Google Charts Image Chart.  Where can we go here?  Well, it would be kind of you to take it to the beach, but that&#8217;s not always a possibility now, is it?!  <font size=2>Were you pulling my leg?!<\/font> <font size=1>Tee hee.<\/font>  No, we were thinking &#8230; <font size=1>oh no &#8230; we have a bad feeling about this<\/font> &#8230; let&#8217;s open it up to the class &#8230; <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>anyone, anyone<\/a>?   Yes, <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Auguste_and_Louis_Lumi%C3%A8re'>Louis<\/a>, would you and <a target=_blank title='?' href='https:\/\/en.wikipedia.org\/wiki\/Auguste_and_Louis_Lumi%C3%A8re'>Auguste<\/a> like to share with the class what is so amusing to you?<\/p>\n<p>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<p>Okay, thank you for your thoughts on this, and yes, you could take the &#8220;picture&#8221; to &#8220;a picture show&#8221;.  Yes, very droll, indeed.  Any other ideas?   Okay, <a target=_blank title=? href='https:\/\/en.wikipedia.org\/wiki\/Johann_Zahn'>Johann<\/a>, you say the idea just &#8220;clicked&#8221; with you.  This sounds promising.  Go on &#8230;<\/p>\n<p>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<p>Indeed, a young &#8220;picturesque&#8221; might like to go tap dancing, that is true.  <font size=1>Sheeeeesh!<\/font>  But given the lesson is a Computing one, rather than Drama or Dance or Music or the Arts, maybe we would be looking for a way to use the picture in an enhanced way.  Okay <a target=_blank title=? href='https:\/\/en.wikipedia.org\/wiki\/Kevin_Hughes_(Internet_pioneer)'>Kevin<\/a>, we&#8217;ll try you.  What do you think?<\/p>\n<p>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<p>Frankly, we are flabbergasted!  It&#8217;s as if you invented HTML <a target=_blank title='HTML image map' href='https:\/\/www.w3schools.com\/tags\/tag_map.asp'>image maps<\/a> <font size=1>(as a way to add position based event logic)<\/font>, or something &#8230; 9<sup>3<\/sup>\/<sub>4<\/sub> points to Gryffindor!<\/p>\n<p>Yes, helping out we image map enthusiasts regarding interfacing to <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Charts<\/a> is Google&#8217;s <a target=_blank title='Image Map creator helping tool' href='https:\/\/developers.google.com\/chart\/image\/docs\/json_format#{%22chartshape%22:[{%22name%22:%22legend0%22,%22type%22:%22RECT%22,%22coords%22:[523,165,535,177]},{%22name%22:%22legend1%22,%22type%22:%22RECT%22,%22coords%22:[523,183,535,195]},{%22name%22:%22legend2%22,%22type%22:%22RECT%22,%22coords%22:[523,201,535,213]},{%22name%22:%22circle0%22,%22type%22:%22CIRCLE%22,%22coords%22:[324,222,127]},{%22name%22:%22circle1%22,%22type%22:%22CIRCLE%22,%22coords%22:[176,222,113]},{%22name%22:%22circle2%22,%22type%22:%22CIRCLE%22,%22coords%22:[237,126,98]}]}'>Image Map creation helping Json output tool<\/a>.  From that help, we can &#8230;<\/p>\n<ul>\n<li>at the demonstrator&#8217;s webpage, create an Image Map &#8230; and as the user requires &#8230;<\/li>\n<li>at the uniquifier definition phase of our WordPress 404.php&#8217;s contribution we accept the demonstrator&#8217;s image map HTML, <font color=blue>and save it to a public resource<\/font> &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['canvcont'])) {<br \/>\n     if (isset($_POST['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_POST['uniquifier']));<br \/>\n     }<br \/>\n     if ($uniquifier == '') {<br \/>\n       $uniquifier='_' . rand(0,78654356);<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n     <font color=blue>if (isset($_POST['mapstuff'])) {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".html\", '&lt;html&gt;&lt;body&gt;' . str_replace('+',' ',urldecode($_POST['mapstuff'])) . '&lt;\/body&gt;&lt;\/html&gt;');<br \/>\n     }<\/font><br \/>\n       exec(\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 20 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<br \/>\n       echo \"&lt;html&gt;&lt;body onload=\\\"if (parent.document.getElementById('uniquifier')) {  if (parent.document.getElementById('uniquifier').value == '') { parent.document.getElementById('uniquifier').value='\" . $uniquifier . \"';  }  }\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     } else {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\")) {<br \/>\n       $middelay='';<br \/>\n       $enddelay='';<br \/>\n       if (filesize($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\") &lt; filesize($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png\")) {<br \/>\n        $middelay=' -delay 800 ';<br \/>\n        $enddelay=' -delay 800 ';<br \/>\n       }<br \/>\n       exec(\"rm -f  \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif ; \/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 600 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png \" . $middelay . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png \" . $enddelay . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<br \/>\n       } else {<br \/>\n       exec(\"rm -f  \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif ; \/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 200 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<br \/>\n       }<br \/>\n     }<br \/>\n     exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;\n<\/li>\n<li>helping keep the image mapping going, even if the Image Chart is &#8230;\n<ol>\n<li>shared via email or SMS &#8230; and\/or &#8230;<\/li>\n<li>forms the basis of a Broadcast Talk demonstration session<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p>We could use <a target=_blank title='Ajax information from Wikipedia ... thanks' href='https:\/\/en.wikipedia.org\/wiki\/Ajax_(programming)'>Ajax<\/a> techniques for the Javascript client ways an emailee&#8217;s link&#8217;s webpage invocation can use this new resource, but we kind of like <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/?s=client+pre-emptive+iframe' title='Client Pre-emptive Iframe techniques blog postings'>&#8220;client pre-emptive iframe&#8221;<\/a> <font size=1>onload<\/font> event thinking, for both sides of the ledger, to get this going, as per &#8230;<\/p>\n<p><code><br \/>\n function htmlDecode(input) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/1912501\/unescape-html-entities-in-javascript<br \/>\n  var e = document.createElement('textarea');<br \/>\n  e.innerHTML = input;<br \/>\n  \/\/ handle case of empty input<br \/>\n  return e.childNodes.length === 0 ? \"\" : e.childNodes[0].nodeValue;<br \/>\n }<br \/>\n  <br \/>\n  function mapsofarpj(xiois) {<br \/>\n   \/\/alert(('' + xiois.src));<br \/>\n   if (xiois.src != '' && ('' + xiois.src).indexOf('presentation') != -1) {<br \/>\n   \/\/alert(('' + xiois.src));<br \/>\n       var xaconto = (xiois.contentWindow || xiois.contentDocument);<br \/>\n   \/\/alert(11);<br \/>\n       if (xaconto != null) {<br \/>\n   \/\/alert(111);<br \/>\n       if (xaconto.document) { xaconto = xaconto.document; }<br \/>\n    \/\/alert(1111);<br \/>\n       if (xaconto.body.innerHTML.indexOf('&lt;map') != -1) {<br \/>\n        var ihis=xaconto.body.innerHTML;<br \/>\n        \/\/while (ihis.indexOf('\\&quot;') != -1) {<br \/>\n        \/\/  ihis=ihis.replace('\\&quot;', '')<br \/>\n        \/\/}<br \/>\n        ihis=htmlDecode(ihis).replace(\/\\\\\"\/g,'').replace(\/\\\\'\/g,\"'\").replace(\/\\=\\\"\\\"\/g,'').replace(\/This\\\"\/g,\"This\").replace(\/\\;\\ nohref\/g, ';\" nohref');<br \/>\n        \/\/alert(ihis);<br \/>\n         if (document.getElementById('jdiv')) {<br \/>\n    \/\/alert(21111);<br \/>\n          document.getElementById('jdiv').innerHTML=ihis; \/\/xaconto.body.innerHTML;<br \/>\n    \/\/alert(31111);<br \/>\n          document.getElementById('talkimg').useMap='#mymap';<br \/>\n    \/\/alert(41111);<br \/>\n         } else {<br \/>\n          document.body.innerHTML+=ihis; \/\/xaconto.body.innerHTML;<br \/>\n          document.getElementById('talkimg').useMap='#mymap';<br \/>\n         }<br \/>\n        }<br \/>\n       }<br \/>\n   }<br \/>\n  }<br \/>\n <br \/>\n  function sofarpj(iois) {<br \/>\n   var aname='', partsare=[], ipis=0, areabits='';<br \/>\n   if (iois.src != '') {<br \/>\n       var aconto = (iois.contentWindow || iois.contentDocument);<br \/>\n       if (aconto != null) {<br \/>\n       if (aconto.document) { aconto = aconto.document; }<br \/>\n          pjsbih=aconto.body.innerHTML;<br \/>\n          if (lastpjsbih != '' && pjsbih != lastpjsbih.replace(\/\\ $\/g,'')) {<br \/>\n            \/\/alert('Found new Image Map data of ' + pjsbih);<br \/>\n            \/\/ {\"chartshape\":[{\"name\":\"axis0_0\",\"type\":\"RECT\",\"coords\":[21,336,28,344]},{\"name\":\"axis0_1\",\"type\":\"RECT\",\"coords\":[65,336,77,344]},{\"name\":\"axis0_2\",\"type\":\"RECT\",\"coords\":[111,336,124,344]},{\"name\":\"axis0_3\",\"type\":\"RECT\",\"coords\":[158,336,170,344]},{\"name\":\"axis0_4\",\"type\":\"RECT\",\"coords\":[204,336,217,344]},{\"name\":\"axis0_5\",\"type\":\"RECT\",\"coords\":[251,336,263,344]},{\"name\":\"axis0_6\",\"type\":\"RECT\",\"coords\":[297,336,310,344]},{\"name\":\"axis0_7\",\"type\":\"RECT\",\"coords\":[344,336,356,344]},{\"name\":\"axis0_8\",\"type\":\"RECT\",\"coords\":[390,336,403,344]},{\"name\":\"axis0_9\",\"type\":\"RECT\",\"coords\":[437,336,449,344]},{\"name\":\"axis0_10\",\"type\":\"RECT\",\"coords\":[480,336,499,344]},{\"name\":\"axis1_0\",\"type\":\"RECT\",\"coords\":[14,326,20,334]},{\"name\":\"axis1_1\",\"type\":\"RECT\",\"coords\":[8,297,20,305]},{\"name\":\"axis1_2\",\"type\":\"RECT\",\"coords\":[8,267,20,275]},{\"name\":\"axis1_3\",\"type\":\"RECT\",\"coords\":[8,237,20,245]},{\"name\":\"axis1_4\",\"type\":\"RECT\",\"coords\":[8,208,20,216]},{\"name\":\"axis1_5\",\"type\":\"RECT\",\"coords\":[8,178,20,186]},{\"name\":\"axis1_6\",\"type\":\"RECT\",\"coords\":[8,148,20,156]},{\"name\":\"axis1_7\",\"type\":\"RECT\",\"coords\":[8,119,20,127]},{\"name\":\"axis1_8\",\"type\":\"RECT\",\"coords\":[8,89,20,97]},{\"name\":\"axis1_9\",\"type\":\"RECT\",\"coords\":[8,59,20,67]},{\"name\":\"axis1_10\",\"type\":\"RECT\",\"coords\":[2,29,20,37]},{\"name\":\"legend0\",\"type\":\"RECT\",\"coords\":[500,167,512,179]},{\"name\":\"legend1\",\"type\":\"RECT\",\"coords\":[500,185,512,197]},{\"name\":\"circle0\",\"type\":\"CIRCLE\",\"coords\":[80,39,4]},{\"name\":\"circle1\",\"type\":\"CIRCLE\",\"coords\":[429,152,1]},{\"name\":\"circle2\",\"type\":\"CIRCLE\",\"coords\":[373,250,3]},{\"name\":\"circle3\",\"type\":\"CIRCLE\",\"coords\":[215,230,4]},{\"name\":\"circle4\",\"type\":\"CIRCLE\",\"coords\":[131,164,2]},{\"name\":\"circle5\",\"type\":\"CIRCLE\",\"coords\":[471,96,5]},{\"name\":\"circle6\",\"type\":\"CIRCLE\",\"coords\":[341,158,3]},{\"name\":\"circle7\",\"type\":\"CIRCLE\",\"coords\":[355,111,5]},{\"name\":\"circle8\",\"type\":\"CIRCLE\",\"coords\":[183,277,3]},{\"name\":\"circle9\",\"type\":\"CIRCLE\",\"coords\":[66,105,3]}]}<br \/>\n            if (pjsbih.replace(\/\\[\\]\/g, '').indexOf('[') != -1) {<br \/>\n               partsare=pjsbih.split('\",\"coords\":[');<br \/>\n               for (ipis=1; ipis&lt;partsare.length; ipis++) {<br \/>\n                 if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'RECT') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"rect\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'CIRCLE') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"circle\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'POLY') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"poly\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 }<br \/>\n               }<br \/>\n               document.getElementById('mymap').innerHTML=areabits + '&lt;area' + atend.split('&lt;area')[1].split('&gt;')[0] + '&gt;';  \/\/\"&lt;area onclick=defclick(event); shape='default' nohref&gt;\";<br \/>\n               origmap=document.getElementById('mymap').outerHTML;<br \/>\n            }<br \/>\n          } else if (lastpjsbih != '') {<br \/>\n            \/\/alert('Found the same ' + pjsbih);<br \/>\n            if (pjsbih.replace(\/\\[\\]\/g, '').indexOf('[') != -1) {<br \/>\n               partsare=pjsbih.split('\",\"coords\":[');<br \/>\n               for (ipis=1; ipis&lt;partsare.length; ipis++) {<br \/>\n                 if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'RECT') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"rect\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'CIRCLE') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"circle\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 } else if (partsare[eval(-1 + ipis)].split('\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"').length)] == 'POLY') {<br \/>\n                   aname=partsare[eval(-1 + ipis)].split('\"name\":\"')[eval(-1 + partsare[eval(-1 + ipis)].split('\"name\":\"').length)].split('\"')[0];<br \/>\n                   areabits+='&lt;area shape=\"poly\" coords=\"' + partsare[ipis].split(']')[0] + '\" alt=\"' + aname + '\" onclick=\"' + \"alert('This feature name is \" + aname + \"'\" + ');\" nohref&gt;';<br \/>\n                 }<br \/>\n               }<br \/>\n               document.getElementById('mymap').innerHTML=areabits + '&lt;area' + atend.split('&lt;area')[1].split('&gt;')[0] + '&gt;';  \/\/\"&lt;area onclick=defclick(event); shape='default' nohref&gt;\";<br \/>\n               origmap=document.getElementById('mymap').outerHTML;<br \/>\n            }<br \/>\n          }<br \/>\n          lastpjsbih=pjsbih;<br \/>\n       }<br \/>\n    }<br \/>\n  }<br \/>\n<\/code> <\/p>\n<p> &#8230; further to yesterday&#8217;s <a title='Google Chart Image Chart Dynamic Icons Tutorial' href='#gcicdit'>Google Chart Image Chart Dynamic Icons Tutorial<\/a> in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------------GETME\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-image-map-tutorial\/'>Google Chart Image Chart Image Map Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicdit'>Previous relevant <a target=_blank title='Google Chart Image Chart Dynamic Icons Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-dynamic-icons-tutorial\/'>Google Chart Image Chart Dynamic Icons Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Dynamic Icons Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_dynamic_icons.jpg\" title=\"Google Chart Image Chart Dynamic Icons Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Dynamic Icons Tutorial<\/p><\/div>\n<p>Does statistics have to be staid and boring?  Kitch and quiche?!  Welcome to the wooorrrlllddd of <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> <a target=_blank title='Google Charts Image Chart Dynamic Icons' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/dynamic_icons'>Dynamic Icons<\/a>!<\/p>\n<p>Think of Dynamic Icons as a way to decorate one or more data points displayed in one of &#8230;<\/p>\n<ul>\n<li>Line Chart<\/li>\n<li>Bar Chart<\/li>\n<li>Map Chart<\/li>\n<li>Radar Chart<\/li>\n<\/ul>\n<p>We had that certain <font size=5>&#8220;Wow<sup>!<\/sup>&#8220;<\/font> factor going as we remembered our state&#8217;s motto from some years back, and we tried out the Map Chart to see whether we could embellish the map with a Dynamic Icon relevant to New South Wales, as you can see with today&#8217;s <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_dynamic_icons.jpg\">tutorial picture<\/a>.<\/p>\n<p>We&#8217;ll show you the most recent snapshot of Javascript parameters a little later, but the change for this is an optional one up to the user to work out, with prompts such as the Map Chart one <font color=blue>updated<\/font> &#8230;<\/p>\n<table style=\"width:100%;\">\n<tr>\n<td><img src='\/\/www.rjmprogramming.com.au\/ITblog\/550\/330\/?cht=map&#038;chld=AU-NT%7CAU-NSW%7CAU-SA%7CNZ%7CIN&#038;chco=B3BCC0|5781AE|FF0000|FFC726|885E80|518274|A3BCC0|4781AE|EF0000|EFC726|785E80|418274&#038;chem=y;s=bubble_icon_text_small;d=ski,bb,NSW%20State%20of%20Wow!,FFFFFF;dp=1;ds=0'><\/img><\/td>\n<\/tr>\n<tr>\n<td style='vertical-align:top;'>\n<blockquote><p>\nEnter vertical bar separated country ISO Country and\/or Region Code list<font color=blue size=1>.  Please note that optional Dynamic Icons are available via a suffixing string example applied to the second data point such as &#038;chem=y;s=bubble_icon_text_small;d=ski,bb,NSW%20State%20of%20Wow!,FFFFFF;dp=1;ds=0 <\/font> eg. AU-NT|AU-NSW|AU-SA|NZ|IN&#8217;\n<\/p><\/blockquote>\n<\/td>\n<tr><\/table>\n<p>And <font color=blue>here is its relevance<\/font> in a new snapshot of parameterizations &#8230;<\/p>\n<p><code><br \/>\n  var prefixandon='';<br \/>\n  var dtextis='dtext';<br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var colchange='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  \/\/if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'bv'.substring(0,1) && cht != 'bv'.substring(0,1)) { pretherest=cht.substring(1); if (1 == 1) { cht='bv'.substring(0,1); }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'r' && cht != 'r') { pretherest=cht.substring(1); if (1 == 1) { cht='r'; }   }<br \/>\n  var ccode=location.search.split('chld=')[1] ? decodeURIComponent(location.search.split('chld=')[1].split('&')[0]) : \"\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' :<br \/>\n  (ctype == 'map' ? 'Map Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter Chart' :<br \/>\n  (ctype == 'r' ? 'Radar Chart' :<br \/>\n  '')))))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' :<br \/>\n  (ctype == 'map' ? 'Map%20Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter%20Chart' :<br \/>\n  (ctype == 'r' ? 'Radar%20Chart' :<br \/>\n  '')))))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chd=t:' :<br \/>\n  (ctype == 'r' ? pretherest + '&chd=t:' :<br \/>\n  '')))))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' :<br \/>\n  (ctype == 'map' ? '&chld=' :<br \/>\n  (ctype == 'gom' ? '&chld=' :<br \/>\n  (ctype == 'r' ? '&chd=' :<br \/>\n  '')))))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 't:' :<br \/>\n  (ctype == 'r' ? 't:' :<br \/>\n  '')))))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  (ctype == 'r' ? '&chxt=x&chxl=' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '20,40,60' :<br \/>\n  (ctype == 'r' ? '10,20,30,40,50' :<br \/>\n  '')))))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'A|B|C' :<br \/>\n  (ctype == 'r' ? '0:|1|2|3|4|5|6' :<br \/>\n  '')))))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'ff0000,00ff00,0000ff' :<br \/>\n  (ctype == 'r' ? 'FF0000,FF9900,ff0a00,00ffb0,000cff' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'r' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  '')))))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter v for Vertical or h for Horizontal then one of g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and horizontal Bar Chart idea eg. hg 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? true : (ctype.substring(0,1) == 'l' ? true :<br \/>\n  (ctype == 'map' ? false :<br \/>\n  (ctype == 'gom' ? true :<br \/>\n  (ctype == 'r' ? true :<br \/>\n  false)))))))));<br \/>\n  <br \/>\n  <font color=blue>var answersuffix=(ctype.substring(0,1).replace('m','l').replace('b','l').replace('r','l') == 'l' ? '.  Please note that optional Dynamic Icons are available via a suffixing string example applied to the second data point such as &chem=y;s=bubble_icon_text_small;d=ski,bb,Wheeee!,FFFFFF;dp=1;ds=0 ' : '');<\/font><br \/>\n  <br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'vg ' : ''));<br \/>\n  <br \/>\n  var emsmlist='';<br \/>\n<\/code><\/p>\n<p> &#8230; further to yesterday&#8217;s <a title='Google Chart Image Chart Broadcast Talk Commentary Tutorial' href='#gcicbtct'>Google Chart Image Chart Broadcast Talk Commentary Tutorial<\/a> in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----------------GETME\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-dynamic-icons-tutorial\/'>Google Chart Image Chart Dynamic Icons Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicbtct'>Previous relevant <a target=_blank title='Google Chart Image Chart Broadcast Talk Commentary Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-commentary-tutorial\/'>Google Chart Image Chart Broadcast Talk Commentary Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Broadcast Talk Commentary Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_commentary.gif\" title=\"Google Chart Image Chart Broadcast Talk Commentary Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Broadcast Talk Commentary Tutorial<\/p><\/div>\n<p>We&#8217;ll leave yesterday&#8217;s <a title='Google Chart Image Chart Radar Chart Tutorial' href='#gcicrct'>Google Chart Image Chart Radar Chart Tutorial<\/a> angled text predilections for now, given we&#8217;ve got until Tuesday until tswhtf so to speak.  Let&#8217;s today remedy the concern we had when we presented <a title='Google Chart Image Chart Broadcast Talk Context Tutorial' href='#gcxicbtct'>Google Chart Image Chart Broadcast Talk Context Tutorial<\/a> regarding, the at the time new, &#8220;Broadcast Talk&#8221;, concept &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-tutorial\/'><p>\n &#8230; even though it is only visual by nature, presented as an update image still presented and updated periodically.  Go figure?!\n<\/p><\/blockquote>\n<p> &#8230; and offer a way to help the &#8220;Broadcast Talk&#8221; demonstrator &#8220;speak&#8221; during their demonstration, effectively.  In so doing, we are going to add to &#8230;<\/p>\n<ul>\n<li>the demonstrator&#8217;s visual inputs coming from that canvas annotator helper &#8230; with, today &#8230;<\/li>\n<li>the demonstrator&#8217;s commentary, collected via an HTML textarea element (to optionally supplement the visuals) from that canvas annotator helper&#8217;s originator window (ie. the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> interfacing supervisor) &#8230; presented &#8230;<\/li>\n<\/ul>\n<p> &#8230; via a new &#8220;middle of three slide&#8221; &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n      $uwidth=trim($uparts[$ioff - 2 + sizeof($uparts)]);<br \/>\n      $uheight=trim(explode('#',explode('?',$uparts[$ioff - 1 + sizeof($uparts)])[0])[0]);<br \/>\n  <font color=blue>if (isset($_GET['canvcont']) && isset($_GET['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_GET['uniquifier']));<br \/>\n       if (file_exists($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\")) {<br \/>\n          $im = imagecreatefromstring(file_get_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\"));<br \/>\n          $white = imagecolorallocate($im, 255, 255, 255);<br \/>\n          $black = imagecolorallocate($im, 1, 1, 1);<br \/>\n          imagefilledrectangle($im, 0, 0, $uwidth, $uheight, $white);<br \/>\n          imagesavealpha($im, TRUE);<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  imagettftext($im, 12, 0, 20, 20, $black, realpath('arial.ttf'), str_replace('+',' ',urldecode($_GET['canvcont'])));<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n<br \/>\n imagepng($im, $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation__\" . $uniquifier . \".png\");<br \/>\n imagedestroy($im);<br \/>\n exit;<br \/>\n       }<br \/>\n       exit;<br \/>\n  }   <\/font><br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; animated GIF (PHP 404.php helping) means of display in the viewer windows (off email invitation links they receive via the demonstrator) in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\">the changed<\/a> &#8230;<\/p>\n<p><code><br \/>\n  function askaway() {<br \/>\n     var waspis=prefixandon, nl='', newwaspis='';<br \/>\n     if (document.getElementById('bcommentary')) {<br \/>\n     if (document.getElementById('bcommentary').value.trim() != '') {<br \/>\n       if (document.getElementById('bcommentary').value.trim().indexOf(String.fromCharCode(10)) == -1) {<br \/>\n         nl=String.fromCharCode(10);<br \/>\n       }<br \/>\n       eightthousand=24000;<br \/>\n       if (('   ' + document.getElementById('bcommentary').value.trim()).slice(-3) != '...' && ('   ' + prefixandon.trim()).slice(-3) != '...' && (document.getElementById('bcommentary').value.trim() + '   ').substring(0,3) != '...') {<br \/>\n         prefixandon='';<br \/>\n         lastval='';<br \/>\n       } else if ((document.getElementById('bcommentary').value.trim() + '   ').substring(0,3) == '...') {<br \/>\n         if (waspis.indexOf(lastval.trim()) == -1) {<br \/>\n         prefixandon=String.fromCharCode(10) + lastval.trim().replace(\/\\.\\.\\.NoWayJosE$\/g, ' ' + nl + ('' + (new Date()))  + ' ... ') + waspis;<br \/>\n         newwaspis=prefixandon;<br \/>\n         }<br \/>\n       }<br \/>\n       if (('   ' + document.getElementById('bcommentary').value.trim()).slice(-3) == '...') {<br \/>\n       document.getElementById('ifco').src='\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?uniquifier=' + encodeURIComponent(document.getElementById('uniquifier').value) + '&canvcont=' + encodeURIComponent(document.getElementById('bcommentary').value.trim().replace(\/\\.\\.\\.$\/g, ' ' + nl + ('' + (new Date())) + ' ... ' + String.fromCharCode(10) + String.fromCharCode(10) + prefixandon));<br \/>\n       } else {<br \/>\n       document.getElementById('ifco').src='\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?uniquifier=' + encodeURIComponent(document.getElementById('uniquifier').value) + '&canvcont=' + encodeURIComponent(document.getElementById('bcommentary').value + String.fromCharCode(10) + String.fromCharCode(10) + prefixandon);<br \/>\n       }<br \/>\n       document.getElementById('bcommentary').title=document.getElementById('bcommentary').value;<br \/>\n       if ((document.getElementById('bcommentary').value.trim() + '   ').substring(0,3) == '...') {<br \/>\n         if (newwaspis != '') { waspis=newwaspis;  }<br \/>\n         if (waspis.indexOf(document.getElementById('bcommentary').value.trim()) == -1) {<br \/>\n         prefixandon=String.fromCharCode(10) + document.getElementById('bcommentary').value.trim().replace(\/\\.\\.\\.$\/g, ' ' + nl + ('' + (new Date()))  + ' ... ') + waspis;<br \/>\n         }<br \/>\n       }<br \/>\n       lastval=document.getElementById('bcommentary').value;<br \/>\n       document.getElementById('bcommentary').value='';<br \/>\n       setTimeout(function(){ document.getElementById('subcc').click(); }, 2000);<br \/>\n     }<br \/>\n     }<br \/>\n  }<br \/>\n  <br \/>\n  function newfunction() {<br \/>\n         if (document.getElementById('bshare')) {<br \/>\n         document.getElementById('sbshare').innerHTML='&lt;iframe id=ifco style=display:none; src=&gt;&lt;\/iframe&gt;&lt;br&gt;&lt;br&gt;&lt;textarea rows=2 cols=80 id=bcommentary placeholder=\"Commentary to Viewers can go here ... start with or end with  ... for ongoing ...\" onblur=\"askaway(this);\" value=\"\"&gt;&lt;\/textarea&gt;&lt;br&gt;&lt;br&gt;';<br \/>\n         }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-commentary-tutorial\/'>Google Chart Image Chart Broadcast Talk Commentary Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicrct'>Previous relevant <a target=_blank title='Google Chart Image Chart Radar Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-radar-chart-tutorial\/'>Google Chart Image Chart Radar Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Radar Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_radar.jpg\" title=\"Google Chart Image Chart Radar Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Radar Chart Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Google Chart Image Chart Box Chart Tutorial' href='#gcicbct'>Google Chart Image Chart Box Chart Tutorial<\/a>, today we have a two part stepping forward via new &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Chart Image Chart Radar Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/radar_charts'>Radar Chart<\/a> interfacing for <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> &#8230; and &#8230;<\/li>\n<li>first tentative steps towards, on non-mobile platforms, allowing for text placement rubber banding<\/li>\n<\/ul>\n<p>Why the trepidation?  Well, so far, when the text is angled we can&#8217;t understand what results we are getting back from a call to [element].getBoundingClientRect() just yet.<\/p>\n<p>Why is this needed?  <font size=1>Again, with the questions!<\/font>  Well, Mr De Niro, you see, well, somebody might want to go onto that more complex annotating.<\/p>\n<p>And why would they do that?  <font size=1>Sheesh.<\/font>  Well, Mr De Niro, sir, you see, sometimes things happen in life, and well, fingers slip on keyboards, and mice get awfullllly nervous around screens these days.<\/p>\n<p>Yeh, well, show us the money, wiseguy.  <font size=1>Who&#8217;s is that question?  And what&#8217;s with the questions?<\/font>  Well, you see, Mr De Niro, the money is if we can get PHP text placement for text at an angle, where it rotates from the middle of the text, to get a similar positioning to good ol&#8217; &#8230; pardon, Mr De Niro &#8230; good and well respected Javascript transform rotations &#8230; not with a triple pike, Mr De Niro, but you&#8217;re awfulllllly close, Mr De Niro, sir &#8230; rather, we throw in a couple of translations &#8230; no, not Latin, Mr De Niro &#8230; of co-ordinates, Mr De Niro.<\/p>\n<p>And that will bring in how much by next Tuesday?  <font size=1>Back to the questions?  Why so many questions?<\/font>  We think it&#8217;s a pretty big money spinner, Mr De Niro, sir, and we think you should come back next Tuesday, and we can show you the ropes.  <font size=1>Sweat, oozing from the brow, as Mr De Niro exits stage left.<\/font><\/p>\n<p>And just while we have a few minutes, here&#8217;s the updated Javascript parameterization &#8230;<\/p>\n<p><code><br \/>\n  var dtextis='dtext';<br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var colchange='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  \/\/if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'bv'.substring(0,1) && cht != 'bv'.substring(0,1)) { pretherest=cht.substring(1); if (1 == 1) { cht='bv'.substring(0,1); }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'r' && cht != 'r') { pretherest=cht.substring(1); if (1 == 1) { cht='r'; }   }<br \/>\n  var ccode=location.search.split('chld=')[1] ? decodeURIComponent(location.search.split('chld=')[1].split('&')[0]) : \"\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' :<br \/>\n  (ctype == 'map' ? 'Map Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter Chart' :<br \/>\n  (ctype == 'r' ? 'Radar Chart' :<br \/>\n  '')))))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' :<br \/>\n  (ctype == 'map' ? 'Map%20Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter%20Chart' :<br \/>\n  (ctype == 'r' ? 'Radar%20Chart' :<br \/>\n  '')))))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chd=t:' :<br \/>\n  (ctype == 'r' ? pretherest + '&chd=t:' :<br \/>\n  '')))))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' :<br \/>\n  (ctype == 'map' ? '&chld=' :<br \/>\n  (ctype == 'gom' ? '&chld=' :<br \/>\n  (ctype == 'r' ? '&chd=' :<br \/>\n  '')))))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 't:' :<br \/>\n  (ctype == 'r' ? 't:' :<br \/>\n  '')))))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  (ctype == 'r' ? '&chxt=x&chxl=' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '20,40,60' :<br \/>\n  (ctype == 'r' ? '10,20,30,40,50' :<br \/>\n  '')))))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'A|B|C' :<br \/>\n  (ctype == 'r' ? '0:|1|2|3|4|5|6' :<br \/>\n  '')))))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'ff0000,00ff00,0000ff' :<br \/>\n  (ctype == 'r' ? 'FF0000,FF9900,ff0a00,00ffb0,000cff' :<br \/>\n  '')))))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'r' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  '')))))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter v for Vertical or h for Horizontal then one of g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and horizontal Bar Chart idea eg. hg 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  (ctype == 'r' ? \"Enter delimited values string for Radar Chart but prefix with an s for smooth lines\" :<br \/>\n  \"\")))))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? true : (ctype.substring(0,1) == 'l' ? true :<br \/>\n  (ctype == 'map' ? false :<br \/>\n  (ctype == 'gom' ? true :<br \/>\n  (ctype == 'r' ? true :<br \/>\n  false)))))))));<br \/>\n  <br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'vg ' : ''));<br \/>\n<br \/> <br \/>\n  var emsmlist='';<br \/>\n<\/code><\/p>\n<p> &#8230; that goes into helping make <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----------------GETME\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Radar Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>, have regular sleepovers on cloud nine.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Did you notice the inclusion of CSS styling &#8230;<\/p>\n<p>&lt;style&gt;<br \/>\n<code><br \/>\n#fsangle { background-image: url(\"data:image\/svg+xml;utf8,&lt;svg xmlns='http:\/\/www.w3.org\/2000\/svg' width='24' height='24' viewport='0 0 100 100' style='font-family:Verdana;font-size:10px;'&gt;&lt;text y='50%'&gt; \\00B0&lt;\/text&gt;&lt;\/svg&gt;\"); background-repeat: no-repeat; background-position: center right; }<br \/>\n<\/code><br \/>\n&lt;\/style&gt;<\/p>\n<p>?  It styles an input type=number textbox where a <i>placeholder<\/i> is not really an option to explain a textbox&#8217;s purpose, and we do dislike set aside labels, these days.  It&#8217;s also a way to explain the textbox for mobile users who do not get a hovering message to help.  It&#8217;s also got an internationalization feel to it, using the degree sign emoji &#176; (ie. &amp;#176; <font size=1>or that \\u0080 <a target=_blank title='Degree symbol' href='https:\/\/www.fileformat.info\/info\/unicode\/char\/b0\/index.htm'>UTF-16 Encoding style of definition<\/a> suitable for CSS styling usage<\/font>) to both associate the units we&#8217;d want, as well as that we are asking for an angle.  Clockwise or anticlockwise, alas, comes down to user experience!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-google-chart-image-chart-box-chart-tutorial\/'>New Google Chart Image Chart Radar Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicbct'>Previous relevant <a target=_blank title='Google Chart Image Chart Box Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-box-chart-tutorial\/'>Google Chart Image Chart Box Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Box Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_box.jpg\" title=\"Google Chart Image Chart Box Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Box Chart Tutorial<\/p><\/div>\n<p>Today we offer new &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Chart Image Chart Box Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/compound_charts#box_charts'>Box Chart<\/a> compound chart arrangements off the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> Bar Chart and Line Chart functionalties<\/li>\n<li><a target=_blank title='Google-O-Meter Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/googleometer_chart'>Google-O-Meter Chart<\/a> guage<\/li>\n<\/ul>\n<p> &#8230; interfacings, onto the progress up to yesterday&#8217;s <a title='Google Chart Image Chart Colour Tutorial' href='#gcicct'>Google Chart Image Chart Colour Tutorial<\/a>.<\/p>\n<p>As such, it&#8217;s probably timely to update you with the parameterization up the top of the Javascript code &#8230;<\/p>\n<p><code><br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var colchange='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  \/\/if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'bv'.substring(0,1) && cht != 'bv'.substring(0,1)) { pretherest=cht.substring(1); if (1 == 1) { cht='bv'.substring(0,1); }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  var ccode=location.search.split('chld=')[1] ? decodeURIComponent(location.search.split('chld=')[1].split('&')[0]) : \"\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' :<br \/>\n  (ctype == 'map' ? 'Map Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter Chart' :<br \/>\n  ''))))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' :<br \/>\n  (ctype == 'map' ? 'Map%20Chart' :<br \/>\n  (ctype == 'gom' ? 'Google-O-Meter%20Chart' :<br \/>\n  ''))))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chd=t:' :<br \/>\n  ''))))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' :<br \/>\n  (ctype == 'map' ? '&chld=' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  ''))))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 't:' :<br \/>\n  ''))))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '&chdl=' :<br \/>\n  ''))))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? '20,40,60' :<br \/>\n  ''))))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'A|B|C' :<br \/>\n  ''))))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? 'ff0000,00ff00,0000ff' :<br \/>\n  ''))))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  (ctype == 'map' ? '' :<br \/>\n  (ctype == 'gom' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ''))))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter v for Vertical or h for Horizontal then one of g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and horizontal Bar Chart idea eg. hg 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  \"\"))))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a vertical Bar Chart and Box Chart idea vs 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6    Here is a Line Chart and Box Chart idea s 1:-1,5,10,7,12,-1|-1,25,30,27,24,-1|-1,40,45,47,39,-1|-1,55,63,59,80,-1|-1,30,40,35,30,-1|-1,-1,5,70,90,-1|-1,-1,-1,80,5,-1&chm=F,FF9900,0,1:4,40|H,0CBF0B,0,1:4,1:20|H,000000,4,1:4,1:40|H,0000FF,3,1:4,1:20|o,FF0000,5,-1,7|o,FF0000,6,-1,7  Prefix just the delimited string you enter by 1: to additionally display Candlestick\/Box Charts or by 0: to only display Candlestick\/Box Chart\" :<br \/>\n  (ctype == 'map' ? \"\" :<br \/>\n  (ctype == 'gom' ? \"Enter delimited values string for Google-O-Meter Chart\" :<br \/>\n  \"\"))))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? true : (ctype.substring(0,1) == 'l' ? true :<br \/>\n  (ctype == 'map' ? false :<br \/>\n  (ctype == 'gom' ? true :<br \/>\n  false))))))));<br \/>\n  <br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2).substring(0,1) == 'bv'.substring(0,1) ? 'vg ' : ''));<br \/>\n  <br \/>\n  var emsmlist='';<br \/>\n<\/code><\/p>\n<p> &#8230; that goes into helping make <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------------GETME\">the changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------------GETME\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick\/Box Chart or Google-O-Meter Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>, one of the happiest little vegemites we know.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-box-chart-tutorial\/'>Google Chart Image Chart Box Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicct'>Previous relevant <a target=_blank title='Google Chart Image Chart Colour Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-colour-tutorial\/'>Google Chart Image Chart Colour Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Colour Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_colour_angle.jpg\" title=\"Google Chart Image Chart Colour Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Colour Tutorial<\/p><\/div>\n<p>Restricting you creatives to &#8220;inhouse annotations&#8221; of the &#8220;gray variety&#8221; might be seen as a bit boooorrrriiiinnnngggg!  And so, onto the progress up to yesterday&#8217;s <a title='Google Chart Image Chart Rubber Banding Tutorial' href='#gcicrbt'>Google Chart Image Chart Rubber Banding Tutorial<\/a>, today we&#8217;ve added a &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML input type=color Colour Picker element information from W3schools' href='https:\/\/www.w3schools.com\/tags\/att_input_type_color.asp'>colour picker<\/a> &#8230; way user can define an &#8220;inhouse annotations&#8221; colour &#8230; and while we were at it &#8230;<\/li>\n<li>as far as text &#8220;inhouse annotations&#8221; go we&#8217;ve added a counterclockwise from the horizon, in degrees, way to define an angle the text should be placed at &#8230; and &#8230;<\/li>\n<li>we&#8217;ve stopped closing off the text font size dropdown too early, allowing the user to mix it up with their annotations, and so &#8230;<br \/>\n<blockquote><p>\nWe now recommend, for those users pushing the boundaries of functionality, to gather all their &#8220;inhouse annotations&#8221; together before any &#8220;graphical canvas annotations&#8221; are thought about.\n<\/p><\/blockquote>\n<\/li>\n<\/ul>\n<p>Which begs the question &#8230;<\/p>\n<blockquote cite='https:\/\/www.facebook.com\/classicOzTV\/videos\/where-do-ya-get-it\/229525111056606\/'><p>\n<a target=_blank title=? href='https:\/\/www.facebook.com\/classicOzTV\/videos\/where-do-ya-get-it\/229525111056606\/'>Where do you get it?<\/a>\n<\/p><\/blockquote>\n<p>Well, here, via <font size=2>&#8230; dare we say it?! &#8230; <\/font> &#8230; via &#8230;<\/p>\n<blockquote><p>\nMantissa Madness Monday\n<\/p><\/blockquote>\n<p>Both colour and degree counterclockwise angle became <a href='pmmm'>&#8220;Mantissa Madness Monday&#8221;<\/a> tragics, a bit like moi, really?<\/p>\n<p>How did we express these two measures?<\/p>\n<ul>\n<li><font color=blue>colour<\/font> can be derived at the 404.php end via mantissae that are 9 or more long where a number of the form rrrgggbbb is numerical and passed across to 404.php in the y co-ordinate mantissa &#8230; while &#8230; kind of crazily &#8230;<\/li>\n<li><font color=purple>angle<\/font> can be a set of zeros in the x co-ordinate mantissa represented by zero characters to the length of the angle from 1 to 359 in front of a pre-existant font size (in px) usage, from last <a href='#gcicgvct'>&#8220;Mantissa Madness Monday&#8221;<\/a> <font size=1>(us getting away with this because no font size should start with a zero)<\/font><\/li>\n<\/ul>\n<p>Oh!   We have such fun around here?!  Below is PHP WordPress blog 404.php code &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n \/\/ text placement<br \/>\n       $black = imagecolorallocatealpha($im, 1, 1, 1, 0);<br \/>\n       $blackish = imagecolorallocatealpha($im, 127, 127, 127, 64);<br \/>\n       <font color=blue>$yis=$csv[1];<br \/>\n       $mantissae=explode('.', ('' . $csv[1]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         if (strlen($mantissae[1]) &gt;= 9) {<br \/>\n                $black = imagecolorallocatealpha($im, intval(substr($mantissae[1],0,3)), intval(substr(substr($mantissae[1],3),0,3)), intval(substr(substr($mantissae[1],6),0,3)), 0);<br \/>\n                $blackish = imagecolorallocatealpha($im, intval(substr($mantissae[1],0,3)), intval(substr(substr($mantissae[1],3),0,3)), intval(substr(substr($mantissae[1],6),0,3)), 64);<br \/>\n         }<br \/>\n         $yis=$mantissae[0];<br \/>\n       }<\/font><br \/>\n       <font color=purple>$za=0;<br \/>\n       $xis=$csv[0];<\/font><br \/>\n       $mantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         <font color=purple>if (substr($mantissae[1],0,1) == '0') {<br \/>\n            if (str_replace('0','',$mantissae[1]) != '') {<br \/>\n              while (substr($mantissae[1],0,1) == '0') {<br \/>\n                $za++;<br \/>\n                $mantiss=substr($mantissae[1],1);<br \/>\n                $mantissae[1]=$mantiss;<br \/>\n              }<br \/>\n            }<br \/>\n         }<\/font><br \/>\n         $tenpx=$mantissae[1];<br \/>\n         $xis=$mantissae[0];<br \/>\n       }<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  \/\/echo explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1];<br \/>\n  \/\/exit;<br \/>\n  imagettftext($im, $tenpx, <font color=purple>$za<\/font>, $xis, <font color=blue>$yis, $black,<\/font> realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; used by <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------------GETME\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-colour-tutorial\/'>Google Chart Image Chart Colour Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicrbt'>Previous relevant <a target=_blank title='Google Chart Image Chart Rubber Banding Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-rubber-banding-tutorial\/'>Google Chart Image Chart Rubber Banding Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Rubber Banding Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/mobile_fix.gif\" title=\"Google Chart Image Chart Rubber Banding Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Rubber Banding Tutorial<\/p><\/div>\n<p>The Javascript clientside idea of <a target=_blank title='Ruber banding explanation' href='https:\/\/www.javatpoint.com\/computer-graphics-elastic-or-rubber-band-techniques#:~:text=Rubber%20banding%20is%20a%20popular,ellipse%20on%20the%20computer%20screen.'>&#8220;Rubber Banding&#8221;<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/www.javatpoint.com\/computer-graphics-elastic-or-rubber-band-techniques#:~:text=Rubber%20banding%20is%20a%20popular,ellipse%20on%20the%20computer%20screen.'><p>\nRubber banding is a popular technique of drawing geometric primitives such as line, polylines, rectangle, circle and ellipse on the computer screen.\n<\/p><\/blockquote>\n<p> &#8230; really appeals to our &#8220;inner programmer&#8221; <font size=1>&#8230; damn<sup>!<\/sup> &#8230; come, thou, out into the open, reveal thyself<sup>!<\/sup> &#8230; the sunshine is wonderful down here, and we&#8217;ve done away with death duties<sup>!<\/sup> &#8230; mostly<sup>!<\/sup> &#8230;<\/font> but it is &#8230;<\/p>\n<ul>\n<li>only really a non-mobile prospect &#8230;<br \/>\n<code><br \/>\n  function checkforaction(rubberbanding,nx,ny) {<br \/>\n    var bcbit='background-color:rgba(127,127,127,0.5);';<br \/>\n    var zeroes='';<br \/>\n    var classbit='';<br \/>\n    var brbit='';<br \/>\n    var ourdist=0;<br \/>\n    var ioff=(rubberbanding == true ? 1 : 0);<br \/>\n    var mone=1;<br \/>\n    <br \/>\n    curno=eval('' + xneeds.length);<br \/>\n    if (eval(ioff + curno) &gt;= needtohave) {<br \/>\n      if (!rubberbanding) {<br \/>\n        document.getElementById('fauxdtext').innerHTML='';<br \/>\n      }<br \/>\n      if (curmode == 8) {<br \/>\n        zeroes='00000000';<br \/>\n        classbit=' class=\"crerect\" ';<br \/>\n      } else if (curmode == -5) {<br \/>\n      \/\/alert(1);<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n      if (rubberbanding) {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((nx - xneeds[0]) * (nx - xneeds[0]) + (ny - yneeds[0]) * (ny - yneeds[0])));<br \/>\n        ourdist-=10;<br \/>\n        bcbit='border:2px solid gray;background-color:transparent;';<br \/>\n      } else {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n      }<br \/>\n      \/\/alert(ourdist);<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        zeroes='00000';<br \/>\n        classbit=' class=\"ocirc\" ';<br \/>\n        \/\/alert('open circle');<br \/>\n      } else if (curmode == 6) {<br \/>\n      if (rubberbanding) {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((nx - xneeds[0]) * (nx - xneeds[0]) + (ny - yneeds[0]) * (ny - yneeds[0])));<br \/>\n        ourdist-=10;<br \/>\n      } else {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n      }<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        \/\/bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='000000';<br \/>\n        classbit=' class=\"ccirc\" ';<br \/>\n        \/\/alert('closed circle ' + bcbit);<br \/>\n      } else if (curmode == -4) {<br \/>\n        if (rubberbanding) {<br \/>\n        mone=0.90;<br \/>\n        bcbit='border:2px solid gray;background-color:transparent;';<br \/>\n        } else {<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        }<br \/>\n        zeroes='00';<br \/>\n        classbit=' class=\"orect\" ';<br \/>\n      } else if (curmode == 2) {<br \/>\n        zeroes='0';<br \/>\n        if (rubberbanding) {<br \/>\n        if (Math.min(xneeds[0],nx) == xneeds[0] && Math.min(yneeds[0],ny) == ny) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],nx) == nx && Math.min(yneeds[0],ny) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        } else {<br \/>\n        if (Math.min(xneeds[0],xneeds[1]) == xneeds[0] && Math.min(yneeds[0],yneeds[1]) == yneeds[1]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],xneeds[1]) == xneeds[1] && Math.min(yneeds[0],yneeds[1]) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        }<br \/>\n        bcbit='';<br \/>\n      } else if (curmode == 4) {<br \/>\n        if (rubberbanding) {<br \/>\n        mone=0.90;<br \/>\n        }<br \/>\n        zeroes='0000';<br \/>\n        classbit=' class=\"crect\" ';<br \/>\n      }<br \/>\n      if (!rubberbanding) {<br \/>\n      curno=-1;<br \/>\n      \/\/if (brbit != '') {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],nx) + 'px;top:' + Math.min(yneeds[0],ny) + 'px;width:' + Math.abs(xneeds[0] - nx) + 'px;height:' + Math.abs(yneeds[0] - ny) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/} else {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/}<br \/>\n      document.getElementById('aemail').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      document.getElementById('asms').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      aemailurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      asmsurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      arest+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      }<br \/>\n      if (brbit != '') {<br \/>\n      \/\/alert('brbit=' + brbit);<br \/>\n      \/\/xneeds[0]-=(xneeds[1] - xneeds[0]);<br \/>\n      \/\/yneeds[0]-=(yneeds[1] - yneeds[0]);<br \/>\n      \/\/alert('xneeds[0]=' + xneeds[0]);<br \/>\n      if (rubberbanding) {<br \/>\n      document.getElementById('fauxdtext').innerHTML='&lt;div' + classbit + ' style=\"' + brbit + 'z-index:-89;position:absolute;left:' + Math.floor(eval(Math.min(xneeds[0],xneeds[0]) - ourdist \/ 2)) + 'px;top:' + Math.floor(eval(Math.min(yneeds[0],yneeds[0]) - ourdist \/ 2)) + 'px;width:' + ourdist + 'px;height:' + ourdist + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      } else {<br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.floor(eval(Math.min(xneeds[0],xneeds[0]) - ourdist \/ 2)) + 'px;top:' + Math.floor(eval(Math.min(yneeds[0],yneeds[0]) - ourdist \/ 2)) + 'px;width:' + ourdist + 'px;height:' + ourdist + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      }<br \/>\n      } else {<br \/>\n      if (rubberbanding) {<br \/>\n      document.getElementById('fauxdtext').innerHTML='&lt;div' + classbit + ' style=\"' + brbit + 'z-index:-89;position:absolute;left:' + Math.min(xneeds[0],nx) + 'px;top:' + Math.min(yneeds[0],ny) + 'px;width:' + Math.max(Math.floor(eval(-30 + Math.abs(xneeds[0] - nx))),Math.floor(eval(mone * Math.abs(xneeds[0] - nx)))) + 'px;height:' + Math.max(Math.floor(eval(-30 + Math.abs(yneeds[0] - ny))),Math.floor(eval(mone * Math.abs(yneeds[0] - ny)))) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      } else {<br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      }<br \/>\n      }<br \/>\n      if (!rubberbanding) {<br \/>\n      textnum++;<br \/>\n      xneeds=[];<br \/>\n      yneeds=[];<br \/>\n      \/\/alert('arest=' + arest);<br \/>\n      document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20\" + cencodename + \"%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace((document.getElementById('myvenn').src + arest).split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input title=\\\"\\\" onclick=\\\"event.stopPropagation();\\\" id=ilp onblur=\\\"waitfortwo(0); lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.title=lasttext;  if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { this.value=''; } this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)); mvp.setAttribute('content','initial-scale=1'); document.getElementById('myvenn').scrollIntoView();\\\" placeholder='Enter text and later click place for it on \" + decodeURIComponent(cencodename) + \" to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\" + fszbit + \"&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;img id=line src='\/MarkItUp\/line.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red'; waitfortwo(2);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=rectangle src='\/MarkItUp\/rectangle.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=orectangle src='\/MarkItUp\/orectangle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=circle src='\/MarkItUp\/circlefill.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(6);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=ocircle src='\/MarkItUp\/circle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-5);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;button id=orerect onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(8);\\\" title=\\\"Zoom in on rectangle you define via two clicks\\\" style=display:none;&gt;&amp;#128270;&lt;\/button&gt;\" + lastbit + atend;<br \/>\n \/\/alert(1);<br \/>\n      if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('ilp').focus(); }<br \/>\n      document.getElementById('ilp').placeholder='Enter text and later click place for it on ' + decodeURIComponent(cencodename) + ' to left (line feed is ~~)';<br \/>\n      }<br \/>\n    } else if (curmode == 2 && !rubberbanding) {<br \/>\n      document.getElementById('line').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -4 && !rubberbanding) {<br \/>\n      document.getElementById('orectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 4 && !rubberbanding) {<br \/>\n      document.getElementById('rectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -5 && !rubberbanding) {<br \/>\n      document.getElementById('ocircle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 6 && !rubberbanding) {<br \/>\n      document.getElementById('circle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 8 && !rubberbanding) {<br \/>\n      document.getElementById('orerect').style.border='1px dashed yellow';<br \/>\n    }<br \/>\n  }<br \/>\n<br \/>\n         \/\/ Rubber banding<br \/>\n         document.body.addEventListener('mousemove', function(evt){<br \/>\n       evt = evt || window.event;<br \/>\n<br \/>\n       evt.preventDefault();<br \/>\n<br \/>\n    elemLeft = document.getElementById('myvenn').offsetLeft;<br \/>\n    elemTop = document.getElementById('myvenn').offsetTop;<br \/>\n    <br \/>\n    \/\/document.getElementById('myh3').innerHTML+=' ' + elemLeft + ':' + elemTop;<br \/>\n    \/\/document.getElementById('myh3').innerHTML+=' ' + document.body.scrollLeft + '.' + document.body.scrollTop;<br \/>\n<br \/>\n       if (evt.touches) {<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       \/\/alert('here');<br \/>\n       xx = evt.touches[0].pageX + document.body.scrollLeft - elemLeft;<br \/>\n       yy = evt.touches[0].pageY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       }<br \/>\n       } else {<br \/>\n       \/\/alert('Here');<br \/>\n       xx = evt.touches[0].clientX + document.body.scrollLeft - elemLeft;<br \/>\n       yy = evt.touches[0].clientY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       }<br \/>\n       }<br \/>\n       } else if (evt.clientX || ev.clientY) {<br \/>\n       \/\/alert('HERE');<br \/>\n        xx = evt.clientX + document.body.scrollLeft - elemLeft;<br \/>\n        yy = evt.clientY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n       }<br \/>\n       } else {<br \/>\n       \/\/alert('HEre');<br \/>\n        xx = evt.pageX + document.body.scrollLeft - elemLeft;<br \/>\n        yy = evt.pageY + document.body.scrollTop - elemTop;<br \/>\n       if (xx &gt;= 0 && xx &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && yy &gt;= 0 && yy &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno == 1 && (lastx != xx || lasty != yy)) {<br \/>\n       checkforaction(true,xx,yy);<br \/>\n       }<br \/>\n       \/\/lastx=xx;<br \/>\n       \/\/lasty=yy;<br \/>\n       }<br \/>\n       }<br \/>\n                });<br \/>\n<\/code><br \/>\n &#8230; at least for us <font size=1>(being as we do not want to clobber any pinch or spread gesture ideas, for the user)<\/font><\/li>\n<li>is only a really, &#8220;nice to have&#8221; functionality idea<\/li>\n<\/ul>\n<p>Even so, achieving even a 95% percent working &#8220;rubber band&#8221; is like &#8230; <font size=1>is like &#8230;<\/font><\/p>\n<blockquote><p>\nBarracking for Hairtie United &#8230;<br \/>\n<font size=1>You little beauty, Untied!<\/font>\n<\/p><\/blockquote>\n<p>And so, further to yesterday&#8217;s <a title='Google Chart Image Chart Circle Annotation Tutorial' href='#gciccat'>Google Chart Image Chart Circle Annotation Tutorial<\/a> we have this non-mobile &#8220;Rubber Banding&#8221; inhouse annotation functionality included in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------------GETME\">latest draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?reload=9&#038;v=iiATDMHU7gc'>But there&#8217;s more!<\/a>  Despite how long out of the day it takes to barrack for Hairtie United, there was a mobile matter we resolved.  A slide in today&#8217;s animated GIF presentation shows the issue.  On mobile platforms, with these inhouse annotations, it would immediately show a tiny annotation.  There panned out to be two event programming related issues we needed to fix related to this problem &#8230;<\/p>\n<ol>\n<li>change looking for a &#8220;touchstart&#8221; event, and instead look for a <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=m7AVvnWywvc'>&#8220;touchdown&#8221; event<\/a> for a document.body scope <font size=1>(else we might have restricted the &#8220;scope&#8221; to just document.getEleementById(&#8216;myvenn&#8217;) as another approach (and you should note our event.<a target=_blank title='Javascript event.stopPropagation() method information from W3schools' href='https:\/\/www.w3schools.com\/jsref\/event_stoppropagation.asp'>stopPropagation<\/a>() statements in lots of places as another research point for you))<\/font> because we are talking <font color=purple>&#8220;discrete click&#8221;<\/font> user behaviour we are targeting &#8230; as well as &#8230;<\/li>\n<li>start checking that the co-ordinates calculated fall into the range of the Google Charts Image Chart image dimensions &#8230; <font color=blue>doh!<\/font><\/li>\n<\/ol>\n<p><code><br \/>\n         document.body.addEventListener('<font color=purple>touchdown<\/font>', function(evt){<br \/>\n         \/\/alert(8);<br \/>\n       evt = evt || window.event;<br \/>\n<br \/>\n       evt.preventDefault();<br \/>\n<br \/>\n    elemLeft = document.getElementById('myvenn').offsetLeft;<br \/>\n    elemTop = document.getElementById('myvenn').offsetTop;<br \/>\n    <br \/>\n    \/\/document.getElementById('myh3').innerHTML+=' ' + elemLeft + ';' + elemTop;<br \/>\n<br \/>\n       if (evt.touches) {<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       \/\/alert('here');<br \/>\n       x = evt.touches[0].pageX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].pageY + document.body.scrollTop - elemTop;<br \/>\n       <font color=blue>if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<\/font><br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       <font color=blue>}<\/font><br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       } else {<br \/>\n       \/\/alert('Here');<br \/>\n       x = evt.touches[0].clientX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].clientY + document.body.scrollTop - elemTop;<br \/>\n       <font color=blue>if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<\/font><br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       }<br \/>\n              \/\/alert('x:' + x + ' and y:' + y);<br \/>\n       <font color=blue>}<\/font><br \/>\n       } else if (evt.clientX || ev.clientY) {<br \/>\n       \/\/alert('HERE');<br \/>\n        x = evt.clientX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.clientY + document.body.scrollTop - elemTop;<br \/>\n       <font color=blue>if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<\/font><br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       <font color=blue>}<\/font><br \/>\n       } else {<br \/>\n       \/\/alert('HEre');<br \/>\n        x = evt.pageX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.pageY + document.body.scrollTop - elemTop;<br \/>\n       if (x &gt;= 0 && x &lt;= eval(('' + document.getElementById('myvenn').width).replace('px','')) && y &gt;= 0 && y &lt;= eval(('' + document.getElementById('myvenn').height).replace('px',''))) {<br \/>\n       if (curno &gt;= 0 && (lastx != x || lasty != y)) {<br \/>\n       xneeds.push(x);<br \/>\n       yneeds.push(y);<br \/>\n       checkforaction(false,-1,-1);<br \/>\n       }<br \/>\n       lastx=x;<br \/>\n       lasty=y;<br \/>\n       <font color=blue>}<\/font><br \/>\n       }<br \/>\n                });<br \/>\n<\/code><\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Well &#8230; we didn&#8217;t?!  We happened to try the web application above on a tiny iPad and saw that HTML button elements with an innerHTML label containing a line feed ( ie. &lt;br&gt; ) only showed the top line, and, alas, for that button in question, the vital new information used to be on the second line.  Hence our fix &#8230;<\/p>\n<p><code><br \/>\n      \/\/document.getElementById('bshare').innerHTML='Repainting Top Left Image Periodically ... &lt;br&gt;Click here to Broadcast this session to other interested parties ...';<br \/>\n      document.getElementById('bshare').innerHTML='Click here to Broadcast this session to other interested parties ...&lt;br&gt;Repainting Top Left Image Periodically ...';<br \/>\n<\/code><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-rubber-banding-tutorial\/'>Google Chart Image Chart Rubber Banding Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gciccat'>Previous relevant <a target=_blank title='Google Chart Image Chart Circle Annotation Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-circle-annotation-tutorial\/'>Google Chart Image Chart Circle Annotation Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Circle Annotation Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_circle.jpg\" title=\"Google Chart Image Chart Circle Annotation Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Circle Annotation Tutorial<\/p><\/div>\n<p>Today, we add &#8230;<\/p>\n<ul>\n<li>open circle<\/li>\n<li>filled circle<\/li>\n<\/ul>\n<p> &#8230; annotation possibilities onto the &#8220;Broadcast Talk&#8221; work in yesterday&#8217;s <a title='Google Chart Image Chart Broadcast Talk Context Tutorial' href='#gcxicbtct'>Google Chart Image Chart Broadcast Talk Context Tutorial<\/a>.<\/p>\n<p>The CSS <font color=blue><a target=_blank title='CSS border-radius property information from W3schools' href='https:\/\/www.w3schools.com\/cssref\/css3_pr_border-radius.php'>border-radius<\/a> property<\/font> has come to the rescue of many a programmer, saving us from resorting to SVG to display circle or ellipses or arcs of various sorts &#8230;<\/p>\n<p><code><br \/>\n  function checkforaction() {<br \/>\n    var bcbit='background-color:rgba(127,127,127,0.5);';<br \/>\n    var zeroes='';<br \/>\n    var classbit='';<br \/>\n    <font color=blue>var brbit='';<br \/>\n    var ourdist=0;<\/font><br \/>\n    <br \/>\n    curno=eval('' + xneeds.length);<br \/>\n    if (curno &gt;= needtohave) {<br \/>\n      if (curmode == 8) {<br \/>\n        zeroes='00000000';<br \/>\n        classbit=' class=\"crerect\" ';<br \/>\n      } else <font color=blue>if (curmode == -5) {<br \/>\n      \/\/alert(1);<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n      \/\/alert(ourdist);<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='00000';<br \/>\n        classbit=' class=\"ocirc\" ';<br \/>\n        \/\/alert('open circle');<br \/>\n      } else if (curmode == 6) {<br \/>\n        ourdist=eval(2.0 * Math.sqrt((xneeds[1] - xneeds[0]) * (xneeds[1] - xneeds[0]) + (yneeds[1] - yneeds[0]) * (yneeds[1] - yneeds[0])));<br \/>\n        \/\/xneeds[1]=Math.floor('' + ourdist);<br \/>\n        \/\/yneeds[1]=xneeds[1];<br \/>\n        brbit='border-radius:' + Math.floor(eval(ourdist \/ 2)) + 'px;';<br \/>\n        \/\/bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='000000';<br \/>\n        classbit=' class=\"ccirc\" ';<br \/>\n        \/\/alert('closed circle ' + bcbit);<br \/>\n      }<\/font> else if (curmode == -4) {<br \/>\n        bcbit='border:2px solid rgba(127,127,127,0.5);';<br \/>\n        zeroes='00';<br \/>\n        classbit=' class=\"orect\" ';<br \/>\n      } else if (curmode == 2) {<br \/>\n        zeroes='0';<br \/>\n        if (Math.min(xneeds[0],xneeds[1]) == xneeds[0] && Math.min(yneeds[0],yneeds[1]) == yneeds[1]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else if (Math.min(xneeds[0],xneeds[1]) == xneeds[1] && Math.min(yneeds[0],yneeds[1]) == yneeds[0]) { \/\/ thanks to https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css<br \/>\n        classbit=' class=\"crossedtotl\" ';<br \/>\n        } else {<br \/>\n        classbit=' class=\"crossedtotr\" ';<br \/>\n        }<br \/>\n        bcbit='';<br \/>\n      } else if (curmode == 4) {<br \/>\n        zeroes='0000';<br \/>\n        classbit=' class=\"crect\" ';<br \/>\n      }<br \/>\n      curno=-1;<br \/>\n      \/\/if (brbit != '') {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/} else {<br \/>\n      \/\/document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      \/\/}<br \/>\n      document.getElementById('aemail').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      document.getElementById('asms').href+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      aemailurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      asmsurl+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      arest+='&text' + textnum + '=' + encodeURIComponent('' + xneeds[0] + '.' + zeroes + xneeds[1] + ',' + yneeds[0] + '.' + yneeds[1] + ',') + '';<br \/>\n      <font color=blue>if (brbit != '') {<br \/>\n      \/\/alert('brbit=' + brbit);<br \/>\n      \/\/xneeds[0]-=(xneeds[1] - xneeds[0]);<br \/>\n      \/\/yneeds[0]-=(yneeds[1] - yneeds[0]);<br \/>\n      \/\/alert('xneeds[0]=' + xneeds[0]);<br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.floor(eval(Math.min(xneeds[0],xneeds[0]) - ourdist \/ 2)) + 'px;top:' + Math.floor(eval(Math.min(yneeds[0],yneeds[0]) - ourdist \/ 2)) + 'px;width:' + ourdist + 'px;height:' + ourdist + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      } else {<\/font><br \/>\n      document.getElementById('dtext').innerHTML+='&lt;div' + classbit + ' style=\"' + brbit + 'position:absolute;left:' + Math.min(xneeds[0],xneeds[1]) + 'px;top:' + Math.min(yneeds[0],yneeds[1]) + 'px;width:' + Math.abs(xneeds[0] - xneeds[1]) + 'px;height:' + Math.abs(yneeds[0] - yneeds[1]) + 'px;z-index:98;' + bcbit + '\"&gt;&lt;\/div&gt;';<br \/>\n      <font color=blue>}<\/font><br \/>\n      textnum++;<br \/>\n      xneeds=[];<br \/>\n      yneeds=[];<br \/>\n      \/\/alert('arest=' + arest);<br \/>\n      document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20\" + cencodename + \"%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace((document.getElementById('myvenn').src + arest).split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input title=\\\"\\\" onclick=\\\"event.stopPropagation();\\\" id=ilp onblur=\\\"waitfortwo(0); lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.title=lasttext;  if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { this.value=''; } this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)); mvp.setAttribute('content','initial-scale=1'); document.getElementById('myvenn').scrollIntoView();\\\" placeholder='Enter text and later click place for it on \" + decodeURIComponent(cencodename) + \" to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\" + fszbit + \"&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;img id=line src='\/MarkItUp\/line.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red'; waitfortwo(2);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=rectangle src='\/MarkItUp\/rectangle.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=orectangle src='\/MarkItUp\/orectangle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-4);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=circle src='\/MarkItUp\/circlefill.png' onclick=\\\"event.stopPropagation(); this.style.border='1px dotted red';  waitfortwo(6);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;img id=ocircle src='\/MarkItUp\/circle.png' onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(-5);\\\"&gt;&lt;\/img&gt;&nbsp;&nbsp;&lt;button id=orerect onclick=\\\"event.stopPropagation();  this.style.border='1px dotted red';  waitfortwo(8);\\\" title=\\\"Zoom in on rectangle you define via two clicks\\\" style=display:none;&gt;&amp;#128270;&lt;\/button&gt;\" + lastbit + atend;<br \/>\n \/\/alert(1);<br \/>\n      if (!navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) { document.getElementById('ilp').focus(); }<br \/>\n      document.getElementById('ilp').placeholder='Enter text and later click place for it on ' + decodeURIComponent(cencodename) + ' to left (line feed is ~~)';<br \/>\n    } else if (curmode == 2) {<br \/>\n      document.getElementById('line').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -4) {<br \/>\n      document.getElementById('orectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 4) {<br \/>\n      document.getElementById('rectangle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == -5) {<br \/>\n      document.getElementById('ocircle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 6) {<br \/>\n      document.getElementById('circle').style.border='1px dashed yellow';<br \/>\n    } else if (curmode == 8) {<br \/>\n      document.getElementById('orerect').style.border='1px dashed yellow';<br \/>\n    }<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; to team up with WordPress blog 404.php changes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n      if (strlen($zeroesbit) == 6) { \/\/ filled in circle<br \/>\n         if (sizeof($csv) == 3) {<br \/>\n           array_push($csv, $csv[2]);<br \/>\n         } else if (sizeof($csv) >= 4) {<br \/>\n           $dist=(2.0 * sqrt(($csv[0] - $csv[2]) * ($csv[0] - $csv[2]) + ($csv[1] - $csv[3]) * ($csv[1] - $csv[3])));<br \/>\n           $csv[2]=$dist;<br \/>\n           $csv[3]=$dist;<br \/>\n         }<br \/>\n         imagefilledellipse($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish);<br \/>\n       } else if (strlen($zeroesbit) == 5) { \/\/ circle<br \/>\n         if (sizeof($csv) == 3) {<br \/>\n           array_push($csv, $csv[2]);<br \/>\n         } else if (sizeof($csv) >= 4) {<br \/>\n           $dist=(2.0 * sqrt(($csv[0] - $csv[2]) * ($csv[0] - $csv[2]) + ($csv[1] - $csv[3]) * ($csv[1] - $csv[3])));<br \/>\n           $csv[2]=$dist;<br \/>\n           $csv[3]=$dist;<br \/>\n         }<br \/>\n         imageellipse($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; with <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--------GETME\">ninth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-google-chart-image-chart-broadcast-talk-context-tutorial\/'>New Google Chart Image Chart Circle Annotation Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcxicbtct'>Previous relevant <a target=_blank title='Google Chart Image Chart Broadcast Talk Context Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-context-tutorial\/'>Google Chart Image Chart Broadcast Talk Context Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Broadcast Talk Context Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_context.jpg\" title=\"Google Chart Image Chart Broadcast Talk Context Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Broadcast Talk Context Tutorial<\/p><\/div>\n<p>The progress, today, along the same lines as yesterday&#8217;s <a title='Google Chart Image Chart Broadcast Talk Tutorial' href='#gcicbtt'>Google Chart Image Chart Broadcast Talk Tutorial<\/a>&#8216;s introduction of a &#8220;Broadcast Talk&#8221; functionality, was to &#8230;<\/p>\n<ul>\n<li>improve &#8220;Broadcast Talk&#8221; context, by adding onto yesterday&#8217;s &#8230;<br \/>\n<blockquote><p>\npresented as an update image still presented and updated periodically\n<\/p><\/blockquote>\n<p> &#8230; only display option, with, as of today &#8230;<\/li>\n<li>a presenter&#8217;s first snapshotted image retained for user display (in case they arrive late to the lesson <font size=1>&#8230; tutt tutt<\/font>) &#8230; and &#8230;<\/li>\n<li><a target=_blank title='ImageMagick command line' href='http:\/\/www.imagemagick.org\/script\/command-line-tools.php'>ImageMagick<\/a> created <font color=blue>animated GIF<\/font> with slides for just this first image and the most recent image, updated periodically, in bottom right cell of user display &#8230;<br \/>\n&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['canvcont']) && isset($_POST['uniquifier']) && strpos(('?' . $_SERVER['QUERY_STRING']), 'cht=') === false) {<br \/>\n     if (isset($_POST['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_POST['uniquifier']));<br \/>\n     }<br \/>\n     if ($uniquifier == '') {<br \/>\n       $uniquifier='_' . rand(0,78654356);<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       <font color=blue>exec(\"\/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 20 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\");<\/font><br \/>\n       echo \"&lt;html&gt;&lt;body onload=\\\"if (parent.document.getElementById('uniquifier')) {  if (parent.document.getElementById('uniquifier').value == '') { parent.document.getElementById('uniquifier').value='\" . $uniquifier . \"';  }  }\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     } else {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       <font color=blue>exec(\"rm -f  \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif ; \/usr\/local\/cpanel\/3rdparty\/bin\/convert -delay 200 -loop 0 \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation_\" . $uniquifier . \".png \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\" . \" \" . $_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".gif\"); <\/font><br \/>\n     }<br \/>\n     exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<br \/>\n &#8230; and &#8230;<\/li>\n<li>images saved as changes are detected gathered, as ever smaller thumbnails, in the top right of four table cells of the user display &#8230;<br \/>\n<code><br \/>\n  var iijk=0, uniquif=''; snapshots=[], elem=null, elemcontext=null, oimg=null, checkforsquare=2;<br \/>\n  <br \/>\n  function canvinit() {<br \/>\n    var kkii=0, wpx=0, hpx=0;<br \/>\n    var tdr=document.getElementById('tdtr').getBoundingClientRect();<br \/>\n    wpx=eval('' + tdr.width);<br \/>\n    hpx=eval('' + tdr.height);<br \/>\n    elem=document.getElementById('agcanvas');<br \/>\n    elemcontext=elem.getContext('2d');<br \/>\n    elem.width=elem.width;<br \/>\n    elemcontext.drawImage(document.getElementById('talkimg'),0,0);<br \/>\n    if (iijk == 0 || ('' + document.getElementById('tdtr').style.backgroundImage).indexOf('rand=0') != -1) {<br \/>\n      \/\/alert('89 ' + elem.toDataURL().length);<br \/>\n      \/\/snapshots.push(elem.toDataURL());<br \/>\n      iijk=eval(-1 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n      document.getElementById('tdtr').style.backgroundImage=('' + document.getElementById('tdtr').style.backgroundImage).replace(('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk], '' + 'url(' + elem.toDataURL() + '),' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk]).replace('rand=0', 'rand=x');<br \/>\n      iijk=eval(0 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n      setInterval(canvinit, 9000);<br \/>\n    } else {<br \/>\n      elem.width=elem.width;<br \/>\n      elemcontext.drawImage(document.getElementById('talkimg'),0,0);<br \/>\n      if (document.body.innerHTML.indexOf(elem.toDataURL()) == -1) {<br \/>\n        \/\/snapshots.push(elem.toDataURL());<br \/>\n        iijk=eval(-1 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n        document.getElementById('tdtr').style.backgroundImage=('' + document.getElementById('tdtr').style.backgroundImage).replace(('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk], '' + 'url(' + elem.toDataURL() + '),' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),')[iijk]).replace('rand=x','rand=x' + Math.floor(Math.random() * 9));<br \/>\n        iijk=eval(0 + eval('' + ('' + document.getElementById('tdtr').style.backgroundImage).split('),').length));<br \/>\n      }<br \/>\n    }<br \/>\n    var bpx='background-position:;';<br \/>\n    var bbpx='background-position:;';<br \/>\n    var bsx='background-size:;';<br \/>\n    var brx='background-repeat:;';<br \/>\n    var xstart=0;<br \/>\n    var ystart=0;<br \/>\n    var xxstart=eval('' + tdr.left);<br \/>\n    var yystart=eval('' + tdr.top);<br \/>\n    if (iijk &gt; eval(checkforsquare * checkforsquare)) { checkforsquare++; }<br \/>\n    for (kkii=1; kkii&lt;=iijk; kkii++) {<br \/>\n      if (bsx.indexOf(':;') != -1) {<br \/>\n      bsx=bsx.replace(':;', ':' + Math.round(eval(wpx \/ checkforsquare)) + 'px ' + Math.round(eval(hpx \/checkforsquare)) + 'px;');<br \/>\n      brx=brx.replace(':;', ':no-repeat;');<br \/>\n      bpx=bpx.replace(':;', ':' + Math.round(xstart) + 'px ' + Math.round(ystart) + 'px;');<br \/>\n      bbpx=bbpx.replace(':;', ':' + Math.round(xxstart) + 'px ' + Math.round(yystart) + 'px;');<br \/>\n      } else {<br \/>\n      bsx=bsx.replace(';', ',' + Math.round(eval(wpx \/ checkforsquare)) + 'px ' + Math.round(eval(hpx \/checkforsquare)) + 'px;');<br \/>\n      brx=brx.replace(';', ',no-repeat;');<br \/>\n      bpx=bpx.replace(';', ',' + Math.round(xstart) + 'px ' + Math.round(ystart) + 'px;');<br \/>\n      bbpx=bbpx.replace(';', ',' + Math.round(xxstart) + 'px ' + Math.round(yystart) + 'px;');<br \/>\n      }<br \/>\n      if (eval(kkii % checkforsquare) == 0) {<br \/>\n        xstart=0;<br \/>\n        xxstart=eval('' + tdr.left);<br \/>\n        ystart+=eval(hpx \/ checkforsquare);<br \/>\n        yystart+=eval(hpx \/ checkforsquare);<br \/>\n      } else {<br \/>\n        xstart+=eval(wpx \/ checkforsquare);<br \/>\n        xxstart+=eval(wpx \/ checkforsquare);<br \/>\n      }<br \/>\n    }<br \/>\n    \/\/alert('iijk=' + iijk + ' ' + bbpx + ' ' + bpx + ' ' + bsx + ' ' + brx);<br \/>\n    document.getElementById('tdtr').style.backgroundRepeat=brx.split(':')[1];<br \/>\n    document.getElementById('tdtr').style.backgroundSize=bsx.split(':')[1];<br \/>\n    document.getElementById('tdtr').style.backgroundPosition=bpx.split(':')[1];<br \/>\n    \/\/document.body.style.backgroundImage=('' + document.getElementById('tdtr').style.backgroundImage);<br \/>\n    \/\/document.body.style.backgroundRepeat=brx.split(':')[1];<br \/>\n    \/\/document.body.style.backgroundSize=bsx.split(':')[1];<br \/>\n    <br \/>\n    document.body.style.backgroundPosition=bbpx.split(':')[1];<br \/>\n    var kdss=bsx.split(':')[1].replace(\/\\;\/g,'').split(',');<br \/>\n    var idss=bbpx.split(':')[1].replace(\/\\;\/g,'').split(',');<br \/>\n    var jdss=(('' + document.getElementById('tdtr').style.backgroundImage) + ',').replace(';,',',').replace(\/url\\(\/g,'').replace(\/URL\\(\/g,'').replace(\/\\&quot\\;\/g,'').replace(\/\\\"\/g,'').split('),');<br \/>\n    document.getElementById('idiv').innerHTML='';<br \/>\n    var istuff='', laststuff='';<br \/>\n    for (var iop=0; iop&lt;idss.length; iop++) {<br \/>\n      \/\/while (istuff == laststuff) {<br \/>\n      if (('' + jdss[iop]) != 'undefined' && ('' + jdss[iop]).trim() != '') {<br \/>\n      if (jdss[iop].trim().indexOf('iVBOR') != -1) {<br \/>\n      istuff+='&lt;img style=\"position:absolute;width:' + kdss[iop].split(' ')[0] + ';height:' + kdss[iop].split(' ')[1] + ';left:' + idss[iop].split(' ')[0] + ';top:' + idss[iop].split(' ')[1] + ';\" src=\"data:image\/png;base64,iVBOR' + jdss[iop].trim().split('iVBOR')[1] + '\"&gt;&lt;\/img&gt;';<br \/>\n      } else if (jdss[iop].trim() .indexOf('\/\/') != -1) {<br \/>\n      istuff+='&lt;img style=\"position:absolute;width:' + kdss[iop].split(' ')[0] + ';height:' + kdss[iop].split(' ')[1] + ';left:' + idss[iop].split(' ')[0] + ';top:' + idss[iop].split(' ')[1] + ';\" src=\"' + jdss[iop].trim() + '\"&gt;&lt;\/img&gt;';<br \/>\n      }<br \/>\n      \/\/}<br \/>\n      laststuff=istuff;<br \/>\n      }<br \/>\n    }<br \/>\n    document.getElementById('idiv').innerHTML=istuff;<br \/>\n  }<br \/>\n<\/code>\n<\/li>\n<\/ul>\n<p>We hope you try new functionality in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-------GETME\">eighth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-context-tutorial\/'>Google Chart Image Chart Broadcast Talk Context Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicbtt'>Previous relevant <a target=_blank title='Google Chart Image Chart Broadcast Talk Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-tutorial\/'>Google Chart Image Chart Broadcast Talk Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Broadcast Talk Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_broadcast.gif\" title=\"Google Chart Image Chart Broadcast Talk Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Broadcast Talk Tutorial<\/p><\/div>\n<p>Onto yesterday&#8217;s <a title='Google Chart Image Chart Statistical Charts Tutorial' href='#gcicsct'>Google Chart Image Chart Statistical Charts Tutorial<\/a> progress we want to offer &#8230;<\/p>\n<ul>\n<li>once a user has that &#8220;More Annotation&#8221; annotating happening &#8230; offer the chance to &#8230;<\/li>\n<li>Broadcast &#8230; their work as it happens, dynamically &#8230; <\/li>\n<li>to an emailee list audience<\/li>\n<\/ul>\n<p> &#8230; and we&#8217;re calling this &#8230;<\/p>\n<blockquote><p>\nBroadcast Talk\n<\/p><\/blockquote>\n<p> &#8230; even though it is only visual by nature, presented as an update image still presented and updated periodically.  Go figure?!  We&#8217;re blaming that <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw'>supper time<\/a> two back.  We&#8217;re not sure?!<\/p>\n<p>Anyway, we hope you try out the new arrangements in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html------GETME\">seventh draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart or Map Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>, and helped out by a WordPress blog <font size=1>good ol&#8217;<\/font> TwentyTen theme 404.php which now includes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n  if (isset($_POST['canvcont']) && isset($_POST['uniquifier']) && strpos(('?' . $_SERVER['QUERY_STRING']), 'cht=') === false) {<br \/>\n     if (isset($_POST['uniquifier'])) {<br \/>\n       $uniquifier=str_replace('+',' ',urldecode($_POST['uniquifier']));<br \/>\n     }<br \/>\n     if ($uniquifier == '') {<br \/>\n       $uniquifier='_' . rand(0,78654356);<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n       echo \"&lt;html&gt;&lt;body onload=\\\"if (parent.document.getElementById('uniquifier')) {  if (parent.document.getElementById('uniquifier').value == '') { parent.document.getElementById('uniquifier').value='\" . $uniquifier . \"';  }  }\\\"&gt;&lt;\/body&gt;&lt;\/html&gt;\";<br \/>\n     } else {<br \/>\n       file_put_contents($_SERVER['DOCUMENT_ROOT'] . DIRECTORY_SEPARATOR . \"presentation\" . $uniquifier . \".png\", base64_decode( explode('base64,', str_replace(' ','+',urldecode($_POST['canvcont'])))[1]));<br \/>\n     }<br \/>\n     exit;<br \/>\n  }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; featuring our first use of this 404.php in response to a method=POST form call.  Verrrrrryyyy interesting!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-broadcast-talk-tutorial\/'>Google Chart Image Chart Broadcast Talk Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicsct'>Previous relevant <a target=_blank title='Google Chart Image Chart Statistical Charts Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-statistical-charts-tutorial\/'>Google Chart Image Chart Statistical Charts Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Statistical Charts Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_statistical_charts.jpg\" title=\"Google Chart Image Chart Statistical Charts Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Statistical Charts Tutorial<\/p><\/div>\n<p>Further to yesterday&#8217;s <a title='Google Chart Image Chart Pie Chart Tutorial' href='#gcicpct'>Google Chart Image Chart Pie Chart Tutorial<\/a>, today, we embark on our first ventures into composite charts, along what we like to think of as &#8220;statistical lines&#8221;, regarding interfacing to <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> &#8230;<\/p>\n<ul>\n<li><a target=_blank title='Google Chart Image Chart Line Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/line_charts'>Line Chart<\/a> &#8230; with its three display options &#8230;\n<ol>\n<li>Even<\/li>\n<li>Sparkline<\/li>\n<li>Just XY<\/li>\n<\/ol>\n<\/li>\n<li><a target=_blank title='Google Chart Image Chart Bar Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/bar_charts'>Bar Chart<\/a> &#8230; with its three display options &#8230;\n<ol>\n<li>Grouped<\/li>\n<li>Stacked<\/li>\n<li>Overlapped<\/li>\n<\/ol>\n<\/li>\n<li><a target=_blank title='Google Chart Image Chart Candlestick Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/compound_charts#candlestick_charts'>Candlestick Chart<\/a><\/li>\n<\/ul>\n<p> &#8230; the latter being like a &#8220;parasite&#8221; display idea off the more conventional Statistical Graph favourites, the Line Chart and Bar Chart, where you have a relationship between a numerical concept (eg. sales) and another type of concept (eg. month of the year), and you want to present the data in a graphical form.<\/p>\n<p>Again, we haven&#8217;t stopped our &#8220;retweaking&#8221;. We might &#8220;retweak&#8221; <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw'>in the morning<\/a> or we might &#8220;retweak&#8221; <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw'>over a coffee break<\/a> or we might &#8220;retweak&#8221; <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw'>at supper time<\/a>, but the end result is, well, you&#8217;re reading it now!<\/p>\n<p><code><br \/>\n  var pretherest='';<br \/>\n  var newtherest='';<br \/>\n  var tmod='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  if ((cht + '  ').substring(0,2) == 'bv' && cht != 'bv') { pretherest=cht.substring(2); if (1 == 1) { cht='bv'; }   }<br \/>\n  if ((cht + '  ').substring(0,1) == 'l' && cht != 'l') { pretherest=cht.substring(1); if (1 == 1) { cht='l'; }   }<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie Chart' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? 'Bar Chart' : (ctype.substring(0,1) == 'l' ? 'Line Chart' : ''))))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? 'Bar%20Chart' : (ctype.substring(0,1) == 'l' ? 'Line%20Chart' : ''))))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '&chd=t:' : (ctype.substring(0,1) == 'l' ? '&chd=t:' : ''))))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chd=' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '&chd=' : (ctype.substring(0,1) == 'l' ? '&chd=' : ''))))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 't:' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? 't:' : (ctype.substring(0,1) == 'l' ? 't:' : ''))))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '&chdl=' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '&chbh=' : (ctype.substring(0,1) == 'l' ? '&chbh=' : ''))))));<br \/>\n<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' :<br \/>\n  (ctype.substring(0,1) == 'p' ? '1,2,3,4' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '5,5,5|10,10,10|15,15,15' : (ctype.substring(0,1) == 'l' ? '5,45,5|10,60,10|15,85,15' : ''))))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'January|February|March|April' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '15,4,15' : (ctype.substring(0,1) == 'l' ? '15,4,15' : ''))))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' :<br \/>\n  (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? '4D89F9,C6D9FD,C6FDD9&chxt=x,y' : (ctype.substring(0,1) == 'l' ? '3D89F9.B6D9FD,B6FDD9&chxt=x,y' : ''))))));<br \/>\n<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt :<br \/>\n  (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? chdt + prenchtt + chdl + preachtt : (ctype.substring(0,1) == 'l' ? chdt + prenchtt + chdl + preachtt : ''))))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? \"Enter g for Group or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" : \"\"))))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" :<br \/>\n  (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? \"Enter g for Grouped or s for Stacked or o for Overlapped Bar Chart look then a space and then enter delimited values string for Bar Chart.  Here is a Candlestick and Bar Chart idea eg. g 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" :<br \/>\n  (ctype.substring(0,1) == 'l' ? \"Enter c for Even or s for Sparklines or xy for Just XY Line Chart look then a space and then enter delimited values string for Line Chart.  Here is a Candlestick and Line Chart idea eg. c 1:20,10,15,25,17,30|0,5,10,7,12,6|35,25,45,47,24,46|15,40,30,27,39,54|70,55,63,59,80,6  Prefix just the delimited string you enter by 1: to additionally display Candlestick Charts or by 0: to only display Candlestick Chart\" : \"\"))))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false :<br \/>\n  (ctype.substring(0,1) == 'p' ? true :<br \/>\n  ((ctype + ' ').substring(0,2) == 'bv' ? true : (ctype.substring(0,1) == 'l' ? true : false))))));<br \/>\n  var twopb=(ce.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n  var beforeanswer=(ctype.substring(0,1) == 'l' ? 'c ' : ((ctype + ' ').substring(0,2) == 'bv' ? 'g ' : ''));<br \/>\n  <br \/>\n  if ((document.URL.toLowerCase().indexOf('chd=t%3a') == -1 && document.URL.toLowerCase().indexOf('chd=t:') == -1) && document.URL.toLowerCase().indexOf('chd=t') != -1  && document.URL.toLowerCase().indexOf('%3a') != -1) {<br \/>\n        tmod=document.URL.toLowerCase().split('chd=t')[1].split('%3')[0];<br \/>\n        \/\/tc='t' + tmod + ':';<br \/>\n        \/\/chdt=chdt.replace('t:', 't' + tmod + ':');<br \/>\n        \/\/answer=answer.trim().replace(tmod + ':','');<br \/>\n        \/\/therest+='&chm=F,,1,1:4,20';<br \/>\n  } else if ((document.URL.toLowerCase().indexOf('chd=t%3a') == -1 && document.URL.toLowerCase().indexOf('chd=t:') == -1) && document.URL.toLowerCase().indexOf('chd=t') != -1  && document.URL.toLowerCase().substring(8).indexOf(':') != -1) {<br \/>\n        tmod=document.URL.toLowerCase().split('chd=t')[1].split(':')[0];<br \/>\n        \/\/tc='t' + tmod + ':';<br \/>\n        \/\/chdt=chdt.replace('t:', 't' + tmod + ':');<br \/>\n        \/\/answer=answer.trim().replace(tmod + ':','');<br \/>\n        \/\/therest+='&chm=F,,1,1:4,20';<br \/>\n  }<br \/>\n<br \/>\n  var atend=\"&lt;canvas id=sharecanvas style=display:none;&gt;&lt;\/canvas&gt;&lt;div style=display:none;&gt;&lt;label for='shareurl'&gt;&lt;input type=button onclick='downloadmaybe(); shareurl();' id='sbut' value='Share URL Link'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input onblur=changeu(this.value); title='Suffix by hashtag 1 is text and hashtag 2 is title' style='width:45%;' type=url value='' placeholder='https:\/\/www.rjmprogramming.com.au\/ITblog\/#RJM Programming Blog#IT Blog' id=shareurl ondblclick='this.value=trythis(this.placeholder);'&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;span&gt; ... and\/or ... &lt;\/span&gt;&lt;br&gt;&lt;br&gt;&lt;label for='files'&gt;&lt;input type=button onclick=document.getElementById('share').click(); value='Share media or document files'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input id='files' type='file' accept='image\/*,video\/*,audio\/*,application\/*,text\/*' multiple&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&lt;button id='share' type='button'&gt;Share your media or documents or link!&lt;\/button&gt;&lt;output id='output'&gt;&lt;\/output&gt;&lt;scr\" + \"ipt type='text\/javascript' src='\/web_share_api_test.js?canv\" + \"asshare=as_necessary9867654' defer&gt;&lt;\/scr\" + \"ipt&gt;\";<br \/>\n  atend='';<br \/>\n <br \/>\n  var vals=[], annowin=null;<br \/>\n <br \/> <br \/>\n  var lastbit=\"&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;button title='Other complex canvas annotation functionalities (forgoes the simpler ones above) ...' id=annobut onclick=\\\"document.getElementById('tdleft').style.verticalAlign='top'; setTimeout(prerepaint, 12000); if (arest.length != 0) { alert('arest=' + arest); if (document.getElementById('myvenn').src.indexOf(arest) == -1) { pdivhide(); document.getElementById('myvenn').src=document.getElementById('myvenn').src.split(arest.substring(0,5))[0] + arest;  document.getElementById('tdleft').style.verticalAlign='top'; } } annowin=window.open('\/HTMLCSS\/user_of_signature_signature.htm?elemode=img','_blank','top=420,left=620,width=900,height=420');     \\\" style=\\\"background-color:yellow;\\\"&gt;More Annotations&lt;\/button&gt;&nbsp;&nbsp;&lt;button id=bshare onclick=repaint(); style=display:none;&gt;Repaint &lt;font size=1&gt;(but lose sharing emojis above)&lt;\/font&gt;&lt;\/button&gt;&lt;br&gt;&lt;div id=divcanvas style=display:none;&gt;&lt;canvas id=bottomcanvas&gt;&lt;\/canvas&gt;&lt;\/div&gt;\";<br \/>\n  var fszbit='&nbsp;&nbsp;&lt;span id=spanfsz&gt;&lt;select id=fsz onchange=\"fsz=this.value;\"&gt;&lt;option value=\".10\"&gt;10px&lt;\/option&gt;&lt;option value=\".6\"&gt;6px&lt;\/option&gt;&lt;option value=\".8\"&gt;8px&lt;\/option&gt;&lt;option value=\".9\"&gt;9px&lt;\/option&gt;&lt;option value=\".11\"&gt;11px&lt;\/option&gt;&lt;option value=\".12\"&gt;12px&lt;\/option&gt;&lt;option value=\".14\"&gt;14px&lt;\/option&gt;&lt;option value=\".16\"&gt;16px&lt;\/option&gt;&lt;option value=\".18\"&gt;18px&lt;\/option&gt;&lt;option value=\".20\"&gt;20px&lt;\/option&gt;&lt;option value=\".24\"&gt;24px&lt;\/option&gt;&lt;option value=\".30\"&gt;30px&lt;\/option&gt;&lt;option value=\".36\"&gt;36px&lt;\/option&gt;&lt;option value=\".40\"&gt;40px&lt;\/option&gt;&lt;option value=\".48\"&gt;48px&lt;\/option&gt;&lt;option value=\".50\"&gt;50px&lt;\/option&gt;&lt;option value=\".64\"&gt;64px&lt;\/option&gt;&lt;\/select&gt;&lt;\/span&gt;';<br \/>\n  var origemailurl='mailto:?subject=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...&body=';<br \/>\n  var origsmsurl='sms:&body=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...';<br \/>\n  var smsee='';<br \/>\n  var chd=location.search.split(chdeq)[1] ? (tc + dectypodeURIComponent(location.search.split(chdeq)[1].split('&')[0])).replace('t:t:', 't:').replace(\/^t\\:$\/g, '') : \"\";<br \/>\n  var therest=location.search.split(chdeq)[1] ? (pretherest + document.URL.split(document.URL.split('#')[0].split(chdeq)[1].split('&')[0])[1].split('#')[0]) : \"\";<br \/>\n  newtherest=((ctype + ' ').substring(0,2) == 'bv' ? therest : '');<br \/>\n<\/code><\/p>\n<p>And yes, you can, and we did, put line feeds into those ternery statements to help with their readability as we add complexity to the parameterization, as we go along, in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-----GETME\">sixth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart or Line Chart or Bar Chart or Candlestick Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-statistical-charts-tutorial\/'>Google Chart Image Chart Statistical Charts Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicpct'>Previous relevant <a target=_blank title='Google Chart Image Chart Pie Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-pie-chart-tutorial\/'>Google Chart Image Chart Pie Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Pie Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/google_chart_image_chart_annotation_phase_two.gif\" title=\"Google Chart Image Chart Pie Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Pie Chart Tutorial<\/p><\/div>\n<p>As we intimated in yesterday&#8217;s <a title='Google Chart Image Chart GraphViz Chart Tutorial' href='#gcicgvct'>Google Chart Image Chart GraphViz Chart Tutorial<\/a> &#8230;<\/p>\n<blockquote cite='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-graphviz-chart-tutorial\/'><p>\nstart with an at least two part &#8220;inhouse phase&#8221; of additional &#8220;extra to text&#8221; annotation functionality possibilities &#8230;\n<\/p><\/blockquote>\n<p> &#8230; we would return!  And so, here thou lingers.  It&#8217;s <font size=5>&#8220;part two&#8221; day<\/font>, even bigger than &#8220;Ben Hur&#8221; <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=B1E7h3SeMDk'>in certain outback towns we&#8217;re a little bit shy to divulge<\/a> until we get to know our readers that little bit better.<\/p>\n<p>Yes, we are dovetailing with work we&#8217;ve done in the past using the excellent &#8230;<\/p>\n<ul>\n<li><a target=_blank title='HTML Canvas element information from w3schools' href='http:\/\/www.w3schools.com\/tags\/ref_canvas.asp'>canvas<\/a> &#8230; element introduced with HTML5 &#8230; whereby &#8230;<\/li>\n<li>annotations like &#8230;\n<ol>\n<li>scribble &#8230; as the default, and various other &#8230;<\/li>\n<li>discrete click shapes &#8230; and &#8230;<\/li>\n<li>text &#8230; including emojis &#8230; and &#8230;<\/li>\n<li>image<\/li>\n<\/ol>\n<p> &#8230; annotating modus operandi\n<\/li>\n<\/ul>\n<p> &#8230; can be part of the arrangements.  It works that the <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/user_of_signature_signature.htm\">Annotation Helper<\/a> is opened &#8230;<\/p>\n<ul>\n<li>in a new <span title=\"Via window.opener\" style=cursor:pointer;>&#8220;known about&#8221;<\/span> popup window &#8230; looking out for &#8230;<\/li>\n<li>parent based &#8220;img&#8221; element (in the modus operandi we use, calling it, regarding the parent top left image) &#8230; so as to be able to &#8230;<\/li>\n<li>populate its canvas element with a clone of that calling &#8220;img&#8221; graphical content &#8230; but add into the mix &#8230;<\/li>\n<li>menu driven annotation functionality which can change that canvas look and underlying data &#8230; and &#8230;<\/li>\n<li>the caller can keep track of this and arrange, or not, for these changes to be reflected back at its top left &#8220;img&#8221; element &#8230; the catch being &#8230;<\/li>\n<li>the &#8220;within range of GET argument&#8221; limits are ruined by this introduction of graphical data, and so in agreeing to this, a user forgoes those simpler sharing and annotating functionalities of yesterday&#8217;s (and before) work &#8230; though your normal image sharing capabilities via the web browser remain in the caller and the called<\/li>\n<\/ul>\n<p>As well, today, we are introducing new <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> <a target=_blank title='Google Chart Image Chart Pie Chart info' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/pie_charts'>Pie Chart<\/a> interfacing, and because this chart type can have the three &#8230;<\/p>\n<ul>\n<li>Normal<\/li>\n<li>3D<\/li>\n<li>Concentric<\/li>\n<\/ul>\n<p> &#8230; guises, there was some work to keep us off <a target=_blank title=? href='https:\/\/www.bbc.com\/travel\/article\/20220613-the-outback-way-is-this-the-worlds-emptiest-road'>this street<\/a> <font size=1>(okay &#8230; so we <i>divulged<\/i> &#8230; <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s'>again<\/a>)<\/font> &#8230;<\/p>\n<p><code><br \/>\n  var pretherest='';<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  if ((cht + ' ').substring(0,1) == 'p' && cht != 'p') { pretherest=cht.substring(1); }<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : (ctype == 'gv' ? 'GraphViz Chart' : (ctype.substring(0,1) == 'p' ? 'Pie Chart' : ''))));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : (ctype == 'gv' ? 'GraphViz%20Chart' : (ctype.substring(0,1) == 'p' ? 'Pie%20Chart' : ''))));<br \/>\n  var chdt=(ctype == 'v' ? '&chd=t:' : (ctype == 's' ? '&chd=t:' : (ctype == 'gv' ? '&chl=' : (ctype.substring(0,1) == 'p' ? pretherest + '&chd=t:' : ''))));<br \/>\n  var chdeq=(ctype == 'v' ? '&chd=' : (ctype == 's' ? '&chd=' : (ctype == 'gv' ? '&chl=' : (ctype.substring(0,1) == 'p' ? '&chd=' : ''))));<br \/>\n  var tc=(ctype == 'v' ? 't:' : (ctype == 's' ? 't:' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? 't:' : ''))));<br \/>\n  var chdl=(ctype == 'v' ? '&chdl=' : (ctype == 's' ? '&chdl=' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? '&chdl=' : ''))));<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? '12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54' : (ctype == 'gv' ? 'graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}' : (ctype.substring(0,1) == 'p' ? '1,2,3,4' : ''))));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? 'January|February|March|April' : ''))));<br \/>\n  var prechtt=(ctype == 'v' ? chdt + prenchtt + chdl + preachtt : (ctype == 's' ? chdt + prenchtt + chdl + preachtt + '&chxt=x,y' : (ctype == 'gv' ? chdt + prenchtt : (ctype.substring(0,1) == 'p' ? chdt + prenchtt + chdl + preachtt : ''))));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : (ctype == 'gv' ? '' : (ctype.substring(0,1) == 'p' ? 'ff0000,00ff00,0000ff,ff00ff' : ''))));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" : (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" : \"\"))));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? \"Enter delimited values string for Scatter Chart\" : (ctype == 'gv' ? \"Enter delimited values string for GraphViz Chart\" : (ctype.substring(0,1) == 'p' ? \"Enter delimited values string for Pie Chart\" : \"\"))));<br \/>\n  var asktwo=(ctype == 'v' ? true : (ctype == 's' ? true : (ctype == 'gv' ? false : (ctype.substring(0,1) == 'p' ? true : false))));<br \/>\n  var twopb=(ctype.substring(0,1) == 'p' ? 'Any optional legend or title argument snippets?  Optionally prefix by 3 for 3d Pie Chart or by c for Concentric Pie Chart.  Eg. 3' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco : 'Any optional legend or title argument snippets?  Eg. ' + chdl + preachtt + '&chtt=My%20' + cencodename + '&chco=' + defchco);<br \/>\n<br \/>\n  var atend=\"&lt;canvas id=sharecanvas style=display:none;&gt;&lt;\/canvas&gt;&lt;div style=display:none;&gt;&lt;label for='shareurl'&gt;&lt;input type=button onclick='downloadmaybe(); shareurl();' id='sbut' value='Share URL Link'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input onblur=changeu(this.value); title='Suffix by hashtag 1 is text and hashtag 2 is title' style='width:45%;' type=url value='' placeholder='https:\/\/www.rjmprogramming.com.au\/ITblog\/#RJM Programming Blog#IT Blog' id=shareurl ondblclick='this.value=trythis(this.placeholder);'&gt;&lt;\/input&gt;&lt;br&gt;&lt;br&gt;&lt;span&gt; ... and\/or ... &lt;\/span&gt;&lt;br&gt;&lt;br&gt;&lt;label for='files'&gt;&lt;input type=button onclick=document.getElementById('share').click(); value='Share media or document files'&gt;&lt;\/input&gt;: &lt;\/label&gt;&lt;input id='files' type='file' accept='image\/*,video\/*,audio\/*,application\/*,text\/*' multiple&gt;&lt;\/div&gt;&lt;br&gt;&lt;br&gt;&lt;button id='share' type='button'&gt;Share your media or documents or link!&lt;\/button&gt;&lt;output id='output'&gt;&lt;\/output&gt;&lt;scr\" + \"ipt type='text\/javascript' src='\/web_share_api_test.js?canv\" + \"asshare=as_necessary9867654' defer&gt;&lt;\/scr\" + \"ipt&gt;\";<br \/>\n  atend='';<br \/>\n <br \/>\n  var vals=[], annowin=null;<br \/>\n  var lastbit=\"&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;button title='Other complex canvas annotation functionalities (forgoes the simpler ones above) ...' id=annobut onclick=\\\"document.getElementById('tdleft').style.verticalAlign='top'; setTimeout(prerepaint, 12000); if (arest.length != 0) { if (document.getElementById('myvenn').src.indexOf(arest) == -1) { pdivhide(); document.getElementById('myvenn').src=document.getElementById('myvenn').src.split(arest.substring(0,5))[0] + arest;  document.getElementById('tdleft').style.verticalAlign='top'; } } annowin=window.open('\/HTMLCSS\/user_of_signature_signature.htm?elemode=img','_blank','top=420,left=620,width=900,height=420');     \\\" style=\\\"background-color:yellow;\\\"&gt;More Annotations&lt;\/button&gt;&nbsp;&nbsp;&lt;button id=bshare onclick=repaint(); style=display:none;&gt;Repaint &lt;font size=1&gt;(but lose sharing emojis above)&lt;\/font&gt;&lt;\/button&gt;&lt;br&gt;&lt;div id=divcanvas style=display:none;&gt;&lt;canvas id=bottomcanvas&gt;&lt;\/canvas&gt;&lt;\/div&gt;\";<br \/>\n  var fszbit='&nbsp;&nbsp;&lt;span id=spanfsz&gt;&lt;select id=fsz onchange=\"fsz=this.value;\"&gt;&lt;option value=\".10\"&gt;10px&lt;\/option&gt;&lt;option value=\".6\"&gt;6px&lt;\/option&gt;&lt;option value=\".8\"&gt;8px&lt;\/option&gt;&lt;option value=\".9\"&gt;9px&lt;\/option&gt;&lt;option value=\".11\"&gt;11px&lt;\/option&gt;&lt;option value=\".12\"&gt;12px&lt;\/option&gt;&lt;option value=\".14\"&gt;14px&lt;\/option&gt;&lt;option value=\".16\"&gt;16px&lt;\/option&gt;&lt;option value=\".18\"&gt;18px&lt;\/option&gt;&lt;option value=\".20\"&gt;20px&lt;\/option&gt;&lt;option value=\".24\"&gt;24px&lt;\/option&gt;&lt;option value=\".30\"&gt;30px&lt;\/option&gt;&lt;option value=\".36\"&gt;36px&lt;\/option&gt;&lt;option value=\".40\"&gt;40px&lt;\/option&gt;&lt;option value=\".48\"&gt;48px&lt;\/option&gt;&lt;option value=\".50\"&gt;50px&lt;\/option&gt;&lt;option value=\".64\"&gt;64px&lt;\/option&gt;&lt;\/select&gt;&lt;\/span&gt;';<br \/>\n  var origemailurl='mailto:?subject=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...&body=';<br \/>\n  var origsmsurl='sms:&body=My%20' + cencodename + '%20...%20best%20viewed%20in%20landscape%20...';<br \/>\n  var smsee='';<br \/>\n  var chd=location.search.split(chdeq)[1] ? (tc + decodeURIComponent(location.search.split(chdeq)[1].split('&')[0])).replace('t:t:', 't:').replace(\/^t\\:$\/g, '') : \"\";<br \/>\n  var therest=location.search.split(chdeq)[1] ? (pretherest + document.URL.split(document.URL.split('#')[0].split(chdeq)[1].split('&')[0])[1].split('#')[0]) : \"\";<br \/>\n<\/code><\/p>\n<p>Please acquaint yourself with these new annotating features in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html----GETME\">fifth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/new-google-chart-image-chart-graphviz-chart-tutorial\/'>New Google Chart Image Chart GraphViz Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicgvct'>Previous relevant <a target=_blank title='Google Chart Image Chart GraphViz Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-graphviz-chart-tutorial\/'>Google Chart Image Chart GraphViz Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart GraphViz Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_graphviz.gif\" title=\"Google Chart Image Chart GraphViz Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart GraphViz Chart Tutorial<\/p><\/div>\n<p>Today we have two strands of forward progress, onto the progress up to yesterday&#8217;s <a title='Google Chart Image Chart Scatter Chart Tutorial' href='#gcicsct'>Google Chart Image Chart Scatter Chart Tutorial<\/a>, they being &#8230;<\/p>\n<ul>\n<li>establish a new interfacing to <a target=_blank title='Scatter Chart info' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/graphviz'>GraphViz Chart<\/a> &#8230;<br \/>\n<blockquote cite='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/graphviz'><p>\nGraphViz is a package of open source tools for visualizing connectivity graphs. You can create GraphViz graphs using the DOT language and your choice of layout engines.\n<\/p><\/blockquote>\n<p> &#8230; a chart looking a bit like <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/orgchart'>Organization Charts<\/a> &#8230;<\/p>\n<blockquote cite='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/orgchart'><p>\nOrg charts are diagrams of a hierarchy of nodes, commonly used to portray superior\/subordinate relationships in an organization. A family tree is a type of org chart.\n<\/p><\/blockquote>\n<p>\n<iframe id=vxennif src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html?type=gv\" style=\"width:98%;height:640px;\"><\/iframe><br \/>\n\n<\/li>\n<li>start with an at least two part &#8220;inhouse phase&#8221; of additional &#8220;extra to text&#8221; annotation functionality possibilities &#8230; just starting with &#8230;\n<ol>\n<li>line<\/li>\n<li>open rectangle<\/li>\n<li>filled rectangle<\/li>\n<\/ol>\n<\/li>\n<\/ul>\n<p> &#8230; additional functionality, that we may well add to, but being as we <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=PtR4cWb4HNg'>feel a change<\/a> we&#8217;ll leave that for another time.<\/p>\n<p>The WordPress blog &#8220;404.php&#8221; code snippet becomes &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) {<br \/>\n<br \/>\n       $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING']));<br \/>\n       if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) {<br \/>\n          $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1];<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       if (strpos(('?' . $_SERVER['QUERY_STRING']), 'text1=') !== false) {<br \/>\n       $theone=2;<br \/>\n       $im = imagecreatefromstring(file_get_contents('http:\/\/chart.googleapis.com\/chart' . explode('&text1=', $theqs)[0]));<br \/>\n       <br \/>\n       if (7 == 7) {<br \/>\n       <br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text1']));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       $black = imagecolorallocatealpha($im, 1, 1, 1, 0);<br \/>\n       $blackish = imagecolorallocatealpha($im, 127, 127, 127, 64);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n       if (trim($csv[2]) == '') { \/\/ non text annotations<br \/>\n<br \/>\n       $zeroesbit='';<br \/>\n       $izeroes=0;<br \/>\n       $xmantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($xmantissae) &gt; 1) {<br \/>\n         $csv[0]=$xmantissae[0];<br \/>\n         while (substr($xmantissae[1],0,1) == '0') {<br \/>\n           $zeroesbit.='0';<br \/>\n           $xmantissae[1]=substr($xmantissae[1],1);<br \/>\n         }<br \/>\n         $csv[2]=$xmantissae[1];<br \/>\n       }<br \/>\n       $ymantissae=explode('.', ('' . $csv[1]));<br \/>\n       if (sizeof($ymantissae) &gt; 1) {<br \/>\n         $csv[1]=$ymantissae[0];<br \/>\n         if (sizeof($csv) &gt; 3) {<br \/>\n         $csv[3]=$ymantissae[1];<br \/>\n         } else {<br \/>\n         array_push($csv, $ymantissae[1]);<br \/>\n         }<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       if (strlen($zeroesbit) == 4) { \/\/ filled in rectangle<br \/>\n         imagefilledrectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish);<br \/>\n       } else if (strlen($zeroesbit) == 2) { \/\/ rectangle<br \/>\n         imagerectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       } else if (strlen($zeroesbit) == 1) { \/\/ line<br \/>\n         imageline($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       }<br \/>\n<br \/>\n       } else { \/\/ text placement<br \/>\n       $xis=$csv[0];<br \/>\n       $mantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         $tenpx=$mantissae[1];<br \/>\n         $xis=$mantissae[0];<br \/>\n       }<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  \/\/echo explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1];<br \/>\n  \/\/exit;<br \/>\n  imagettftext($im, $tenpx, 0, $xis, $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n}<br \/>\n         while (isset($_GET['text' . $theone])) {<br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text' . $theone]));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n       if (trim($csv[2]) == '') { \/\/ non text annotations<br \/>\n<br \/>\n       $zeroesbit='';<br \/>\n       $izeroes=0;<br \/>\n       $xmantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($xmantissae) &gt; 1) {<br \/>\n         $csv[0]=$xmantissae[0];<br \/>\n         while (substr($xmantissae[1],0,1) == '0') {<br \/>\n           $zeroesbit.='0';<br \/>\n           $xmantissae[1]=substr($xmantissae[1],1);<br \/>\n         }<br \/>\n         $csv[2]=$xmantissae[1];<br \/>\n       }<br \/>\n       $ymantissae=explode('.', ('' . $csv[1]));<br \/>\n       if (sizeof($ymantissae) &gt; 1) {<br \/>\n         $csv[1]=$ymantissae[0];<br \/>\n         if (sizeof($csv) &gt; 3) {<br \/>\n         $csv[3]=$ymantissae[1];<br \/>\n         } else {<br \/>\n         array_push($csv, $ymantissae[1]);<br \/>\n         }<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       if (strlen($zeroesbit) == 4) { \/\/ filled in rectangle<br \/>\n         imagefilledrectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish);<br \/>\n       } else if (strlen($zeroesbit) == 2) { \/\/ rectangle<br \/>\n         imagerectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       } else if (strlen($zeroesbit) == 1) { \/\/ line<br \/>\n         imageline($im, $csv[0], $csv[1], $csv[2], $csv[3], $black);<br \/>\n       }<br \/>\n<br \/>\n       } else { \/\/ text placement<br \/>\n         try {<br \/>\n       $xis=$csv[0];<br \/>\n       $mantissae=explode('.', ('' . $csv[0]));<br \/>\n       if (sizeof($mantissae) &gt; 1) {<br \/>\n         $tenpx=$mantissae[1];<br \/>\n         $xis=$mantissae[0];<br \/>\n       }<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  imagettftext($im, $tenpx, 0, $xis, $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n       }<br \/>\n       $theone++;<br \/>\n         }<br \/>\n       }<br \/>\n\/\/}<br \/>\n       }<br \/>\n    <br \/> <br \/>\n       }<br \/>\n       <br \/>\n header('Content-Type: image\/png');<br \/>\n<br \/>\n imagepng($im);<br \/>\n imagedestroy($im);<br \/>\n       } else {<br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('http:\/\/chart.googleapis.com\/chart' . $theqs);<br \/>\n       }<br \/>\n       exit;<br \/>\n<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p> &#8230; utilizing that <font size=1>good ol&#8217;<\/font> PHP <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD<\/a> image library.<\/p>\n<p id=pmmm>We hope you enjoy the &#8230;<\/p>\n<blockquote><p>\nMantissa Madness Monday\n<\/p><\/blockquote>\n<p> &#8230; coding feel utilized to retain yesterday&#8217;s &#8230;<\/p>\n<p><code><br \/>\n&text<sub>n<\/sub>=x,y,<i>Text<\/i><br \/>\n<\/code><\/p>\n<p> &#8230; argument snippet basis, adding &#8220;x&#8221; and &#8220;y&#8221; <a target=_blank title='Mantissa information from Wikipedia, thanks' href='https:\/\/en.wikipedia.org\/wiki\/Common_logarithm#Mantissa_and_characteristic'>mantissa<\/a> arrangement smarts with a &#8220;nothing&#8221; <i>Text<\/i> in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html---GETME\">fourth draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>Would you believe, at least to us, it is far less obvious how to display a straight line (that is perhaps not horizontal nor vertical) within a webpage, than it is to display a rectangle, filled or not?! <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=3OdmULs9s9I'>Talk about irony!<\/a>  Over time, we have developed &#8230;<\/p>\n<ul>\n<li>HTML hr elements (with a rotation) &#8230; and the less kludgy &#8230;<\/li>\n<li>HTML div (defining a box with defined dimensions) for a nested SVG element containing the line definition using percentage dimensions<\/li>\n<\/ul>\n<p> &#8230; in the past, for when we needed to do this.  But, today, we&#8217;d like to thank <a target=_blank title='Great webpage, thanks' href='https:\/\/stackoverflow.com\/questions\/18012420\/draw-diagonal-lines-in-div-background-with-css'>this great webpage<\/a> for its suggestion to involve linear gradients &#8230;<\/p>\n<p><code><br \/>\n&lt;style&gt;<br \/>\n<br \/>\n.crossedtotl {<br \/>\n     background:<br \/>\n         linear-gradient(to top left,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n.crossedtotr {<br \/>\n     background:<br \/>\n         linear-gradient(to top right,<br \/>\n             rgba(0,0,0,0) 0%,<br \/>\n             rgba(0,0,0,0) calc(50% - 0.8px),<br \/>\n             rgba(0,0,0,1) 50%,<br \/>\n             rgba(0,0,0,0) calc(50% + 0.8px),<br \/>\n             rgba(0,0,0,0) 100%);<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n<\/code><\/p>\n<p> &#8230; in a, basically, CSS solution.  Great stuff, thanks!<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-graphviz-chart-tutorial\/'>Google Chart Image Chart GraphViz Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicsct'>Previous relevant <a target=_blank title='Google Chart Image Chart Scatter Chart Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-scatter-chart-tutorial\/'>Google Chart Image Chart Scatter Chart Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Scatter Chart Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_scatter.jpg\" title=\"Google Chart Image Chart Scatter Chart Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Scatter Chart Tutorial<\/p><\/div>\n<p>Today, we bring the <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> &#8230;<\/p>\n<ul>\n<li>Venn Chart interfacing knowledge via yesterday&#8217;s <a title='Google Chart Image Chart Venn Chart User Text Tutorial' href='#gcicvcutt'>Google Chart Image Chart Venn Chart User Text Tutorial<\/a> &#8230; using it to encase some &#8230;<\/li>\n<li><a target=_blank title='Scatter Chart info' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/scatter_charts'>Scatter Chart<\/a> interfacing logic &#8230; and along the way fix &#8230;<\/li>\n<li>mobile platform User Text issues<\/li>\n<\/ul>\n<p> &#8230; making distributing &#8220;Venn Chart&#8221; hardcodings into a dropdown selectable arrangement, because there are more commonalities than differences, really, and we do like to parameterize <font size=1>&#8230; even in the shower, with a fairly loud rendition of <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw'>this, perhaps<\/a><\/font>.<\/p>\n<p>Here is our framework for parameterization, <font color=purple>here<\/font>, and <font color=blue>into the future<\/font> &#8230;<\/p>\n<p><code><br \/>\n&lt;title&gt;Interfacing to Google Charts Image Chart Venn Chart <font color=purple>or Scatter Chart<\/font> - RJM Programming - November, 2023&lt;\/title&gt;<br \/>\n&lt;script type=text\/javascript&gt;<br \/>\n  var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : \"v\";<br \/>\n  var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht;<br \/>\n  var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? <font color=purple>'Scatter Chart'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? <font color=purple>'Scatter%20Chart'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var prenchtt=(ctype == 'v' ? '100,80,60,30,30,30,10' : (ctype == 's' ? <font color=purple>'12,87,75,41,23,96,68,71,34,9|98,60,27,34,56,79,58,74,18,76|84,23,69,81,47,94,60,93,64,54'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? <font color=purple>'Cats|Dogs'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var prechtt=(ctype == 'v' ? '&chd=t:' + prenchtt + '&chdl=' + preachtt : (ctype == 's' ? <font color=purple>'&chd=t:' + prenchtt + '&chdl=' + preachtt + '&chxt=x,y'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? <font color=purple>'FF0000|0000FF&chxt=x,y'<\/font> : <font color=blue>''<\/font>));<br \/>\n  var promptone=(ctype == 'v' ? \"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? <font color=purple>\"Enter delimited values string for Scatter Chart\"<\/font> : <font color=blue>\"\"<\/font>));<br \/>\n  var oneprompt=(ctype == 'v' ? \"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\" : (ctype == 's' ? <font color=purple>\"Enter delimited values string for Scatter Chart\"<\/font> : <font color=blue>\"\"<\/font>));<br \/>\n<br \/>\n\/\/ etcetera etcetera etcetera<br \/>\n<\/code><\/p>\n<p> &#8230; but, as you can imagine, there will probably be small retweaks of this arrangement, which is holding out okay so far for Scatter Charts in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html--GETME\">third draft image_venn.html<\/a> Google Chart Image Chart Venn Chart or Scatter Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>In this online world with so many platforms and devices and software choices, there is no need to ever be embarrassed by what might seem an obvious feature you&#8217;ve missed.<\/p>\n<p>Take the way on macOS, but not iOS, using a web browser to get to <a target=_blank title=YouTube href='https:\/\/youtube.com'>YouTube<\/a>, you can flag that a video should loop.  Especially good for &#8230;<\/p>\n<ul>\n<li>song obsessions &#8230;<\/li>\n<li>earworms you need to salve<\/li>\n<\/ul>\n<p> &#8230; and what about if your shower is taking an awfully long time?!  Please be careful with moisture and devices, though, in the bathroom!<\/p>\n<p>How does it happen?  Right click the play button, and looping is there as the top option.  Now back to that shower <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=HTzGMEfbnAw'>song obsession<\/a>.<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-scatter-chart-tutorial\/'>Google Chart Image Chart Scatter Chart Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicvcutt'>Previous relevant <a target=_blank title='Google Chart Image Chart Venn Chart User Text Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-user-text-tutorial\/'>Google Chart Image Chart Venn Chart User Text Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Venn Chart User Text Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn_text.jpg\" title=\"Google Chart Image Chart Venn Chart Interfacing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Venn Chart User Text Tutorial<\/p><\/div>\n<p>We think a way to improve on our interfacing web application start regarding yesterday&#8217;s <a title='Google Chart Image Chart Venn Chart Interfacing Primer Tutorial' href='#gcicvcipt'>Google Chart Image Chart Venn Chart Interfacing Primer Tutorial<\/a> would be to offer the user the chance to enter their own text onto the Venn Diagrams &#8230;<\/p>\n<blockquote><p>\nBut we would say that.\n<\/p><\/blockquote>\n<p> &#8230; given what we learnt in Primary school <font size=1>&#8230; or should we say &#8230;<\/font><\/p>\n<blockquote><p>\n&#8220;Gryffindor Slytherin Ravenclaw Hufflepuff Junior Business College&#8221;\n<\/p><\/blockquote>\n<p> &#8230; and, yes, <a target=_blank title='?' href='https:\/\/www.youtube.com\/watch?v=uhiCFdWeQfA'>is that you<\/a>, <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Aoife_N%C3%AD_Fhearraigh'>Aoife<\/a>?  What did you want to point out?  After you swallow those Rice Bubbles, that is?! Class is waiting &#8230;<\/p>\n<p>.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<blockquote><p>\nYes &#8230; miss something &#8230; and &#8230;\n<\/p><\/blockquote>\n<p>.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.<br \/>\n.\n<\/p>\n<blockquote><p>\nUse your words &#8230; okay &#8230; missing &#8230; don&#8217;t worry, the bus will wait &#8230; no &#8230; there&#8217;s no need to point &#8230; oh! &#8230;\n<\/p><\/blockquote>\n<p> &#8230; do you mean &#8230;<\/p>\n<blockquote><p>\nmissing ewe &#8230; no &#8230; missing you &#8230; oh! &#8230; missing u &#8230; oh! &#8230; &#8220;Gryffindor Slytherin Ravenclaw Hufflepuff Junio<font color=red>u<\/font>r Business College&#8221; &#8230; quite so, Aiofe &#8230; 3 points for Hufflepuff!\n<\/p><\/blockquote>\n<p>Anyway we needed a fleshed out &#8220;function ask&#8221; to cater for <font color=blue>potential onclick event logic catering for co-ordinates<\/font> &#8230;<\/p>\n<p><code><br \/>\n  function ask(evt) {<br \/>\n   var answer='', answertherest='';<br \/>\n   if (lasttext != '' && evt && normalcall) {<br \/>\n   document.getElementById('ilp').placeholder='Enter text and later click place for it on Venn Diagram to left (line feed is ~~)';<br \/>\n<br \/>\n<font color=blue>    elemLeft = document.getElementById('myvenn').offsetLeft;<br \/>\n    elemTop = document.getElementById('myvenn').offsetTop;<br \/>\n<br \/>\n       if (evt.touches) {<br \/>\n       if (evt.touches[0].pageX) {<br \/>\n       x = evt.touches[0].pageX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].pageY + document.body.scrollTop - elemTop;<br \/>\n       } else {<br \/>\n       x = evt.touches[0].clientX + document.body.scrollLeft - elemLeft;<br \/>\n       y = evt.touches[0].clientY + document.body.scrollTop - elemTop;<br \/>\n       }<br \/>\n       } else if (evt.clientX || ev.clientY) {<br \/>\n        x = evt.clientX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.clientY + document.body.scrollTop - elemTop;<br \/>\n       } else {<br \/>\n        x = evt.pageX + document.body.scrollLeft - elemLeft;<br \/>\n        y = evt.pageY + document.body.scrollTop - elemTop;<br \/>\n       }<\/font><br \/>\n    <br \/> <br \/>\n       document.getElementById('dtext').innerHTML+='&lt;p style=\"position:absolute;font-size:10px;font-family:Arial;left:' + x + 'px;top:' + y + 'px;z-index:98;\"&gt;' + lasttext + '&lt;\/p&gt;';<br \/>\n<br \/>\n   document.getElementById('aemail').href+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   document.getElementById('asms').href+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   arest+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   therest+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   asmsurl+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   aemailurl+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)));<br \/>\n   document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20Venn%20Diagram%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace((document.getElementById('myvenn').src + arest).split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input id=ilp onblur=\\\"lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.value=''; this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10)); mvp.setAttribute('content','initial-scale=1'); document.getElementById('myvenn').scrollIntoView();\\\" placeholder='Enter text and later click place for it on Venn Diagram to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\";<br \/>\n   \/\/alert(   document.getElementById('aemail').outerHTML );<br \/>\n   \/\/alert(   document.getElementById('asms').outerHTML );<br \/>\n   textnum++;<br \/>\n   lasttext='';<br \/>\n   } else if (!evt || !normalcall) {<br \/>\n   if (chd == '') {<br \/>\n   answer=prompt(\"Enter delimited values string for Venn Diagram such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\", (chd == '' ? \"100,80,60,30,30,30,10\" : (chd.replace('t:',''))));<br \/>\n   } else {<br \/>\n   answer=prompt(\"Enter delimited values string for your Venn Diagram collaborations, optionally, such that ... \" + String.fromCharCode(10) + \"The first three values specify the sizes of three circles: A, B, & C. For chart with only two circles, specify zero for the third value.\" + String.fromCharCode(10) + \"The fourth value specifies the size of the intersection of A and B.\" + String.fromCharCode(10) + \"The fifth value specifies the size of the intersection of A and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The sixth value specifies the size of the intersection of B and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + \"The seventh value specifies the size of the common intersection of A, B, and C. For a chart with only two circles, do not specify a value here.\" + String.fromCharCode(10) + String.fromCharCode(10) + \"\", (chd == '' ? \"100,80,60,30,30,30,10\" : (chd.replace('t:',''))));<br \/>\n   }<br \/>\n   vals=[];<br \/>\n   if (answer != null) {<br \/>\n    answer=answer.trim();<br \/>\n    if (answer.trim() != '') {<br \/>\n      var delimis='';<br \/>\n      for (var ii=0; ii&lt;answer.length; ii++) {<br \/>\n        if (delimis == '' && (answer.substring(ii).substring(0,1) &lt; '0' || answer.substring(ii).substring(0,1) &gt; '9')) {<br \/>\n          delimis=answer.substring(ii).substring(0,1);<br \/>\n        }<br \/>\n      }<br \/>\n    }<br \/>\n    if (delimis != '') {<br \/>\n      vals=answer.split(delimis);<br \/>\n    }<br \/>\n    if (vals.length == 6 || vals.length == 7) {<br \/>\n      answertherest=prompt('Any optional legend or title argument snippets?  Eg. &chdl=A|B|C&chtt=My%20Venn%20Diagram&chco=ff0000,00ff00,0000ff', therest);<br \/>\n      if (answertherest == null) { answertherest=''; }<br \/>\n      therest=answertherest.trim();<br \/>\n      var aone=1;<br \/>\n      var plotstring='';<br \/>\n      var flds=[];<br \/>\n      if (therest.indexOf('&text' + aone + '=') != -1) {<br \/>\n        while (therest.indexOf('&text' + aone + '=') != -1) {<br \/>\n        if (chd == '') {<br \/>\n          plotstring=decodeURIComponent(therest.split('&text' + aone + '=')[1].split('&')[0]);<br \/>\n          while (plotstring.indexOf(String.fromCharCode(10)) != -1) {<br \/>\n            plotstring=plotstring.replace(String.fromCharCode(10), '&lt;br&gt;');<br \/>\n          }<br \/>\n          flds=plotstring.split(',');<br \/>\n          if (eval('' + flds.length) &gt;= 3) {<br \/>\n       document.getElementById('dtext').innerHTML+='&lt;p style=\"position:absolute;font-size:10px;font-family:Arial;left:' + flds[0] + 'px;top:' + flds[1] + 'px;z-index:98;\"&gt;' + plotstring.split('' + flds[0] + ',' + flds[1] + ',')[1] + '&lt;\/p&gt;';<br \/>\n          }<br \/>\n        }<br \/>\n        aone++;<br \/>\n        textnum=aone;<br \/>\n        }<br \/>\n      }<br \/>\n      \/\/document.getElementById('myvenn').style.backgroundImage='URL(\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?cht=v&chd=t:' + encodeURIComponent(answer + therest) + ')';<br \/>\n      document.getElementById('myvenn').src='\/\/www.rjmprogramming.com.au\/ITblog\/' + Math.min(550,window.innerWidth) + '\/' + Math.min(350,window.innerHeight) + '\/?cht=v&chd=t:' + encodeURIComponent(answer) + therest + '';<br \/>\n      if (document.getElementById('tdright').innerHTML == '') {<br \/>\n        document.getElementById('tdright').innerHTML=\"&nbsp;&nbsp;&lt;span id=spemail&gt;&lt;a target=_blank href='mailto:?subject=My%20Venn%20Diagram%20...%20best%20viewed%20in%20landscape%20...&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=aemail title=Email&gt;&amp;#128231;&lt;\/a&gt;&lt;\/span&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;span id=spsms&gt;&lt;a target=_blank onmouseover=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" ontouchstart=\\\"if (smsee.length == 0 && origsmsurl.indexOf('sms:&') != -1) { smsee=prompt('Please enter SMS number to send to.', ''); if (smsee == null) { smsee=''; } else { origsmsurl=origsmsurl.replace('sms:&','sms:' + smsee + '&'); asmsurl=asmsurl.replace('sms:&','sms:' + smsee + '&'); this.href=asmsurl;  }   }\\\" href='sms:&body=\" + encodeURIComponent((document.getElementById('myvenn').src + arest).replace(document.getElementById('myvenn').src.split('?')[0].split('#')[0], document.URL.split('?')[0].split('#')[0])) + \"' id=asms title=SMS&gt;&amp;#128223;&lt;\/a&gt;&lt;\/span&gt;&lt;br&gt;&lt;br&gt;&nbsp;&nbsp;&lt;input id=ilp onblur=\\\"lasttext=this.value.replace(\/\\~\\~\/g, '&lt;br&gt;'); this.value=''; this.placeholder='Click where you want ... ' + lasttext.replace(\/\\&lt;br\\&gt;\/g, String.fromCharCode(10));\\\" placeholder='Enter text and later click place for it on Venn Diagram to left (line feed is ~~)' type=text style=width:500px; value=''&gt;&lt;\/input&gt;\";<br \/>\n      }<br \/>\n    } else {<br \/>\n      alert('Try again.');<br \/>\n      ask(null);<br \/>\n    }<br \/>\n   }<br \/>\n   }<br \/>\n   atstart=false;<br \/>\n   normalcall=true;<br \/>\n  }<br \/>\n<\/code><\/p>\n<p> &#8230; in <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-GETME\">our changed<\/a> <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html-GETME\">second draft image_venn.html<\/a> Google Chart Image Chart Venn Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also <a href='#vennif'>try below<\/a>.<\/p>\n<p><b><i>Did you know?<\/i><\/b><\/p>\n<p>As far as this WordPress blog&#8217;s 404.php role goes in all this, we were keen to maintain Venn Diagrams that were purely image based data, because the web browser sharing mechanisms are so much better this way, else we were tempted to just construct a webpage HTML dataset positioning text in an absolute way with a Venn Chart background image.  In order to do these purely image based Venn Diagrams we used PHP&#8217;s <a target=_blank title='GD and Image Functions' href='http:\/\/php.net\/manual\/en\/ref.image.php'>GD<\/a> image library <font color=blue>as per<\/font> &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) {<br \/>\n<br \/>\n       $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING']));<br \/>\n       if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) {<br \/>\n          $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1];<br \/>\n       }<br \/>\n       <br \/>\n       <font color=blue>if (strpos(('?' . $_SERVER['QUERY_STRING']), 'text1=') !== false) {<br \/>\n       $theone=2;<br \/>\n       $im = imagecreatefromstring(file_get_contents('ht<\/font><font color=blue>tp<\/font><font color=blue>:\/\/chart.googleapis.com\/chart' . explode('&text1=', $theqs)[0]));<br \/>\n       <br \/>\n       if (7 == 7) {<br \/>\n       <br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text1']));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       $black = imagecolorallocatealpha($im, 1, 1, 1, 0);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  \/\/echo explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1];<br \/>\n  \/\/exit;<br \/>\n  imagettftext($im, 10, 0, $csv[0], $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n         while (isset($_GET['text' . $theone])) {<br \/>\n       $plotstring=str_replace('+',' ',urldecode($_GET['text' . $theone]));<br \/>\n       $csv=explode(',', $plotstring);<br \/>\n       if (sizeof($csv) &gt;= 3) {<br \/>\n  try {<br \/>\n  if (function_exists('imagettftext')) {<br \/>\n  if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') {<br \/>\n  imagettftext($im, 10, 0, $csv[0], $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]);<br \/>\n  }<br \/>\n  }<br \/>\n  } catch (Exception $e) {  }<br \/>\n       }<br \/>\n       $theone++;<br \/>\n         }<br \/>\n       }<br \/>\n       <br \/>\n       }<br \/>\n    <br \/> <br \/>\n header('Content-Type: image\/png');<br \/>\n<br \/>\n imagepng($im);<br \/>\n imagedestroy($im);<br \/>\n       } else {<\/font><br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/chart.googleapis.com\/chart' . $theqs);<br \/>\n       <font color=blue>}<\/font><br \/>\n       exit;<br \/>\n<br \/>\n    }<br \/>\n<\/code><br \/>\n?&gt;<\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-user-text-tutorial\/'>Google Chart Image Chart Venn Chart User Text Tutorial<\/a>.<\/p-->\n<hr>\n<p id='gcicvcipt'>Previous relevant <a target=_blank title='Google Chart Image Chart Venn Chart Interfacing Primer Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-interfacing-primer-tutorial\/'>Google Chart Image Chart Venn Chart Interfacing Primer Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Image Chart Venn Chart Interfacing Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.jpg\" title=\"Google Chart Image Chart Venn Chart Interfacing Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Image Chart Venn Chart Interfacing Primer Tutorial<\/p><\/div>\n<p>So, moving on from <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> Map Charts, today, let&#8217;s turn our attention to <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/index' title='Google Chart Tools provide a perfect way to visualize data on your website. From simple line charts to complex hierarchical tree maps, the chart galley provides a large number of well-designed chart types. Populating your data is easy using the provided client- and server-side tools.'>Google Charts<\/a> <a target=_blank title='Google Charts Image Chart' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/chart_gall'>Image Chart<\/a> <a target=_blank title='Google Chart Image Chart Venn Chart information' href='https:\/\/developers.google.com\/chart\/image\/docs\/gallery\/venn_charts'>Venn Charts<\/a> which we were dead set curious about given work we&#8217;d done in the past regarding Venn Diagrams, which we referenced when we presented <a target=_blank title='Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial' href='\/\/www.rjmprogramming.com.au\/ITblog\/flowchart-and-venn-diagram-and-mind-map-token-subject-emoji-tutorial\/'>Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial<\/a> some time back.  Gobsmackingly good is the <a target=_blank title=Google href='https:\/\/google.com'>Google<\/a> approach, <a target=_blank title=? href='https:\/\/www.youtube.com\/watch?v=e9_7GcQeiqw&#038;t=2m37s'>again<\/a>, as you&#8217;d expect, but the approach covers different ground, so one feels one should go back to Primary School!  You thought we were going to give away the answer to one of those security questions, didn&#8217;t you?!  <font size=6>Didn&#8217;t you!?!<\/font>  <font size=1>Well, the answer is &#8220;Gryffindor Slytherin Ravenclaw Hufflepuff Junior Business College&#8221; &#8230; if you must know.<\/font><\/p>\n<p>The sharing capabilities are good with the Google Charts approach too, given we are creating an HTML image, as our WordPress blog <font size=1>good ol&#8217;<\/font> 404.php has been woken up to address via &#8230;<\/p>\n<p>&lt;?php<br \/>\n<code><br \/>\n    if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) {<br \/>\n<br \/>\n       $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING']));<br \/>\n       if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) {<br \/>\n          $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1];<br \/>\n       }<br \/>\n<br \/> <br \/>\n       header('Content-Type: image\/png');<br \/>\n       echo file_get_contents('ht<font color=black>tp<\/font>:\/\/chart.googleapis.com\/chart' . $theqs);<br \/>\n       exit;<br \/>\n<br \/>\n     }<br \/>\n    <\/code><br \/>\n?&gt;<\/p>\n<p>Yes, all these Image Chart smarts come, essentially, from a &#8220;one line&#8221; calling URL!  Who&#8217;d have believed it!  Shiver me timbers!<\/p>\n<p>Well, it&#8217;s early days with this Venn Chart interfacing where we allow for &#8230;<\/p>\n<ul>\n<li>circle (think up to three) definition &#8230; and the rest, in this first draft <font size=1>(hoping you&#8217;ve done some reading)<\/font> &#8230;<\/li>\n<li>legend and title and colour selection user definitions dumped into a fairly unfriendly &#8220;the rest&#8221; Javascript prompt entry we ask of the user should they go ahead with the previous definition &#8230; and &#8230;<\/li>\n<li>sharing and collaboration email and SMS functionality<\/li>\n<\/ul>\n<p> &#8230; we hope you try via our <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html_GETME\">&#8220;proof of concept&#8221; first draft image_venn.html<\/a> Google Chart Image Chart Venn Chart interfacing <a target=_blank href=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\">web application<\/a> you can also try below &#8230;<\/p>\n<p><iframe id=vennif src=\"https:\/\/www.rjmprogramming.com.au\/HTMLCSS\/image_venn.html\" style=\"width:98%;height:800px;\"><\/iframe><\/p>\n<p><!--p>You can also see this play out at WordPress 4.1.1's <a target=_blank  href='\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-interfacing-tutorial\/'>Google Chart Image Chart Venn Chart Interfacing Tutorial<\/a>.<\/p-->\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61748' onclick='var dv=document.getElementById(\"d61748\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/mathematics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61748' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61758' onclick='var dv=document.getElementById(\"d61758\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/text\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61758' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61779' onclick='var dv=document.getElementById(\"d61779\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/parameter\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61779' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61792' onclick='var dv=document.getElementById(\"d61792\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/line\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61792' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61807' onclick='var dv=document.getElementById(\"d61807\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/canvas\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61807' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61823' onclick='var dv=document.getElementById(\"d61823\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/statistics\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61823' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61834' onclick='var dv=document.getElementById(\"d61834\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/broadcast\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61834' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61841' onclick='var dv=document.getElementById(\"d61841\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/context\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61841' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61847' onclick='var dv=document.getElementById(\"d61847\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/border-radius\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61847' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61852' onclick='var dv=document.getElementById(\"d61852\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/rubber-band\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61852' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61871' onclick='var dv=document.getElementById(\"d61871\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/colour\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61871' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61881' onclick='var dv=document.getElementById(\"d61881\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/guage\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61881' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61887' onclick='var dv=document.getElementById(\"d61887\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/justification\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61887' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61909' onclick='var dv=document.getElementById(\"d61909\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/commentary\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61909' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61921' onclick='var dv=document.getElementById(\"d61921\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/icon\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61921' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d61939' onclick='var dv=document.getElementById(\"d61939\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/onclick\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d61939' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Do you like to come at explaining things in layers? Sort of like the analogy &#8230; you start a project thinking of it in terms of &#8220;2D&#8221; &#8230; and then to move forward &#8230; you spend a day making it &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-image-map-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,14,33,37],"tags":[3028,2419,3363,83,1832,99,3286,127,130,1798,4588,1710,1617,184,208,3349,224,4033,2712,4587,2957,2105,281,290,3399,327,4576,4577,342,367,4573,385,2023,3539,400,401,4295,1550,485,519,538,4580,4581,541,4575,4574,4589,549,3362,564,2658,578,584,4591,587,592,4583,4584,1658,4205,1577,620,1643,3965,678,686,687,2598,699,2020,2205,3870,2178,3326,745,752,1517,795,812,2521,2621,4572,861,870,3267,873,1886,3301,914,932,4586,944,2643,4440,2362,4321,962,967,968,997,2132,4579,3178,4582,4585,3864,1099,1841,1917,1107,1586,2019,1172,4590,4065,1196,2940,1867,1226,4578,1254,1262,1675,1273,1294,4450,1319,3744,1891,3540,1360,4571,1367,1369,1404,1433,3010,1493],"class_list":["post-61939","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-software","category-tutorials","tag-action","tag-aesthetics","tag-angle","tag-animated-gif","tag-annotation","tag-area","tag-attrribute-selector","tag-background-image","tag-bar-chart","tag-border-radius","tag-box-chart","tag-broadcast","tag-candlestick-chart","tag-canvas","tag-circle","tag-client-pre-emptive-iframe","tag-colour","tag-commentary","tag-compound","tag-compound-chart","tag-concept","tag-context","tag-css","tag-data","tag-degrees","tag-did-you-know","tag-discrete","tag-discrete-click","tag-div","tag-dropdown","tag-earworm","tag-emoji","tag-encoding","tag-entity","tag-event","tag-event-driven","tag-event-stoppropagation","tag-gd","tag-gesture","tag-google-charts","tag-graph","tag-graphical","tag-graphical-representation","tag-graphics","tag-graphviz","tag-graphviz-chart","tag-guage","tag-gui","tag-hardcoding","tag-hierarchy","tag-html-entity","tag-html5","tag-icon","tag-icons","tag-iframe","tag-image-map","tag-imageellipse","tag-imagefilledellipse","tag-imagemagick","tag-intelligence","tag-interface","tag-internationalization","tag-justification","tag-justify","tag-label","tag-layer","tag-layers","tag-line","tag-line-chart","tag-linear-gradient","tag-loop","tag-looping","tag-macos","tag-mantissa","tag-map","tag-mathematics","tag-meter","tag-mobile","tag-mouse","tag-nest","tag-nesting","tag-obsession","tag-onclick","tag-onload","tag-ontouchdown","tag-ontouchstart","tag-parameter","tag-parameterization","tag-peer-to-peer","tag-php","tag-pich","tag-pie-chart","tag-placeholder","tag-placement","tag-play","tag-play-button","tag-polygon","tag-popup","tag-popup-window","tag-programming","tag-rectangle","tag-relationship","tag-representation","tag-retwaek","tag-rubber-band","tag-rubber-banding","tag-scatter-chart","tag-scribble","tag-scroll","tag-scrolling","tag-shape","tag-snapchat","tag-song","tag-speak","tag-spread","tag-statistics","tag-stoppropagation","tag-substitution","tag-svg","tag-ternery","tag-text","tag-textarea","tag-textbox","tag-thumbnail","tag-touch","tag-touchdown","tag-tutorial","tag-tweak","tag-user","tag-utf-16","tag-value","tag-venn-chart","tag-venn-diagram","tag-video","tag-web-browser","tag-window-open","tag-window-opener","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61939"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=61939"}],"version-history":[{"count":8,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61939\/revisions"}],"predecessor-version":[{"id":61999,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61939\/revisions\/61999"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=61939"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=61939"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=61939"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}