{"id":61792,"date":"2023-11-28T03:01:24","date_gmt":"2023-11-27T17:01:24","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61792"},"modified":"2023-11-29T11:18:22","modified_gmt":"2023-11-29T01:18:22","slug":"google-chart-image-chart-graphviz-chart-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-graphviz-chart-tutorial\/","title":{"rendered":"Google Chart Image Chart GraphViz Chart 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 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>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","protected":false},"excerpt":{"rendered":"<p>Today we have two strands of forward progress, onto the progress up to yesterday&#8217;s Google Chart Image Chart Scatter Chart Tutorial, they being &#8230; establish a new interfacing to GraphViz Chart &#8230; GraphViz is a package of open source tools &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-graphviz-chart-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,37],"tags":[1832,3286,281,327,342,367,4573,400,1550,485,519,4575,4574,549,3362,1577,2598,2020,2205,3870,2178,3326,752,795,812,4572,861,873,1886,3301,914,932,4440,2362,4321,997,2132,1099,1917,1107,1172,1867,1254,1294,1319,1891,4571,1367,1369,1404,1493],"class_list":["post-61792","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-tutorials","tag-annotation","tag-attrribute-selector","tag-css","tag-did-you-know","tag-div","tag-dropdown","tag-earworm","tag-event","tag-gd","tag-gesture","tag-google-charts","tag-graphviz","tag-graphviz-chart","tag-gui","tag-hardcoding","tag-interface","tag-line","tag-linear-gradient","tag-loop","tag-looping","tag-macos","tag-mantissa","tag-mathematics","tag-mobile","tag-mouse","tag-obsession","tag-onclick","tag-ontouchstart","tag-parameter","tag-parameterization","tag-peer-to-peer","tag-php","tag-placement","tag-play","tag-play-button","tag-programming","tag-rectangle","tag-scatter-chart","tag-scroll","tag-scrolling","tag-song","tag-substitution","tag-text","tag-touch","tag-tutorial","tag-user","tag-venn-chart","tag-venn-diagram","tag-video","tag-web-browser","tag-youtube"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61792"}],"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=61792"}],"version-history":[{"count":14,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61792\/revisions"}],"predecessor-version":[{"id":61820,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61792\/revisions\/61820"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=61792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=61792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=61792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}