{"id":61748,"date":"2023-11-25T03:01:48","date_gmt":"2023-11-24T17:01:48","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=61748"},"modified":"2023-11-25T21:09:19","modified_gmt":"2023-11-25T11:09:19","slug":"google-chart-image-chart-venn-chart-interfacing-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-interfacing-primer-tutorial\/","title":{"rendered":"Google Chart Image Chart Venn Chart Interfacing Primer 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 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<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","protected":false},"excerpt":{"rendered":"<p>So, moving on from Google Charts Image Chart Map Charts, today, let&#8217;s turn our attention to Google Charts Image Chart Venn Charts which we were dead set curious about given work we&#8217;d done in the past regarding Venn Diagrams, which &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-image-chart-venn-chart-interfacing-primer-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,17,37],"tags":[519,549,4562,1577,752,932,997,1319,4571,1367],"class_list":["post-61748","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gui","category-tutorials","tag-google-charts","tag-gui","tag-image-chart","tag-interface","tag-mathematics","tag-php","tag-programming","tag-tutorial","tag-venn-chart","tag-venn-diagram"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61748"}],"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=61748"}],"version-history":[{"count":10,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61748\/revisions"}],"predecessor-version":[{"id":61764,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/61748\/revisions\/61764"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=61748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=61748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=61748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}