<html>
<head>
<meta id='myviewport' name='viewport' content='width=device-width, initial-scale=1, minimum-scale=0.1, maximum-scale=8, user-scalable=yes' >
<title>Interfacing to Google Charts Image Chart Venn Chart - RJM Programming - November, 2023</title>
<script type=text/javascript>
var vals=[];
var origemailurl='mailto:?subject=My%20Venn%20Diagram%20...&body=';
var origsmsurl='sms:&body=My%20Venn%20Diagram%20...';
var smsee='';
var chd=location.search.split('chd=')[1] ? ('t:' + decodeURIComponent(location.search.split('chd=')[1].split('&')[0])).replace('t:t:', 't:').replace(/^t\:$/g, '') : "";
var therest=location.search.split('chd=')[1] ? document.URL.split(document.URL.split('#')[0].split('&chd=')[1].split('&')[0])[1].split('#')[0] : "";
var lasttext='';
var textnum=1;
var asmsurl='', aemailurl='', arest='';
var x=0, y=0;
var atstart=true;
var normalcall=true;
var mvp=null;
var elemLeft=0; // = elem.offsetLeft;
var elemTop=0; // = elem.offsetTop;
function ask(evt) {
var answer='', answertherest='';
if (lasttext != '' && evt && normalcall) {
document.getElementById('ilp').placeholder='Enter text and later click place for it on Venn Diagram to left (line feed is ~~)';
elemLeft = document.getElementById('myvenn').offsetLeft;
elemTop = document.getElementById('myvenn').offsetTop;
if (evt.touches) {
if (evt.touches[0].pageX) {
x = evt.touches[0].pageX + document.body.scrollLeft - elemLeft;
y = evt.touches[0].pageY + document.body.scrollTop - elemTop;
} else {
x = evt.touches[0].clientX + document.body.scrollLeft - elemLeft;
y = evt.touches[0].clientY + document.body.scrollTop - elemTop;
}
} else if (evt.clientX || ev.clientY) {
x = evt.clientX + document.body.scrollLeft - elemLeft;
y = evt.clientY + document.body.scrollTop - elemTop;
} else {
x = evt.pageX + document.body.scrollLeft - elemLeft;
y = evt.pageY + document.body.scrollTop - elemTop;
}
document.getElementById('dtext').innerHTML+='<p style="position:absolute;font-size:10px;font-family:Arial;left:' + x + 'px;top:' + y + 'px;z-index:98;">' + lasttext + '</p>';
document.getElementById('aemail').href+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(/\<br\>/g, String.fromCharCode(10)));
document.getElementById('asms').href+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(/\<br\>/g, String.fromCharCode(10)));
arest+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(/\<br\>/g, String.fromCharCode(10)));
therest+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(/\<br\>/g, String.fromCharCode(10)));
asmsurl+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(/\<br\>/g, String.fromCharCode(10)));
aemailurl+='&text' + textnum + '=' + encodeURIComponent('' + x + ',' + y + ',') + encodeURIComponent(lasttext.replace(/\<br\>/g, String.fromCharCode(10)));
document.getElementById('tdright').innerHTML=" <span id=spemail><a target=_blank href='mailto:?subject=My%20Venn%20Diagram%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>📧</a></span> <span id=spsms><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>📟</a></span><br><br> <input id=ilp onblur=\"lasttext=this.value.replace(/\~\~/g, '<br>'); this.value=''; this.placeholder='Click where you want ... ' + lasttext.replace(/\<br\>/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=''></input>";
//alert( document.getElementById('aemail').outerHTML );
//alert( document.getElementById('asms').outerHTML );
textnum++;
lasttext='';
} else if (!evt || !normalcall) {
if (chd == '') {
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:',''))));
} else {
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:',''))));
}
vals=[];
if (answer != null) {
answer=answer.trim();
if (answer.trim() != '') {
var delimis='';
for (var ii=0; ii<answer.length; ii++) {
if (delimis == '' && (answer.substring(ii).substring(0,1) < '0' || answer.substring(ii).substring(0,1) > '9')) {
delimis=answer.substring(ii).substring(0,1);
}
}
}
if (delimis != '') {
vals=answer.split(delimis);
}
if (vals.length == 6 || vals.length == 7) {
answertherest=prompt('Any optional legend or title argument snippets? Eg. &chdl=A|B|C&chtt=My%20Venn%20Diagram&chco=ff0000,00ff00,0000ff', therest);
if (answertherest == null) { answertherest=''; }
therest=answertherest.trim();
var aone=1;
var plotstring='';
var flds=[];
if (therest.indexOf('&text' + aone + '=') != -1) {
while (therest.indexOf('&text' + aone + '=') != -1) {
if (chd == '') {
plotstring=decodeURIComponent(therest.split('&text' + aone + '=')[1].split('&')[0]);
while (plotstring.indexOf(String.fromCharCode(10)) != -1) {
plotstring=plotstring.replace(String.fromCharCode(10), '<br>');
}
flds=plotstring.split(',');
if (eval('' + flds.length) >= 3) {
document.getElementById('dtext').innerHTML+='<p style="position:absolute;font-size:10px;font-family:Arial;left:' + flds[0] + 'px;top:' + flds[1] + 'px;z-index:98;">' + plotstring.split('' + flds[0] + ',' + flds[1] + ',')[1] + '</p>';
}
}
aone++;
textnum=aone;
}
}
//document.getElementById('myvenn').style.backgroundImage='URL(//www.rjmprogramming.com.au/ITblog/' + Math.min(600,window.innerWidth) + '/' + Math.min(400,window.innerHeight) + '/?cht=v&chd=t:' + encodeURIComponent(answer + therest) + ')';
document.getElementById('myvenn').src='//www.rjmprogramming.com.au/ITblog/' + Math.min(600,window.innerWidth) + '/' + Math.min(400,window.innerHeight) + '/?cht=v&chd=t:' + encodeURIComponent(answer) + therest + '';
if (document.getElementById('tdright').innerHTML == '') {
document.getElementById('tdright').innerHTML=" <span id=spemail><a target=_blank href='mailto:?subject=My%20Venn%20Diagram%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>📧</a></span> <span id=spsms><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>📟</a></span><br><br> <input id=ilp onblur=\"lasttext=this.value.replace(/\~\~/g, '<br>'); this.value=''; this.placeholder='Click where you want ... ' + lasttext.replace(/\<br\>/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=''></input>";
}
} else {
alert('Try again.');
ask(null);
}
}
}
atstart=false;
normalcall=true;
}
</script>
</head>
<body onload="mvp = document.getElementById('myviewport'); if (parent.window != window) { vals=[]; } else if (chd == '') { setTimeout(ask, 8000); }">
<script type=text/javascript>
var inbetween='';
if (navigator.userAgent.match(/Android|BlackBerry|iPhone|iPod|Opera Mini|IEMobile/i)) {
inbetween='</tr><tr>';
}
function documentwrite(dw) {
var tabbits=dw.split('<table');
if (tabbits.length > 1) {
var predw=tabbits[0];
return document.write(dw.replace(tabbits[0], '') + tabbits[0]);
}
return document.write(dw);
}
if (parent.window != window) {
vals=[];
if (parent.document.URL.indexOf('/ITblog') != -1) {
if (chd != '') {
documentwrite("<h1>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> regarding your Venn Chart</h1><h3>RJM Programming - November, 2023</h3><table style='width:100%;margin:0 0 0 0;'><tr><td id=tdleft><img onclick=ask(event); title='Google Chart Image Chart Venn Chart image ... to modify, please click' id=myvnn width=" + Math.min(600,window.innerWidth) + " height=" + Math.min(400,window.innerHeight) + " data-style='display:block;width:" + Math.min(600,window.innerWidth) + "px;height:" + Math.max(400,window.innerHeight) + "px;background:URL(//www.rjmprogramming.com.au/ITblog/" + window.innerWidth + "/" + window.innerHeight + "/?cht=v&chd=" + encodeURIComponent(chd) + ");background-size:cover;' src='//www.rjmprogramming.com.au/ITblog/" + Math.min(600,window.innerWidth) + "/" + Math.min(400,window.innerHeight) + "/?cht=v&chd=" + encodeURIComponent(chd) + therest + "'></img></td></tr><tr><td id=tdright style='border-left:1px dotted purple;vertical-align:top;'></td></tr></table>");
} else {
documentwrite("<h1>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> Venn Chart</h1><h3>RJM Programming - November, 2023</h3><table style='width:100%;margin:0 0 0 0;'><tr><td id=tdleft><img onclick='if (atstart) { normalcall=false; ask(null); normalcall=true; atstart=false; } else { ask(event); }' title='Google Chart Image Chart Venn Chart image ... to modify, please click' id=myvenn width=" + Math.min(600,window.innerWidth) + " height=" + Math.min(400,window.innerHeight) + " data-style='display:block;width:" + Math.min(600,window.innerWidth) + "px;height:" + Math.max(400,window.innerHeight) + "px;background:URL(//www.rjmprogramming.com.au/ITblog/" + window.innerWidth + "/" + window.innerHeight + "/?cht=v&chd=t:100,80,60,30,30,30,10);background-size:cover;' src='//www.rjmprogramming.com.au/ITblog/" + Math.min(600,window.innerWidth) + "/" + Math.min(400,window.innerHeight) + "/?cht=v&chd=t:100,80,60,30,30,30,10&chdl=A|B|C&chtt=My%20Venn%20Diagram&chco=ff0000,00ff00,0000ff'></img></td></tr><tr><td id=tdright style='border-left:1px dotted purple;vertical-align:top;'></td></tr></table>");
}
}
} else if (chd != '') {
documentwrite("<details><summary></summary><h1>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> regarding your Venn Chart</h1><h3>RJM Programming - November, 2023</h3></details><table style='width:100%;margin:0 0 0 0;'><tr><td id=tdleft><img onclick='if (atstart) { normalcall=false; ask(null); normalcall=true; atstart=false; } else { ask(event); }' title='Google Chart Image Chart Venn Chart image ... to modify, please click' id=myvnn width=" + Math.min(600,window.innerWidth) + " height=" + Math.min(400,window.innerHeight) + " data-style='display:block;width:" + Math.min(600,window.innerWidth) + "px;height:" + Math.max(400,window.innerHeight) + "px;background:URL(//www.rjmprogramming.com.au/ITblog/" + window.innerWidth + "/" + window.innerHeight + "/?cht=v&chd=" + encodeURIComponent(chd) + ");background-size:cover;' src='//www.rjmprogramming.com.au/ITblog/" + Math.min(600,window.innerWidth) + "/" + Math.min(400,window.innerHeight) + "/?cht=v&chd=" + encodeURIComponent(chd) + therest + "'></img></td>" + inbetween + "<td id=tdright style='border-left:1px dotted purple;vertical-align:top;'></td></tr></table>");
} else {
documentwrite("<h1>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> Venn Chart</h1><h3>RJM Programming - November, 2023</h3><table style='width:100%;margin:0 0 0 0;'><tr><td id=tdleft><img onclick='ask(event);' title='Google Chart Image Chart Venn Chart image ... to modify, please click' id=myvenn width=" + Math.min(600,window.innerWidth) + " height=" + Math.min(400,window.innerHeight) + " data-style='display:block;width:" + Math.min(600,window.innerWidth) + "px;height:" + Math.max(400,window.innerHeight) + "px;background:URL(//www.rjmprogramming.com.au/ITblog/" + window.innerWidth + "/" + window.innerHeight + "/?cht=v&chd=t:100,80,60,30,30,30,10);background-size:cover;' src='//www.rjmprogramming.com.au/ITblog/" + Math.min(600,window.innerWidth) + "/" + Math.min(400,window.innerHeight) + "/?cht=v&chd=t:100,80,60,30,30,30,10&chdl=A|B|C&chtt=My%20Venn%20Diagram&chco=ff0000,00ff00,0000ff'></img></td>" + inbetween + "<td id=tdright style='border-left:1px dotted purple;vertical-align:top;'></td></tr></table>");
}
</script>
<div id=dtext></div>
<input type=text style='position:absolute;top:-300px;left:-300px;' value=''></input>
</body>
</html>