{"id":19665,"date":"2016-01-23T03:01:03","date_gmt":"2016-01-22T17:01:03","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=19665"},"modified":"2016-01-23T14:21:40","modified_gmt":"2016-01-23T04:21:40","slug":"google-chart-histogram-chart-select-event-primer-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-histogram-chart-select-event-primer-tutorial\/","title":{"rendered":"Google Chart Histogram Chart Select Event Primer Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Google Chart Histogram Chart Select Event Primer Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart_select_event.jpg\" title=\"Google Chart Histogram Chart Select Event Primer Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Google Chart Histogram Chart Select Event Primer Tutorial<\/p><\/div>\n<p>Today it&#8217;s the turn of <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 Chart<\/a> <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Histogram Chart'>Histogram Charts<\/a> to get them working for their <a target=_blank title='Select event information from Google' href='https:\/\/developers.google.com\/chart\/interactive\/docs\/basic_interactivity'>Select event<\/a>, which is like a mobile touch event and non-mobile click event on the Google Chart of interest.<\/p>\n<p>We believe in packing this Select event with business logic, and we think, for a Histogram Chart scenario it would be good to calculate the &#8230;<\/p>\n<ul>\n<li>Average (or mean) value<\/li>\n<li>Median (or middle) value<\/li>\n<li>Mode (or most numerously occurring) value<\/li>\n<\/ul>\n<p> &#8230; for the Histogram data set.  We do Dinosaur lengths today with the tutorial picture, but am sure you could well imagine a Real Estate Histogram of auction house or unit sale prices in a certain area (where the industry here in Australia is often interested in Median values).<\/p>\n<p>Software wise our new Google Chart Histogram Chart (Select event) integration involved &#8230;<\/p>\n<ul>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php--GETME\" title=\"histogram_chart.php\" target=\"_blank\">histogram_chart.php<\/a> <a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/Geographicals\/diff.php?one=http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php--GETME\" title=\"histogram_chart.php\" target=\"_blank\">changes<\/a> (to cater for select event (mobile touch) functionality) and <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php\" title='click picture'>live run<\/a> link<\/li>\n<\/ul>\n<p>Link to Google Chart Tools &#8220;spiritual home&#8221; &#8230; <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.\n'>via Google<\/a>.<br \/>\nLink to Google Chart Histogram Charts information &#8230; <a target=_blank href='https:\/\/developers.google.com\/chart\/interactive\/docs\/gallery\/histogram' title='Histogram Chart'>via Google<\/a>.<br \/>\nLink to our previous <a target=_blank title='PHP\/Javascript\/HTML Google Chart Histogram Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/phpjavascripthtml-google-chart-histogram-tutorial\/'>PHP\/Javascript\/HTML Google Chart Histogram Tutorial<\/a>.<\/p>\n<p>This extra &#8216;select&#8217; event functionality, available via the suffix \u201c&#038;onclick=y\u201d applied to the Google Chart Histogram Chart title, flows on directly to the iPad iOS App we created and talked about, last, with <a target=_blank href='https:\/\/www.rjmprogramming.com.au\/ITblog\/xcode-swift-ios-application-end-game-primer-tutorial\/' title='Xcode Swift iOS Application End Game Primer Tutorial'>Xcode Swift iOS Application End Game Primer Tutorial<\/a>.<\/p>\n<p>So please try creating your own emailable Google Chart live run for &#8230;<\/p>\n<ul>\n<li><a href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php\" title=\"histogram_chart.php\" target=\"_blank\">Histogram Chart<\/a><\/li>\n<li>\n<form target='_blank' action='http:\/\/www.rjmprogramming.com.au\/PHP\/HistogramChart\/histogram_chart.php' method='POST'>\n<input type='hidden' name='title' value='Lengths of dinosaurs, in meters'><\/input><br \/>\n<input type='hidden' name='onclick' value='y'><\/input><br \/>\n<input type='hidden' name='task' value='Dinosaur'><\/input><br \/>\n<input type='hidden' name='desc' value='Length'><\/input><br \/>\n<input type='hidden' name='data' value=',[~Acrocanthosaurus (top-spined lizard)~, 12.2],[~Albertosaurus (Alberta lizard)~, 9.1],[~Allosaurus (other lizard)~, 12.2],[~Apatosaurus (deceptive lizard)~, 22.9],[~Archaeopteryx (ancient wing)~, 0.9],[~Argentinosaurus (Argentina lizard)~, 36.6],[~Baryonyx (heavy claws)~, 9.1],[~Brachiosaurus (arm lizard)~, 30.5],[~Ceratosaurus (horned lizard)~, 6.1],[~Coelophysis (hollow form)~, 2.7],[~Compsognathus (elegant jaw)~, 0.9],[~Deinonychus (terrible claw)~, 2.7],[~Diplodocus (double beam)~, 27.1],[~Dromicelomimus (emu mimic)~, 3.4],[~Gallimimus (fowl mimic)~, 5.5],[~Mamenchisaurus (Mamenchi lizard)~, 21.0],[~Megalosaurus (big lizard)~, 7.9],[~Microvenator (small hunter)~, 1.2],[~Ornithomimus (bird mimic)~, 4.6],[~Oviraptor (egg robber)~, 1.5],[~Plateosaurus (flat lizard)~, 7.9],[~Sauronithoides (narrow-clawed lizard)~, 2.0],[~Seismosaurus (tremor lizard)~, 45.7],[~Spinosaurus (spiny lizard)~,12.2],[~Supersaurus (super lizard)~,30.5],[~Tyrannosaurus (tyrant lizard)~,15.2],[~Ultrasaurus (ultra lizard)~,30.5],[~Velociraptor (swift robber)~,1.8]'><\/input><br \/>\n<input type='submit' value='Dinosaur example of tutorial picture'><\/input><\/form>\n<\/li>\n<\/ul>\n<p>A curiosity that came up while calculating the Median value of an even number of numbers got explained <a target=_blank title='Explanation' href='https:\/\/www.google.com.au\/search?q=how+do+you+determine+median+of+an+even+number+of+numbers&#038;ie=utf-8&#038;oe=utf-8&#038;gws_rd=cr&#038;ei=zumhVtqcNOe3mAXkjomQDA\\'>here<\/a> &#8230; thanks.<\/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='#d19665' onclick='var dv=document.getElementById(\"d19665\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/google-chart\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d19665' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Today it&#8217;s the turn of Google Chart Histogram Charts to get them working for their Select event, which is like a mobile touch event and non-mobile click event on the Google Chart of interest. We believe in packing this Select &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-chart-histogram-chart-select-event-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":[400,513,518,565,652,861,932,997,1319],"class_list":["post-19665","post","type-post","status-publish","format-standard","hentry","category-elearning","category-event-driven-programming","category-gui","category-tutorials","tag-event","tag-google","tag-google-chart","tag-histogram","tag-javascript","tag-onclick","tag-php","tag-programming","tag-tutorial"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19665"}],"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=19665"}],"version-history":[{"count":11,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19665\/revisions"}],"predecessor-version":[{"id":19687,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/19665\/revisions\/19687"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=19665"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=19665"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=19665"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}