Google Charts Emailing Primer Tutorial

Google Charts Emailing Primer Tutorial

Google Charts Emailing Primer Tutorial

The Google Charts (derived) webpages here at this rjmprogramming.com.au WordPress blog have all changed to add functionality for emailing snapshots of the Google Charts “midstream”. You can see a table of tutorials, and corresponding PHP code (with the last row being our one new bit of Javascript code) affected below …

File Relative Path Blog Search Link Email Functionality Code Difference Link
wordtree_chart.php–GETME PHP/Wordtree/ wordtree_chart.php–GETME wordtree_chart.php–GETME
treemap_chart.php-GETME PHP/TreemapChart/ treemap_chart.php-GETME treemap_chart.php-GETME
timeline_chart.php-GETME PHP/TimelineChart/ timeline_chart.php-GETME timeline_chart.php-GETME
sparkline.php-GETME PHP/Sparkline/ sparkline.php-GETME sparkline.php-GETME
scatter_chart_diff.php–GETME PHP/ScatterChart/ scatter_chart_diff.php–GETME scatter_chart_diff.php–GETME
scatter_chart.php-GETME PHP/ScatterChart/ scatter_chart.php-GETME scatter_chart.php-GETME
sankey_diagram.php-GETME PHP/SankeyDiagram/ sankey_diagram.php-GETME sankey_diagram.php-GETME
column_chart.php-GETME PHP/ColumnChart/ column_chart.php-GETME column_chart.php-GETME
pie_chart.php–GETME PHP/PieChart/ pie_chart.php–GETME pie_chart.php–GETME
pie_chart_diff.php-GETME PHP/PieChart/ pie_chart_diff.php-GETME pie_chart_diff.php-GETME
parabola_lgraph.php-GETME PHP/ParabolaLineGraph/ parabola_lgraph.php-GETME parabola_lgraph.php-GETME
Google_OrgChart.php-GETME PHP/OrgChart/ Google_OrgChart.php-GETME Google_OrgChart.php-GETME
motion_chart.php-GETME PHP/MotionChart/ motion_chart.php-GETME motion_chart.php-GETME
line_chart.php-GETME PHP/LineChart/ line_chart.php-GETME line_chart.php-GETME
linear_trendline.php-GETME PHP/LinearTrendline/ linear_trendline.php-GETME linear_trendline.php-GETME
intervals.php-GETME PHP/IntervalsChart/ intervals.php-GETME intervals.php-GETME
annotatedtimeline_chart.php-GETME PHP/AnnotatedTimelineChart/ annotatedtimeline_chart.php-GETME annotatedtimeline_chart.php-GETME
intensity_chart.php-GETME PHP/IntensityChart/ intensity_chart.php-GETME intensity_chart.php-GETME
histogram_chart.php-GETME PHP/HistogramChart/ histogram_chart.php-GETME histogram_chart.php-GETME
geo_chart.php-GETME PHP/GeoChart/ geo_chart.php-GETME geo_chart.php-GETME
gauge_chart.php-GETME PHP/GaugeChart/ gauge_chart.php-GETME gauge_chart.php-GETME
column_chart.php–GETME PHP/ColumnChart/ column_chart.php–GETME column_chart.php–GETME
column_chart_diff.php-GETME PHP/ColumnChart/ column_chart_diff.php-GETME column_chart_diff.php-GETME
chart_wrapper.php-GETME PHP/ChartWrapper/ chart_wrapper.php-GETME chart_wrapper.php-GETME
candlestick_chart.php-GETME PHP/CandlestickChart/ candlestick_chart.php-GETME candlestick_chart.php-GETME
calendar_chart.php-GETME PHP/CalendarChart/ calendar_chart.php-GETME calendar_chart.php-GETME
bubble_chart.php-GETME PHP/BubbleChart/ bubble_chart.php-GETME bubble_chart.php-GETME
bar_chart.php–GETME PHP/BarChart/ bar_chart.php–GETME bar_chart.php–GETME
bar_chart_diff.php-GETME PHP/BarChart/ bar_chart_diff.php-GETME bar_chart_diff.php-GETME
area_chart.php-GETME PHP/AreaChart/ area_chart.php-GETME area_chart.php-GETME
map.php-GETME PHP/Map/ map.php-GETME map.php-GETME
gchartgen.js_GETME gchartgen.js_GETME

