Google Chart Image Chart Pie Chart Tutorial

As we intimated in yesterday’s Google Chart Image Chart GraphViz Chart Tutorial …

start with an at least two part “inhouse phase” of additional “extra to text” annotation functionality possibilities …

… we would return! And so, here thou lingers. It’s “part two” day, even bigger than “Ben Hur” in certain outback towns we’re a little bit shy to divulge until we get to know our readers that little bit better.

Yes, we are dovetailing with work we’ve done in the past using the excellent …

canvas … element introduced with HTML5 … whereby …
annotations like …
1. scribble … as the default, and various other …
2. discrete click shapes … and …
3. text … including emojis … and …
4. image
… annotating modus operandi

… can be part of the arrangements. It works that the Annotation Helper is opened …

in a new “known about” popup window … looking out for …
parent based “img” element (in the modus operandi we use, calling it, regarding the parent top left image) … so as to be able to …
populate its canvas element with a clone of that calling “img” graphical content … but add into the mix …
menu driven annotation functionality which can change that canvas look and underlying data … and …
the caller can keep track of this and arrange, or not, for these changes to be reflected back at its top left “img” element … the catch being …
the “within range of GET argument” 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’s (and before) work … though your normal image sharing capabilities via the web browser remain in the caller and the called

As well, today, we are introducing new Google Charts Image Chart Pie Chart interfacing, and because this chart type can have the three …

Normal
3D
Concentric

… guises, there was some work to keep us off this street (okay … so we divulged … again) …

Please acquaint yourself with these new annotating features in our changed fifth draft image_venn.html Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart or Pie Chart interfacing web application you can also try below.

Previous relevant Google Chart Image Chart GraphViz Chart Tutorial is shown below.

Google Chart Image Chart GraphViz Chart Tutorial

Today we have two strands of forward progress, onto the progress up to yesterday’s Google Chart Image Chart Scatter Chart Tutorial, they being …

establish a new interfacing to GraphViz Chart …

GraphViz 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.

… a chart looking a bit like Organization Charts …

Org 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.
start with an at least two part “inhouse phase” of additional “extra to text” annotation functionality possibilities … just starting with …
1. line
2. open rectangle
3. filled rectangle

… additional functionality, that we may well add to, but being as we feel a change we’ll leave that for another time.

The WordPress blog “404.php” code snippet becomes …

