How to Visually represents Parent->Child->Grand Child on Small screen

Question

I am looking for an idea for visual representation of Parent->Child->GrandChild for small screen like Iphone 5/6 etc.

I thought of representing it something like fusion chart ( my another question on it[How to create slices of a multi level pie chart dynamically but I am unable to get some breakthrough using javascript , CSS 3 and HTML 5.

I am looking for another idea for this representation on small screen.

Answer 1

could you use some iteration of the google charts org chart or would that be too wide?

https://jsfiddle.net/Ldvo7qd0/1/

  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Name');
    data.addColumn('string', 'Manager');
    data.addColumn('string', 'ToolTip');

    data.addRows([
      [{v:'Mike', f:'Mike<div style="color:red; font-style:italic">Grandfather</div>'}, '', 'GrandParent'],
        [{v:'Rita', f:'Rita<div style="color:red; font-style:italic">Grandmother</div>'}, '', 'GrandParent'],
      [{v:'Jim', f:'Jim<div style="color:red; font-style:italic">Vice President</div>'}, 'Mike', 'VP'],
      ['Alice', 'Mike', ''],
      ['Bob', 'Jim', 'Bob Sponge'],
      ['Carol', 'Bob', '']
    ]);

    var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
    chart.draw(data, {allowHtml:true});
  }