Let’s now discuss some tactics that can work to be a bit objective about the task of making these changes in a methodical and systematic way.

  • If possible, have the change amount to the adjustment of one line of code … so we looked at one bit of Javascript called gchartgen.js called by each Google Chart application via … <script type="text/javascript" src="//www.rjmprogramming.com.au/gchartgen.js"></script> … the one (extra) line of code ( that is placed between <head> and </head> )
  • So where can gchartgen.js intervene to do its thing (which is to add an Email link down the bottom and allow HTML h1’s be clickable to Email, as well (quite often))? … onload functionality proved to be too crowded, and as this functionality is not mission-critical it is decided that it can be created with setTimeout(gcinit, 2000); … ie. roughly 2 seconds after onload event
  • Unit test this on one Google Chart scenario on local (MAMP) web server
  • When happy bring all Google Charts code over to local (MAMP) web server
  • Make a file of *GETME files via Linux command something like find . -name ‘*GETME’ 2> /dev/null > gclist.xxx
  • Manually filter out the entries that are not “relevant latest” from this list using vi (for instance) adjusting each relevant latest to go up one (eg. _GETME goes to -GETME or -GETME goes to –GETME)
  • Write a Korn shell script whose main lines of functionality look like
    #!/bin/ksh
    for f in `cat gclist.xxx`; do
    pf=`echo $f | sed '/-GETME/s///g' | sed '/_GETME/s///g'`
    nf=`echo $f | sed '/-GETME/s//--GETME/g' | sed '/_GETME/s//-GETME/g'`
    cat $f | sed '/<head>/s//<head> <script type="text/javascript" src="//www.rjmprogramming.com.au/gchartgen.js"></script>/g' > $nf
    cat $pf | sed '/<head>/s//<head> <script type="text/javascript" src="//www.rjmprogramming.com.au/gchartgen.js"></script>/g' > ${pf}_new
    cat ${pf}_new > $pf
    rm ${pf}_new
    done
    exit
  • Run this Korn Shell on the local (MAMP) web server (Linux) environment (on Mac, is Terminal application’s Bash environment)
  • Now for each Google Chart application …
    1. test it works on local (MAMP) web server
    2. upload it to live rjmprogramming.com.au place
    3. retest on live rjmprogramming.com.au place
  • To get the table above constructed we, roughly …
    1. updated this blog’s All Posts table … why? pourquoi? … the All Posts functionality has a lot in common to what we want, in a table, here … good to find linkages and commonalities with software
    2. went to the All Posts “code download table” and sorted for latest changed source code up the top
    3. start up Firefox web browser’s Firebug add on … why? pourquoi? … we want to get in under any Javascript client side (in this case, sorting) rearrangements (which View->Page Source is not good enough to show) .. so we can use a dynamic Javascript DOM tool like Firebug effectively (and strategically) here
    4. point at the table and use the Copy HTML option to paste the buffer over to a TextWrangler (text editor) session and create a standalone piece of HTML (with only the top “today” parts of the buffer) on the local (MAMP) web server, where it is unit tested on a local web browser ( eg. HTTP://localhost:8888/sometest.html ) over and over again until it works, in preparation for copying this into the live rjmprogramming.com.au WordPress blog post (ie. what you are reading here)
    5. check that it still looks okay, or not, in the scenario of being in the blog post

Here is a link to Google Chart Tools “spiritual home” … via Google.

Hope you try out some of the newly tweaked Google Charts functionality.

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

This entry was posted in eLearning, Event-Driven Programming, GUI, Projects, Software, Tutorials and tagged , , , , , , , , , , , , , , , , , , , , , , , . Bookmark the permalink.

19 Responses to Google Charts Emailing Primer Tutorial

  1. hi!,I like your writing so so much! percentage we keep in touch more approximately your post on AOL? I need an expert on this space to unravel my problem. May be that’s you! Taking a look forward to look you.

  2. Eve says:

    Hello, fajny tekst. Dawno nie sΕ‚uchaΕ‚em tak interesujΔ…cego tekstu

  3. You made some decent points there. I did a search on the subject matter and found most persons will approve with your website.

  4. Magnificent beat ! I wish to apprentice while you amend your web site, how can i subscribe for a blog website? The account aided me a acceptable deal. I had been a little bit acquainted of this your broadcast provided bright clear concept

  5. Simply desire to say your article is as surprising. The clearness in your post is just great and i can assume you are an expert on this subject. Well with your permission allow me to grab your feed to keep updated with forthcoming post. Thanks a million and please continue the rewarding work.

  6. Law & Legal says:

    Thanks a lot for sharing this with all folks you actually understand what you are talking about! Bookmarked. Please additionally seek advice from my web site =). We can have a hyperlink trade arrangement among us!

  7. Wow! Thank you! I constantly wanted to write on my site something like that. Can I include a portion of your post to my site?

  8. Wow, wonderful weblog structure! How lengthy have you ever been running a blog for? you make blogging look easy. The total glance of your web site is fantastic, let alone the content material!

  9. Marketing says:

    I carry on listening to the news update lecture about receiving boundless online grant applications so I have been looking around for the best site to get one. Could you tell me please, where could i get some?

  10. Quite good publish, thanks a great deal for sharing. Do you happen to have an RSS feed I can subscribe to?

  11. Car says:

    Normally I don’t learn post on blogs, but I wish to say that this write-up very forced me to check out and do it! Your writing taste has been amazed me. Thanks, quite nice article.

  12. Great web site. Lots of useful info here. I am sending it to some buddies ans also sharing in delicious. And obviously, thank you for your sweat!

  13. Canon Camera says:

    I do believe all the ideas you have offered to your post. They are really convincing and will certainly work. Nonetheless, the posts are very brief for newbies. Could you please prolong them a little from next time? Thank you for the post.

  14. his response says:

    Good post and right to the point. I don’t know if this is truly the best place to ask but do you guys have any ideea where to get some professional writers? Thank you :)

  15. concern says:

    Mighty effective outlook, thanks for blogging.. I value you discussing your point of view.. My web browsings seem full.. thank you. So content to get discovered this publish..

  16. Treadmill says:

    excellent post, very informative. I wonder why the opposite experts of this sector don’t understand this. You must continue your writing. I am sure, you have a great readers’ base already!

  17. aptitude says:

    I have recently started a blog, the information you provide on this web site has helped me greatly. Thanks for all of your time & work.

  18. intelligent says:

    Thanks, I have just been searching for info approximately this topic for ages and yours is the greatest I’ve came upon till now. But, what concerning the bottom line? Are you sure concerning the supply?

  19. I’m still learning from you, but I’m trying to achieve my goals. I absolutely liked reading all that is written on your blog.Keep the posts coming. I loved it!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>