<?php
if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) { $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING'])); if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) { $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1]; } if (strpos(('?' . $_SERVER['QUERY_STRING']), 'text1=') !== false) { $theone=2; $im = imagecreatefromstring(file_get_contents('http://chart.googleapis.com/chart' . explode('&text1=', $theqs)[0])); if (7 == 7) { $plotstring=str_replace('+',' ',urldecode($_GET['text1'])); $csv=explode(',', $plotstring); $black = imagecolorallocatealpha($im, 1, 1, 1, 0); $blackish = imagecolorallocatealpha($im, 127, 127, 127, 64); if (sizeof($csv) >= 3) { if (trim($csv[2]) == '') { // non text annotations $zeroesbit=''; $izeroes=0; $xmantissae=explode('.', ('' . $csv[0])); if (sizeof($xmantissae) > 1) { $csv[0]=$xmantissae[0]; while (substr($xmantissae[1],0,1) == '0') { $zeroesbit.='0'; $xmantissae[1]=substr($xmantissae[1],1); } $csv[2]=$xmantissae[1]; } $ymantissae=explode('.', ('' . $csv[1])); if (sizeof($ymantissae) > 1) { $csv[1]=$ymantissae[0]; if (sizeof($csv) > 3) { $csv[3]=$ymantissae[1]; } else { array_push($csv, $ymantissae[1]); } } if (strlen($zeroesbit) == 4) { // filled in rectangle imagefilledrectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish); } else if (strlen($zeroesbit) == 2) { // rectangle imagerectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $black); } else if (strlen($zeroesbit) == 1) { // line imageline($im, $csv[0], $csv[1], $csv[2], $csv[3], $black); } } else { // text placement $xis=$csv[0]; $mantissae=explode('.', ('' . $csv[0])); if (sizeof($mantissae) > 1) { $tenpx=$mantissae[1]; $xis=$mantissae[0]; } try { if (function_exists('imagettftext')) { if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') { //echo explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]; //exit; imagettftext($im, $tenpx, 0, $xis, $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]); } } } catch (Exception $e) { } } while (isset($_GET['text' . $theone])) { $plotstring=str_replace('+',' ',urldecode($_GET['text' . $theone])); $csv=explode(',', $plotstring); if (sizeof($csv) >= 3) { if (trim($csv[2]) == '') { // non text annotations $zeroesbit=''; $izeroes=0; $xmantissae=explode('.', ('' . $csv[0])); if (sizeof($xmantissae) > 1) { $csv[0]=$xmantissae[0]; while (substr($xmantissae[1],0,1) == '0') { $zeroesbit.='0'; $xmantissae[1]=substr($xmantissae[1],1); } $csv[2]=$xmantissae[1]; } $ymantissae=explode('.', ('' . $csv[1])); if (sizeof($ymantissae) > 1) { $csv[1]=$ymantissae[0]; if (sizeof($csv) > 3) { $csv[3]=$ymantissae[1]; } else { array_push($csv, $ymantissae[1]); } } if (strlen($zeroesbit) == 4) { // filled in rectangle imagefilledrectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $blackish); } else if (strlen($zeroesbit) == 2) { // rectangle imagerectangle($im, $csv[0], $csv[1], $csv[2], $csv[3], $black); } else if (strlen($zeroesbit) == 1) { // line imageline($im, $csv[0], $csv[1], $csv[2], $csv[3], $black); } } else { // text placement try { $xis=$csv[0]; $mantissae=explode('.', ('' . $csv[0])); if (sizeof($mantissae) > 1) { $tenpx=$mantissae[1]; $xis=$mantissae[0]; } if (function_exists('imagettftext')) { if (explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1] !== '') { imagettftext($im, $tenpx, 0, $xis, $csv[1], $black, realpath('arial.ttf'), explode('' . $csv[0] . ',' . $csv[1] . ',', $plotstring)[1]); } } } catch (Exception $e) { } } $theone++; } } //} } } header('Content-Type: image/png'); imagepng($im); imagedestroy($im); } else { header('Content-Type: image/png'); echo file_get_contents('http://chart.googleapis.com/chart' . $theqs); } exit; }
?>

… utilizing that good ol’ PHP GD image library.

We hope you enjoy the …

Mantissa Madness Monday

… coding feel utilized to retain yesterday’s …

&text_n=x,y,Text

… argument snippet basis, adding “x” and “y” mantissa arrangement smarts with a “nothing” Text in our changed fourth draft image_venn.html Google Chart Image Chart Venn Chart or Scatter Chart or GraphViz Chart interfacing web application you can also try below.

Did you know?

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?! Talk about irony! Over time, we have developed …

HTML hr elements (with a rotation) … and the less kludgy …
HTML div (defining a box with defined dimensions) for a nested SVG element containing the line definition using percentage dimensions

… in the past, for when we needed to do this. But, today, we’d like to thank this great webpage for its suggestion to involve linear gradients …

<style> .crossedtotl { background: linear-gradient(to top left, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } .crossedtotr { background: linear-gradient(to top right, rgba(0,0,0,0) 0%, rgba(0,0,0,0) calc(50% - 0.8px), rgba(0,0,0,1) 50%, rgba(0,0,0,0) calc(50% + 0.8px), rgba(0,0,0,0) 100%); } </style>

… in a, basically, CSS solution. Great stuff, thanks!

Previous relevant Google Chart Image Chart Scatter Chart Tutorial is shown below.

Google Chart Image Chart Scatter Chart Tutorial

Today, we bring the Google Charts Image Chart …

Venn Chart interfacing knowledge via yesterday’s Google Chart Image Chart Venn Chart User Text Tutorial … using it to encase some …
Scatter Chart interfacing logic … and along the way fix …
mobile platform User Text issues

… making distributing “Venn Chart” hardcodings into a dropdown selectable arrangement, because there are more commonalities than differences, really, and we do like to parameterize … even in the shower, with a fairly loud rendition of this, perhaps.

Here is our framework for parameterization, here, and into the future …

<title>Interfacing to Google Charts Image Chart Venn Chart or Scatter Chart - RJM Programming - November, 2023</title> <script type=text/javascript> var cht=location.search.split('cht=')[1] ? decodeURIComponent(location.search.split('cht=')[1].split('&')[0]) : "v"; var ctype=location.search.split('type=')[1] ? decodeURIComponent(location.search.split('type=')[1].split('&')[0]) : cht; var cname=(ctype == 'v' ? 'Venn Chart' : (ctype == 's' ? 'Scatter Chart' : '')); var cencodename=(ctype == 'v' ? 'Venn%20Diagram' : (ctype == 's' ? 'Scatter%20Chart' : '')); 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' : '')); var preachtt=(ctype == 'v' ? 'A|B|C' : (ctype == 's' ? 'Cats|Dogs' : '')); var prechtt=(ctype == 'v' ? '&chd=t:' + prenchtt + '&chdl=' + preachtt : (ctype == 's' ? '&chd=t:' + prenchtt + '&chdl=' + preachtt + '&chxt=x,y' : '')); var defchco=(ctype == 'v' ? 'ff0000,00ff00,0000ff' : (ctype == 's' ? 'FF0000|0000FF&chxt=x,y' : '')); 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" : "")); 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" : "")); // etcetera etcetera etcetera

… 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 our changed third draft image_venn.html Google Chart Image Chart Venn Chart or Scatter Chart interfacing web application you can also try below.

Did you know?

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’ve missed.

Take the way on macOS, but not iOS, using a web browser to get to YouTube, you can flag that a video should loop. Especially good for …

song obsessions …
earworms you need to salve

… and what about if your shower is taking an awfully long time?! Please be careful with moisture and devices, though, in the bathroom!

How does it happen? Right click the play button, and looping is there as the top option. Now back to that shower song obsession.

Previous relevant Google Chart Image Chart Venn Chart User Text Tutorial is shown below.

Google Chart Image Chart Venn Chart User Text Tutorial

We think a way to improve on our interfacing web application start regarding yesterday’s Google Chart Image Chart Venn Chart Interfacing Primer Tutorial would be to offer the user the chance to enter their own text onto the Venn Diagrams …

But we would say that.

… given what we learnt in Primary school … or should we say …

“Gryffindor Slytherin Ravenclaw Hufflepuff Junior Business College”

… and, yes, is that you, Aoife? What did you want to point out? After you swallow those Rice Bubbles, that is?! Class is waiting …

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Yes … miss something … and …

.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.

Use your words … okay … missing … don’t worry, the bus will wait … no … there’s no need to point … oh! …

… do you mean …

missing ewe … no … missing you … oh! … missing u … oh! … “Gryffindor Slytherin Ravenclaw Hufflepuff Juniour Business College” … quite so, Aiofe … 3 points for Hufflepuff!

Anyway we needed a fleshed out “function ask” to cater for potential onclick event logic catering for co-ordinates …

… in our changed second draft image_venn.html Google Chart Image Chart Venn Chart interfacing web application you can also try below.

Did you know?

As far as this WordPress blog’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’s GD image library as per …

Previous relevant Google Chart Image Chart Venn Chart Interfacing Primer Tutorial is shown below.

Google Chart Image Chart Venn Chart Interfacing Primer Tutorial

So, moving on from Google Charts Image Chart Map Charts, today, let’s turn our attention to Google Charts Image Chart Venn Charts which we were dead set curious about given work we’d done in the past regarding Venn Diagrams, which we referenced when we presented Flowchart and Venn Diagram and Mind Map Token Subject Emoji Tutorial some time back. Gobsmackingly good is the Google approach, again, as you’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’t you?! Didn’t you!?! Well, the answer is “Gryffindor Slytherin Ravenclaw Hufflepuff Junior Business College” … if you must know.

The sharing capabilities are good with the Google Charts approach too, given we are creating an HTML image, as our WordPress blog good ol’ 404.php has been woken up to address via …

<?php
if (strpos(('?' . $_SERVER['QUERY_STRING']), '?cht=') !== false || strpos(('?' . $_SERVER['QUERY_STRING']), '&cht=') !== false) { $theqs=str_replace('??','?',('?' . $_SERVER['QUERY_STRING'])); if (strpos($theqs, '?chs=') === false && strpos($theqs, '&chs=') === false) { $theqs='?chs=' . $newWidth . 'x' . $newHeight . '&' . explode('?', $theqs)[1]; } header('Content-Type: image/png'); echo file_get_contents('http://chart.googleapis.com/chart' . $theqs); exit; }
?>

Yes, all these Image Chart smarts come, essentially, from a “one line” calling URL! Who’d have believed it! Shiver me timbers!

Well, it’s early days with this Venn Chart interfacing where we allow for …

circle (think up to three) definition … and the rest, in this first draft (hoping you’ve done some reading) …
legend and title and colour selection user definitions dumped into a fairly unfriendly “the rest” Javascript prompt entry we ask of the user should they go ahead with the previous definition … and …
sharing and collaboration email and SMS functionality

… we hope you try via our “proof of concept” first draft image_venn.html Google Chart Image Chart Venn Chart interfacing web application you can also try below …

If this was interesting you may be interested in this too.

Your Numbers Game
Get clue	Your answer	Your Score
Clue?		Score 0/0

Leave a Reply Cancel reply

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Your Background Image

OnTopList

Recent Comments

Leave a Reply Cancel reply

Numbers Guessing Game

Your Numbers Game

Recent Posts

Categories

Meta

Tags

Your Background Image

OnTopList