Friday 2 March 2018

Interactive charts for family history bloggers

Producing a visual interactive chart for your Blogger blog

While most genealogy programs will produce a csv or spreadsheet chart of some sort, they are usually not friendly for Blogger blogs. For those not using TNG site building software or Webtrees there are some other options. Two of the simplest options are outlined below.

An organisational chart using Google Slides


  1. On a blank slide choose Insert - Diagram
  2. Select from the range of organisational styles available
  3. Choose how many levels to display, the options are 3,4 or 5. On my slide I chose three. 
  4. Choose a colour then add the chart to the blank slide. 
  5. Modify the text and add the links to your blog posts. The text in the slide above is Roboto font, size 18, white, bold and each name is linked to an individual post on my Earlier Years blog.
  6. Select the whole chart and drag to enlarge to fit the widescreen slide
  7. Under the file menu choose publish to the web. Any changes you subsequently make, will be automatically updated.
  8. Choose embed - this one is the small size, copy and paste the embed code into the HTML editor of your blog.
*Alternate strategy when a diagram does not meet your needs
Start with a blank slide, insert a basic shape, fill with colour, double click in it to add generic text and format the font and size. Now duplicate as many of that shape as needed, arrange on slide then use elbow joiners to link the shapes. Add the names and links to the shapes. Proceed as detailed above.
Make a copy of your slide in Google Drive and rename to Template - blog family tree so that you can use the same slide for a different family without affecting your embedded publication.

Using a Google spreadsheet

A pedigree view can be simulated in a few different methods in spreadsheets. This is a simple one.  Here's a link to a diagrammatic spreadsheet of  Hannah's ancestors created in Google sheets.

  • I've used three columns and enough rows to allow for the descendancy to show. 
  • The cells have added colour and links added to individual posts.
  • Under the file menu choose publish to the web. Any changes you subsequently make, will be automatically updated.
  • Choose embed - copy and paste the embed code into the HTML editor of your blog.
  • The same spreadsheet is shown below published to the web and embedded here. 
  • The embed code does not have any details for height and width so only shows this small scrollable box.





This one has some added HTML in the code to improve the size of the display.


Warning: if you copy from here do paste into a plain text editor such as notepad, check and compare it before adding to your embed code.
Paste in the embed HTML then add in the code in red after the word  iframe and before src=

frameborder="0" headers="false" height="300" mozallowfullscreen="true" 

Then after widget=true copy and insert webkitallowfullscreen="true" width="640"

Once again, save a copy of your spreadsheet renaming it as a template so that it can be reused for the next family.

If you are more adventurous visit Tony Proctor's blog Parallax View to investigate how to embed an SVG family tree.


 This post was written by Carmel Galvin and first appeared on https://librarycurrants.blogspot.com

Enjoyed this post? Want to see more?