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


  1. You have explained it so clearly- many thanks - look forward to trying out some of the ideas

  2. Dear Carmel - You are so lovely (as always) to write this up for us. I really like the idea of the Powerpoint slide.

  3. Clever ideas! A little time consuming, but if your genealogy software can't generate these charts then this is a great way to share them online.

    An added benefit is if you have new information to add you can just update the slides and everywhere you've embedded them will automatically update.

    1. Yes a little time consuming I agree but I do not know of any genealogy software that provides links to blog posts from their charts.
      The other alternative would be to generate a chart from genealogy software, snip a segment, paste it into a slide then insert a transparent shape over each name and use the individual transparent shapes as links to blog posts.

  4. Thank you for sharing this. Although my genealogy software produces charts, there are times when the output that you describe here will be better suited to my needs.

  5. Thanks for the mention. If anyone is interest in my SVG trees, an explanation and two quite different examples can be found in The designer is completely free, as is my support :-)

    1. Just for the record, an updated post on SVG trees is available at that announces full (and free) availability of the software, and some demonstrations of the timeline reports that it can generate. Thanks again, Carmel.


Thanks for visiting, I welcome your comments.

Enjoyed this post? Want to see more?