Tips for displaying the relationship between Parents, their Children, and Grandchildren on a compact screen

I am currently brainstorming ideas for visually representing Parent->Child->Grandchild relationships on small screens like the iPhone 5/6.

One concept I had in mind was to create a representation similar to Fusion Chart, as discussed in another question about multi-level pie charts dynamically with JavaScript, CSS 3, and HTML 5. However, I have not been able to make significant progress with this approach.

If anyone has alternative ideas for how to effectively represent these relationships on small screens, I would greatly appreciate it.

javascriptjqueryhtmlcsscharts

Answer №1

Is it possible to implement a variation of the Google charts org chart, or would that make the display too broad?

Link to the chart

  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});
  }

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issues arise when attempting to import modules for a discord bot as reference errors are

I have embarked on the task of developing a music bot, as many popular ones have been shut down and the remaining options are not meeting my requirements. To enhance readability, I have organized the code into separate files and utilized modules to import ...

javascriptnode.jsimportdiscord.js

fetch data through ajax

I have developed an AJAX script to load data dynamically. $("#submit").click(function(e){ e.preventDefault() var loading = "<img src='/images/loading.gif' alt='Loading...' />"; var scrolltop=$('#scrollbox' ...

javascriptjqueryajax

What is the reason behind a Handler-Function only functioning anonymously in electron/node.js?

Have you ever wondered why it's possible to write something like this in node (electron): app.on('ready', function() { mainWindow = new BrowserWindow({ width: 800, height: 480 }); }); But when attempting this, i ...

javascriptnode.jselectron

Arranging an ng-repeat list in a dynamic order

I am currently working with AngularJS and focusing on reordering the ng-repeat list. The list represents online users who can receive messages at any time. When a user receives a message, I update the UI to display the most recent message beneath their nam ...

javascriptangularjsangularjs-ng-repeat

Struggling to integrate Ajax with Angular framework

Looking to learn Angular. Attempting to integrate Angular with AJAX calls. Whenever I try to access http://localhost:9091/jerseyservlet/jerseyrest/org/orgId/DEY using a browser or any REST client, the following response is displayed: <users> & ...

javascriptjqueryajaxangularjs

What steps do I need to take in order to retrieve this data

I'm currently working on a challenge from codesmith's CSX program. The task at hand is to develop a function that receives two callbacks as parameters and returns the callback function that executes successfully with any given input. However, I a ...

javascript

The autocomplete feature in JQuery does not seem to be working properly when trying to autocomplete with data from

I'm currently working on implementing an autocomplete search feature using JQuery, but I'm facing an issue where the results are not appearing as expected. Upon inspecting the browser console, I can confirm that the requests are being processed: ...

phpjquerymysqljquery-ui-autocomplete

WebPack integration with Wordpress encounters an issue due to ReactJS Code Splitting while trying to load Bootstrap

Currently, I have set up a WebPack configuration that enables the direct injection of ReactJS into a website. This process compiles all the React code into a single index.js file, but I am facing an issue with its size. To address this, I am attempting to ...

javascriptreactjswordpresswebpacklazy-loading

Close button for Chrome application

I am currently venturing into creating a Chrome app for the first time and I am faced with the challenge of implementing a close button using the following HTML code: <html> <head> <link rel="stylesheet" type="text/css" href="as ...

jquerygoogle-chromegoogle-chrome-app

Is it possible to conceal the dates from past months in the datepicker plugin?

Currently, I am utilizing a datepicker tool from jQuery UI and adjusting its CSS to suit my requirements. My goal now is to hide any dates that are not currently active, specifically those displayed from other months. I am unsure if this can be achieved ...

javascriptjquerycsshtmldatepicker

Which is better for creating Android charts: achartengine or AndroidPlot?

Exploring options for developing an activity to display sensor data in a plot, I've come across achartengine and AndroidPlot as potential choices. My specific requirements include: Creating a line plot with 3 or more series Implementing dynamic plot ...

androidchartsachartengineandroidplot

Show only the record with the greatest price

I am working on a vanilla JavaScript application with Express on the backend and MongoDB. The app is a restaurant builder where each customer can reserve a table using a form. The form includes inputs for name, a select box with available tables, and bid p ...

javascriptnode.jsmongodbexpress

The 'props.p' navigation in react-native is undefined

I have gone through various forums and discussions regarding this issue, but none of the solutions seem to work for me. For some reason, I am facing difficulties passing props to react-navigation when I attempt to navigate, resulting in the following erro ...

javascriptreactjsreact-nativenavigation

Modify the button outline while the navigation tabs are active

I have implemented nav-tabs within a bootstrap panel. When the first button is active on the panel header, the border appears thicker on the left side and top. Query: How can I ensure that there is no double thickness in the border for whichever button ...

css

What is the best tool for combining CSS and SCSS code together?

My code is becoming hard to manage, so I need to consolidate some lengthy regular CSS statements like this: .aui #content .columns-1-2-equal .row-fluid #column-3 header { prop1 ...prop2 prop3 } into my current SCSS file. For instance, if I have a snippe ...

csssassless

uncertain about the condition in javascript

Explaining the purpose of the if(td) condition in this code snippet, which is designed to search for a specific row in a table. The variables var input represent the search box, while var table represents the table itself. function myFunction() { // ...

javascripthtmlif-statementfiltering

Fresh class retains the characteristics of the former class

As I navigate my way through learning jQuery, I've encountered a puzzling issue that I can't seem to solve. No existing articles seem to address my specific problem, so I am turning to this platform in hopes of finding a solution. I'm puzz ...

javascriptjquerycssclass

Toggle Jquery menu with a click of a button

I need help with creating a menu for a forum that opens on click and closes on click. Here is the code I have so far: /*Custom BBPress admin links menu*/ function wpmudev_bbp_admin_links_in_menu($retval, $r, $args) { if ( is_user_logged_in() ) { $me ...

javascriptphpjqueryhtmlcss

Employ the setInterval function to run a task every 15 minutes for a total of

I have a task that requires me to use setInterval function 5 times every 15 minutes, totaling one hour of work. Each value retrieved needs to be displayed in an HTML table. Below is the table: enter image description here For example, if it is 7:58 p.m. ...

javascript

Ensuring Unique CSS for Diverse Devices: A User-Agent Driven Approach

I am facing multiple challenges and working towards finding solutions. I have developed a webpage and now I want to redirect the link to the CSS file based on the user agent. `<script type="text/css" src="style.css"> </script>` However, inst ...

javascriptphpandroidcssipad