{"id":51779,"date":"2021-02-26T03:01:00","date_gmt":"2021-02-25T17:01:00","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51779"},"modified":"2021-02-26T09:32:36","modified_gmt":"2021-02-25T23:32:36","slug":"google-chart-histogram-chart-pie-chart-html-tooltips-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-histogram-chart-pie-chart-html-tooltips-tutorial\/","title":{"rendered":"Google Chart Histogram Chart Pie Chart HTML Tooltips Tutorial"},"content":{"rendered":"
\"Google<\/a>

Google Chart Histogram Chart Pie Chart HTML Tooltips Tutorial<\/p><\/div>\n

Yesterday’s Google Chart Histogram Chart Pie Chart Tooltips Tutorial<\/a> got us going with tooltips, but with a limited “just text” feel to them, but if you have done some Google Charts tooltip<\/a> research you’ll know<\/font> the …<\/p>\n


\ntooltip: { trigger: 'both', isHtml: true<\/font> }
\n<\/code><\/p>\n

… option opens the door to a whole lot more, and today we start showing within the Pie Chart tooltip an HTML iframe whose src attribute points back at the calling Histogram Chart, completing that “reconstruction circle” started yesterday.<\/p>\n

These tooltips now occupy so much more “data space”, and so for these scenarios we use HTML form method=POST navigational arrangements, being that we are using serverside PHP web applications here …<\/p>\n\n\n\n\n\n
HTML form (Histogram Chart)<\/th>\n<\/tr>\n
\n
\n<form target=_blank id=mypieform action='\/\/www.rjmprogramming.com.au\/PHP\/PieChart\/pie_chart.php' method='POST' style='display:none;'>
\n<input type=hidden name=title value='' id=mypietitle><\/input>
\n<input type=hidden name=onclick value='y' id=mypieonclick><\/input>
\n<input type=hidden name=country value='' id=mypiecountry><\/input>
\n<input type=hidden name=popularity value='' id=mypiepopularity><\/input>
\n<input type=hidden name=r value='' id=mypier><\/input>
\n<input type=hidden name=c value='' id=mypiec><\/input>
\n<input type=hidden name=desc value='' id=mypiedesc><\/input>
\n<input type=hidden name=task value='' id=mypietask><\/input>
\n<input type=hidden name=data value='' id=mypiedata><\/input>
\n<input type=submit value=Go style=display:none; id=mypiego><\/input>
\n<\/form>
\n<\/code>\n<\/td>\n<\/tr>\n
PHP changes regarding this form<\/font> (Histogram Chart)<\/th>\n<\/tr>\n
\n
\n function infillit(urltgo) {
\n var pbitsare=decodeURIComponent(paramdata).split('~,'), iminis=0, imaxis=0, cntsare=[];
\n var ustg=urltgo.split('[%27');
\n var totnum=eval(-1 + eval('' + pbitsare.length));
\n var iut=0, jut=0;
\n utgo=urltgo;
\n if (tts.length > 0) {
\n if (tts[0] == '') {
\n

\n for (jut=1; jut<ustg.length; jut++) {
\n iminis=eval('' + ustg[jut].split('%20')[0]);
\n imaxis=-1;
\n if (ustg[jut].indexOf('%20to%20') != -1) { imaxis=eval('' + ustg[jut].split('%20to%20')[1].split(',')[0]); }
\n cntsare.push(eval('' + ustg[jut].split(',')[1].split(']')[0]));
\n

\n if (jut == 1) {
\n tts[0]=',' + String.fromCharCode(34) + '<P onmouseover=console.log(54);>Count: ' + cntsare[eval(-1 + jut)] + ' (' + eval(eval(eval('' + cntsare[eval(-1 + jut)]) * 100) \/ totnum).toFixed(1) + '%) <\/P>' + String.fromCharCode(34);<\/font>
\n } else {
\n tts.push(',' + String.fromCharCode(34) + '<P onmouseover=console.log(354);>Count: ' + cntsare[eval(-1 + jut)] + ' (' + eval(eval(eval('' + cntsare[eval(-1 + jut)]) * 100) \/ totnum).toFixed(1) + '%) <\/P>' + String.fromCharCode(34));<\/font>
\n }
\n

\n }
\n

\n for (iut=1; iut<pbitsare.length; iut++) {
\n for (jut=1; jut<ustg.length; jut++) {
\n iminis=eval('' + ustg[jut].split('%20')[0]);
\n imaxis=-1;
\n if (ustg[jut].indexOf('%20to%20') != -1) { imaxis=eval('' + ustg[jut].split('%20to%20')[1].split(',')[0]); }
\n if (eval('' + pbitsare[iut].split(']')[0].replace('+','')) >= eval('' + iminis) && (('' + imaxis) == '-1' || eval('' + pbitsare[iut].split(']')[0].replace('+','')) <= eval('' + imaxis))) {
\n if (tts[eval(-1 + jut)].indexOf(' made ') == -1) {
\n tts[eval(-1 + jut)]=tts[eval(-1 + jut)].replace(' <\/P>', ' made up of <a target=_blank title=Histogram href=' + document.URL + '>' + pbitsare[iut].split(']')[0].replace('+','') + ' <\/P>');<\/font>
\n } else {
\n tts[eval(-1 + jut)]=tts[eval(-1 + jut)].replace(' <\/P>', ' ' + pbitsare[iut].split(']')[0].replace('+','') + ' <\/P>');
\n }
\n }
\n }
\n }
\n

\n for (jut=1; jut<ustg.length; jut++) {
\n if (tts[eval(-1 + jut)].indexOf('<a') != -1) { tts[eval(-1 + jut)]=tts[eval(-1 + jut)].replace(' <\/P>', '<\/a><br><style> iframe { transform:scale(0.5);transform-origin:0px 0px; } <\/style><iframe src=' + document.URL + ' style=width:800px;height:800px;><\/iframe><\/P>'); }<\/font>
\n if (eval('' + tts.length) >= jut) {
\n utgo=utgo.replace(ustg[jut], ustg[jut].replace(',', ',' + String.fromCharCode(34) + encodeURIComponent(tts[eval(-1 + jut)].substring(2,eval(-1 + tts[eval(-1 + jut)].length))) + String.fromCharCode(34) + ','));
\n }
\n }
\n utgo=utgo.replace(\/\\]\\,\\[\/g, ']%20,%20[').replace(\/\\,\\[\/g, ',%20[').replace(\/\\[\\%27\/g,'[~').replace(\/\\%27\\,\/g,'~,');
\n tts=[''];
\n

\n }
\n }
\n

\n return utgo;
\n }
\n
\n function maybeothers(urltogo, ansistogo) {
\n if (ansistogo.substring(0,1).toLowerCase() == 'p') {
\n var returl=infillit(urltogo.replace(\/\\'\/g,'%27').replace(\/\\ \/g,'%20'));
\n if (eval('' + returl.length) > 900) {
\n if (returl.indexOf('title=') != -1) {
\n document.getElementById('mypietitle').value=decodeURIComponent(returl.split('title=')[1].split('&')[0]).replace(\/\\+\/g,' ');
\n }
\n if (returl.indexOf('country=') != -1) {
\n document.getElementById('mypiecountry').value=decodeURIComponent(returl.split('country=')[1].split('&')[0]).replace(\/\\+\/g,' ');
\n document.getElementById('mypietask').value=decodeURIComponent(returl.split('country=')[1].split('&')[0]).replace(\/\\+\/g,' ');
\n }
\n if (returl.indexOf('popularity=') != -1) {
\n document.getElementById('mypiepopularity').value=decodeURIComponent(returl.split('popularity=')[1].split('&')[0]).replace(\/\\+\/g,' ');
\n document.getElementById('mypiedesc').value=decodeURIComponent(returl.split('popularity=')[1].split('&')[0]).replace(\/\\+\/g,' ');
\n }
\n if (returl.indexOf('&r=') != -1) {
\n document.getElementById('mypier').value='1'; \/\/decodeURIComponent(returl.split('&r=')[1].split('&')[0]).replace(\/\\+\/g,' ');
\n }
\n if (returl.indexOf('&c=') != -1) {
\n document.getElementById('mypiec').value='1'; \/\/decodeURIComponent(returl.split('&c=')[1].split('&')[0]).replace(\/\\+\/g,' ');
\n }
\n if (returl.indexOf('data=') != -1) {
\n document.getElementById('mypiedata').value=decodeURIComponent(returl.split('data=')[1].split('&')[0]);
\n }
\n \/\/alert(document.getElementById('mypieform').innerHTML);
\n document.getElementById('mypiego').click();
\n return '';
\n } else {<\/font>
\n return returl;
\n }<\/font>
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'c') {
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'l') {
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'b') {
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'a') {
\n }
\n return urltogo.replace(\/\\'\/g,'%27').replace(\/\\ \/g,'%20');
\n }
\n<\/code>\n<\/td>\n<\/tr>\n<\/table>\n

The changed<\/a> histogram_chart.php<\/a> Histogram Chart<\/a> can interface to the changed<\/a> pie_chart.php<\/a> Pie Chart<\/a>, and say …<\/p>\n

\nHere’s looking at you, kid.\n<\/p><\/blockquote>\n

\n

\n

Previous relevant Google Chart Histogram Chart Pie Chart Tooltips Tutorial<\/a> is shown below.<\/p>\n

\"Google<\/a>

Google Chart Histogram Chart Pie Chart Tooltips Tutorial<\/p><\/div>\n

The interface between Google Charts<\/a> Histogram Chart<\/a> interfaces to Pie Chart<\/a> lost “data intelligence” that we want to pass on to the Pie Chart today.<\/p>\n

The mechanism by which we pass this list of Histogram data points (that go to make up the data source behind the svg graphics in the Histogram Chart) is via a Pie Chart’s tooltip<\/a> capabilities …<\/p>\n

\nTooltips are the little boxes that pop up when you hover over something. (Hovercards are more general, and can appear anywhere on the screen; tooltips are always attached to something, like a dot on a scatter chart, or a bar on a bar chart.)\n<\/p><\/blockquote>\n

By doing the changes<\/font> below for tooltips (in the changed<\/a> histogram_chart.php<\/a>), further to Google Chart Histogram Chart Pie Chart Interface Tutorial<\/a>, in the interfaced to Pie Charts …<\/p>\n


\n function analyzesvg(svgsisvgsinnerHTML) {
\n \/\/ ... jump to end of function below ...
\n var dbits=lh.split('&data=');
\n var urlgo=dbits[0].replace('\/HistogramChart', '\/PieChart').replace('histogram_chart.php', 'pie_chart.php').replace('&task=','&country=').replace('&desc=','&popularity=') + '&desc=' + teledata;
\n if (urlgo.indexOf('title=&country=&onclick=y&popularity=&desc=&') != -1) {
\n urlgo=urlgo.replace('&popularity=&', '&popularity=' + '\" . ('' . $_POST['desc']) . \"&').replace('&country=&', '&country=' + '\" . ('' . $_POST['task']) . \"&').replace('title=&', 'title=' + '\" . ('' . $_POST['title']) . \"&');
\n }
\n if (oblurb != null) {
\n ohref=maybeothers<\/font>(urlgo,ans.substring(0,1).toLowerCase());
\n window.open(ohref,'_blank','top=20,left=20,width=800,height=660');
\n } else {
\n ohref=maybeothers<\/font>(urlgo,ans.substring(0,1).toLowerCase());
\n location.href=ohref;
\n }
\n } else if (pardata == '') {
\n location.href=document.URL + '?title=\" . urlencode(str_replace(\",\",\"`\",$GETtitle)) . '&task=' . urlencode($GETtask) . '&onclick=y&desc=' . urlencode($GETdesc) . \"&data=' + ourencodeURIComponent(ans);
\n } else {
\n location.href=document.URL.replace(pardata, ourencodeURIComponent(ans));
\n }
\n }
\n }
\n

\n function infillit(urltgo) {
\n var pbitsare=decodeURIComponent(paramdata).split('~,'), iminis=0, imaxis=0, cntsare=[];
\n var ustg=urltgo.split('[%27');
\n var totnum=eval(-1 + eval('' + pbitsare.length));
\n var iut=0, jut=0;
\n utgo=urltgo;
\n if (tts.length > 0) {
\n if (tts[0] == '') {
\n

\n for (jut=1; jut<ustg.length; jut++) {
\n iminis=eval('' + ustg[jut].split('%20')[0]);
\n imaxis=-1;
\n if (ustg[jut].indexOf('%20to%20') != -1) { imaxis=eval('' + ustg[jut].split('%20to%20')[1].split(',')[0]); }
\n cntsare.push(eval('' + ustg[jut].split(',')[1].split(']')[0]));
\n

\n if (jut == 1) {
\n tts[0]=',' + String.fromCharCode(34) + 'Count: ' + cntsare[eval(-1 + jut)] + ' (' + eval(eval(eval('' + cntsare[eval(-1 + jut)]) * 100) \/ totnum).toFixed(1) + '%) ' + String.fromCharCode(34);
\n } else {
\n tts.push(',' + String.fromCharCode(34) + 'Count: ' + cntsare[eval(-1 + jut)] + ' (' + eval(eval(eval('' + cntsare[eval(-1 + jut)]) * 100) \/ totnum).toFixed(1) + '%) ' + String.fromCharCode(34));
\n }
\n

\n }
\n

\n for (iut=1; iut<pbitsare.length; iut++) {
\n for (jut=1; jut<ustg.length; jut++) {
\n iminis=eval('' + ustg[jut].split('%20')[0]);
\n imaxis=-1;
\n if (ustg[jut].indexOf('%20to%20') != -1) { imaxis=eval('' + ustg[jut].split('%20to%20')[1].split(',')[0]); }
\n if (eval('' + pbitsare[iut].split(']')[0].replace('+','')) >= eval('' + iminis) && (('' + imaxis) == '-1' || eval('' + pbitsare[iut].split(']')[0].replace('+','')) <= eval('' + imaxis))) {
\n if (tts[eval(-1 + jut)].indexOf(' made ') == -1) {
\n tts[eval(-1 + jut)]=tts[eval(-1 + jut)].replace(' ' + String.fromCharCode(34), ' made up of ' + pbitsare[iut].split(']')[0].replace('+','') + ' ' + pbitsare[iut].split(']')[0].replace('+','') + ' ' + String.fromCharCode(34));
\n } else {
\n tts[eval(-1 + jut)]=tts[eval(-1 + jut)].replace(' ' + String.fromCharCode(34), ' ' + pbitsare[iut].split(']')[0].replace('+','') + ' ' + String.fromCharCode(34));
\n }
\n }
\n }
\n }
\n

\n for (jut=1; jut<ustg.length; jut++) {
\n if (eval('' + tts.length) >= jut) {
\n utgo=utgo.replace(ustg[jut], ustg[jut].replace(',', ',' + String.fromCharCode(34) + encodeURIComponent(tts[eval(-1 + jut)].substring(2,eval(-3 + tts[eval(-1 + jut)].length))) + String.fromCharCode(34) + ','));
\n }
\n }
\n utgo=utgo.replace(\/\\]\\,\\[\/g, ']%20,%20[').replace(\/\\,\\[\/g, ',%20[').replace(\/\\[\\%27\/g,'[~').replace(\/\\%27\\,\/g,'~,');
\n tts=[''];
\n

\n }
\n }
\n

\n return utgo;
\n }
\n

\n function maybeothers(urltogo, ansistogo) {
\n if (ansistogo.substring(0,1).toLowerCase() == 'p') {
\n return infillit(urltogo.replace(\/\\'\/g,'%27').replace(\/\\ \/g,'%20'));
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'c') {
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'l') {
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'b') {
\n } else if (ansistogo.substring(0,1).toLowerCase() == 'a') {
\n }
\n return urltogo.replace(\/\\'\/g,'%27').replace(\/\\ \/g,'%20');
\n }<\/font>
\n<\/code><\/p>\n

… we make it so that to look at Pie Chart you could reconstruct the Histogram behind the scenes, as you can try in yesterday’s posting.<\/p>\n

\n

\n

Previous relevant Google Chart Histogram Chart Pie Chart Interface Tutorial<\/a> is shown below.<\/p>\n

\"Google<\/a>

Google Chart Histogram Chart Pie Chart Interface Tutorial<\/p><\/div>\n

When we presented Google Chart Histogram Chart Select Event Synergy Tutorial<\/a> it represented a Google Charts<\/a> …<\/p>\n


\nHistogram Chart<\/a> interfaces to Pie Chart<\/a>
\n<\/code><\/p>\n

… tool. Recently, we revisited the interface (from Histogram …<\/p>\n


\nRoll of a Die Histogram Chart<\/a>
\n<\/code><\/p>\n

… Chart) aspects to these arrangements, via that menu which appears when you click a rectangle of the Histogram, and found that it ended in a blank Pie Chart (ie. no chart shows) you can simulate via …<\/p>\n


\nClick to see the Pie Chart you have when you are not having a Pie Chart<\/a>
\n<\/code> <\/p>\n

Believe it or not, to go from the look of above to the better look (and result) of below …<\/p>\n


\nClick to see the Pie Chart as a result of the fixed interface to the Histogram Chart<\/a>
\n<\/code><\/p>\n

… it involved, ostensibly, a one character<\/font> change in the code? Huh?! And it is that “Huh?!” reaction we want to talk about mostly today. How did we arrive at this histogram_chart.php<\/a> very small change<\/a>?<\/p>\n

To start with, we need to explain that the graphics of the Histogram Chart are formed via svg<\/a> (Scalable Vector Graphics), and we need to “data scrape”<\/a> these graphics in order to reform a new Pie Chart URL, especially its “data” argument.<\/p>\n

And so, the next step to debugging our issue, remembering that characteristic to the code, above, was top search through it for “svg” and so got to<\/font> …<\/p>\n


\n var huhsvg=null;
\n if (pardata == '') {
\n lh=document.URL + '?title=\" . urlencode(str_replace(\",\",\"`\",$GETtitle)) . '&task=' . urlencode($GETtask) . '&onclick=y&desc=' . urlencode($GETdesc) . \"&data=' + ourencodeURIComponent(ans);
\n } else {
\n lh=document.URL.replace(pardata, ourencodeURIComponent(ans));
\n }
\n if (teledata == '') {
\n huhsvg=document.getElementsByTagName('svg');
\n if (1 == 1) { \/\/huhsvg.length != 0) {
\n analyzesvg(document.body.innerHTML);<\/font> \/\/ mobile fix
\n }
\n }
\n<\/code><\/p>\n

… as the “honing in” Javascript function where the issue probably resides, helping with the “where to look” part to a solution.<\/p>\n

Okay, there is something else interesting above with the problematic Pie Chart URL’s “data” argument (array of structures) as per …<\/p>\n


\n&data=%20,[%270%20to%201%27,0]%20,[%272%20to%203%27,0]%20,[%274%20to%205%27,0]%20,[%276%20to%207%27,0]%20,[%278%20and%20up%27,0]
\n ... via decodeURIComponent becaomes ...
\n&data= ,['0 to 1',0] ,['2 to 3',0] ,['4 to 5',0] ,['6 to 7',0] ,['8 and up',0]
\n<\/code><\/p>\n

The string parts of the structure look feasible and apt for the resultant Pie Chart, but all those “0” (zero) counts don’t look apt, and are no doubt causing the Pie Chart graphics to not be there, as a hint for helping with the “what to look out for” part to a solution.<\/p>\n

Sometimes a “what to look out for” is obvious in a small Javascript function. Alas not so with getting to that final change<\/font> in …<\/p>\n


\n function analyzesvg(svgsisvgsinnerHTML) {
\n \/\/ ,['Work',11]
\n \/\/ var teledata='&data=,';
\n var ismobile=false;
\n var ix=0, xspo, spo, lastones, isvgs=0, its=0, jts=0, firsty=-1.0, ts, thisones, prevone='', xs, zs, ns, thist='', telex='', telez='', teleih='', tdsuff='', tdelim='', tsuffix=' ';
\n var svgs=document.getElementsByTagName('svg');
\n
\n if (svgsisvgsinnerHTML != '') {
\n if (navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) ismobile=false; \/\/true;
\n }
\n

\n for (isvgs=0; isvgs<svgs.length; isvgs++) {
\n if (svgsisvgsinnerHTML == '') {
\n svgsisvgsinnerHTML=svgs[isvgs].innerHTML;
\n }
\n if (svgsisvgsinnerHTML.indexOf('<text ') != -1) {
\n teledata='&data=,';
\n ts=svgsisvgsinnerHTML.split('text-anchor=\"middle\"');<\/font>
\n

\n\/\/0 ... <text fill=\"#444444\" stroke-width=\"0\" stroke=\"none\" font-size=\"14\" font-family=\"Arial\" y=\"425.9\" x=\"161.5\"
\n\/\/1 ... >0<\/text><\/g><g><text fill=\"#444444\" stroke-width=\"0\" stroke=\"none\" font-size=\"14\" font-family=\"Arial\" y=\"425.9\" x=\"277.1\"
\n\/\/2 ... >10<\/text><\/g><g><text fill=\"#444444\" stroke-width=\"0\" stroke=\"none\" font-size=\"14\" font-family=\"Arial\" y=\"425.9\" x=\"392.70000000000005\"
\n\/\/3 ...
\n lastones=ts[0].split('<');
\n for (its=1; its<ts.length; its++) {
\n xspo=ts[its].split('>')
\n thisones=xspo[1].split('<');
\n if (tdelim == '') {
\n prevone=thisones[0];
\n if (ismobile == true) alert('ts[' + its + ']=' + ts[its] + ' thisones[0]=' + thisones[0]);
\n } else if (tsuffix == ' ' && Math.abs(Math.abs(eval(prevone) - eval(thisones[0])) - 1) < 0.001 && (\"\" + thisones[0] + \"\" + prevone).indexOf(\".\") == -1) {
\n if (ismobile == true) alert('2 ts[' + its + ']=' + ts[its] + ' thisones[0]=' + thisones[0]);
\n tsuffix='';
\n teledata+=tsuffix + tdsuff;
\n } else if (tsuffix == ' ' && (\"\" + thisones[0] + \"\" + prevone).indexOf(\".\") == -1) {
\n if (ismobile == true) alert('3 ts[' + its + ']=' + ts[its] + ' thisones[0]=' + thisones[0]);
\n tsuffix=' to ' + eval(thisones[0] - 1);
\n teleih+=tsuffix.replace(' ','');
\n teledata+=tsuffix.replace(' ','') + tdsuff;
\n tsuffix=' and up';
\n if (eval(1 + its) < eval(ts.length)) {
\n if (ismobile == true) alert(eval(1 + its) + ' < ' + ts.length);
\n if (ismobile == true) alert(ts[eval(1 + eval(its))]);
\n jts=eval(thisones[0]);
\n \/\/thisones=ts[eval(1 + eval(its))].replace('>','').split('<');
\n spo=ts[eval(1 + eval(its))].split('>')
\n thisones=spo[1].split('<');
\n if (eval(thisones[0] - 1) == eval(jts)) {
\n tsuffix='';
\n } else {
\n tsuffix=' to ' + eval(thisones[0] - 1);
\n }
\n \/\/thisones=ts[its].replace('>','').split('<');
\n xspo=ts[its].split('>')
\n thisones=xspo[1].split('<');
\n }
\n } else if (tsuffix == ' ') {
\n if (ismobile == true) alert('4 ts[' + its + ']=' + ts[its] + ' thisones[0]=' + thisones[0]);
\n tsuffix=' and up';
\n teledata+=tsuffix.replace(' ','') + tdsuff;
\n } else if (Math.abs(Math.abs(eval(prevone) - eval(thisones[0])) - 1) < 0.001 && (\"\" + thisones[0] + \"\" + prevone).indexOf(\".\") == -1) {
\n if (ismobile == true) alert('5 ts[' + its + ']=' + ts[its] + ' thisones[0]=' + thisones[0]);
\n tsuffix='';
\n } else if ((\"\" + thisones[0] + \"\" + prevone).indexOf(\".\") == -1) {
\n if (ismobile == true) alert('6 ts[' + its + ']=' + ts[its] + ' thisones[0]=' + thisones[0]);
\n tsuffix=' and up';
\n if (eval(1 + its) < eval(ts.length)) {
\n \/\/alert(eval(1 + its) + '< ' + ts.length);
\n \/\/alert(ts[eval(1 + eval(its))]);
\n jts=eval(thisones[0]);
\n \/\/thisones=ts[eval(1 + eval(its))].replace('>','').split('<');
\n spo=ts[eval(1 + eval(its))].split('>')
\n thisones=spo[1].split('<');
\n if (eval(thisones[0] - 1) == eval(jts)) {
\n tsuffix='';
\n } else {
\n tsuffix=' to ' + eval(thisones[0] - 1);
\n }
\n \/\/thisones=ts[its].replace('>','').split('<');
\n xspo=ts[its].split('>')
\n thisones=xspo[1].split('<');
\n }
\n } else {
\n if (ismobile == true) alert('7 ts[' + its + ']=' + ts[its] + ' thisones[0]=' + thisones[0]);
\n tsuffix=' and up';
\n }
\n if (ismobile == true) alert('a');
\n telez+=tdelim + '0';
\n if (ismobile == true) alert('aa');
\n teleih+=tdelim + thisones[0] + tsuffix.replace(' ','');
\n if (ismobile == true) alert('aaa');
\n teledata+=tdelim + \"['\" + thisones[0] + tsuffix.replace(' ','') + tdsuff;
\n if (ismobile == true) alert('aaaa');
\n thist = '<' + lastones[-1 + lastones.length] + 'text-anchor=\"middle\">' + thisones[0] + '<\/text>';
\n if (thist.indexOf('<text text-anchor=') != -1) {
\n \/\/alert(ts[its]);
\n xspo=ts[its].split('font-');
\n thist = '<' + xspo[0] + ' text-anchor=\"middle\">' + thisones[0] + '<\/text>';
\n }
\n if (ismobile == true) alert('aaaaa');
\n thisones=thist.split(' x=\"');
\n if (ismobile == true) alert(thist);
\n lastones=thisones[1].split('\"');
\n if (ismobile == true) alert('a7');
\n telex+=tdelim + lastones[0];
\n if (ismobile == true) alert(teledata);
\n lastones=ts[its].split('<g><');
\n tdelim=',';
\n tdsuff=\"',0]\";
\n }
\n if (ismobile == true) alert(1);
\n xs=telex.split(',');
\n if (ismobile == true) alert(11);
\n zs=teleih.split(',');
\n if (ismobile == true) alert(111);
\n ns=telez.split(',');
\n if (ismobile == true) alert(1111);
\n ts=svgsisvgsinnerHTML.split('<rect ');
\n if (ismobile == true) alert(ts.length + ' ... ' + teledata + ' +++ ' + ts[1]);
\n if (ismobile == true) alert(teledata);
\n for (its=3; its<ts.length; its++) {
\n if (ismobile == true) alert(ts[its]);
\n thisones=(' ' + ts[its]).replace(' x= ',' x=').split(' x=\"');
\n if ((' ' + ts[its]).replace(' x= ','x=').indexOf(' x=\"') != -1) {
\n lastones=thisones[1].split('\"');
\n } else if ((' ' + ts[its]).replace(' x= ','x=').indexOf(' x=') != -1) {
\n thisones=ts[its].replace(' x= ',' x=').split(' x=');
\n lastones=thisones[1].substring(1).split(thisones[1].substring(0,1));
\n } else {
\n thisones=(' ' + ts[its]).replace(' x= ',' x=').split(' x=\"');
\n lastones='-999\"'.split('\"');
\n }
\n \/\/if (eval(its) < 5 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) alert(lastones[0] + ' vs ' + ts[its]);
\n if (ts[its].indexOf('height=\"1\"') == -1 && ts[its].indexOf('height=\"') != -1 && ts[its].indexOf('fill-opacity=') == -1) {
\n for (jts=0; jts<xs.length; jts++) {
\n \/\/if (zs[jts].indexOf('3') != -1 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) alert(eval(lastones[0]) + ' - ' + eval(xs[jts]));
\n \/\/if (jts == 0 && navigator.userAgent.match(\/Android|BlackBerry|iPhone|iPad|iPod|Opera Mini|IEMobile\/i)) alert(telex + ' ... ' + eval(lastones[0]) + ' - ' + eval(xs[jts]));
\n if (Math.abs(eval(lastones[0]) - eval(xs[jts])) < 1.8<\/font>) { \/\/ used to be 1.0 (22\/2\/2021)
\n if (ismobile == true) alert(\"(\" + teledata + \").replace('\" + zs[jts] + ',' + ns[jts] + \"','\" + zs[jts] + ',' + eval(1 + ns[jts]) + \"')=\" + teledata.replace(zs[jts] + ',' + ns[jts], zs[jts] + ',' + eval(1 + ns[jts])));
\n teledata=teledata.replace(\"'\" + zs[jts] + \"',\" + ns[jts], \"'\" + zs[jts] + \"',\" + eval(1 + eval(ns[jts])));
\n if (ismobile == true) alert(teledata);
\n ns[jts]=eval(1 + eval(ns[jts]));
\n }
\n }
\n }
\n }
\n }
\n }
\n \/\/ \/\/localhost:8888\/PHP\/HistogramChart\/histogram_chart.php?title=Lengths%20of%20dinosaurs,%20in%20meters&onclick=y&task=Dinosaur&desc=Length&data=,%20[~wrgw~,6]%20,%20[~ewgwsr~,6]%20,%20[~shbtdgjnrf~,4]%20,%20[~ewsgerxfhrft~,4]%20,%20[~esgrshtdhjn~,3]
\n \/\/alert(teledata);
\n \/\/return teledata;
\n }
\n<\/code><\/p>\n

All those “ismobile” alert popup box calls in the code above were already there, sussing out the logic needed for Google Chart Histogram Chart Select Event Synergy Tutorial<\/a>, no doubt, which indicates one way in which to approach the debugging of the issue, some ways to this, for us, being …<\/p>\n