Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

New chart type request : Flow Chart #1666

Open
orwant opened this issue May 9, 2015 · 1 comment
Open

New chart type request : Flow Chart #1666

orwant opened this issue May 9, 2015 · 1 comment

Comments

@orwant
Copy link
Collaborator

orwant commented May 9, 2015

What would you like to see us add to this API?

Add a new Chart Type : the "Flow Chart". 

From Wiki : A flowchart is a type of diagram that represents an algorithm, workflow
or process, showing the steps as boxes of various kinds, and their order by connecting
them with arrows. This diagrammatic representation illustrates a solution model to
a given problem. Flowcharts are used in analyzing, designing, documenting or managing
a process or program in various fields.[

http://en.wikipedia.org/wiki/Flowchart

I have always wanted to be able to create a Flow Chart programmatically, so that as
a new process is developed, it's easy to update the visual Flow Chart that communicates
the changes, adds, deletes, etc. 

Traditionally, making a Flow Chart involves using thick desktop software such as Visio,
etc. The User spends more time dragging and dropping objects, attempting to keep flow
lines visually connected, trying to keep the thing from falling into a complete mess,
etc. than its worth. 

What component is this issue related to (PieChart, LineChart, DataTable,
Query, etc)?

This is a new feature request. 

*********************************************************
For developers viewing this issue: please click the 'star' icon to be
notified of future changes, and to let us know how many of you are
interested in seeing it resolved.
*********************************************************

Original issue reported on code.google.com by tmurphree@marcole.co on 2014-07-11 16:53:25

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015

I would like to see more flexibility on the structure of the org chart, I want to be
able to have a vertical orientation not only on the whole org chart but on parts of
it. I would also like to have the option of having separate connections for nodes on
the same level as others, for example if Colleen is a manager and she has supervisors
under her, I would like to be able to add an administrative assistant having a separate
link from the supervisors, this is currently not possible from what I can tell.  

Hope I cam being clear, here is an example: so Debbie and Susan need to be on their
own "separate links" .... vertical alignment as this chart is way to wide.

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
</head>
<body>
<script type='text/javascript' src='https://www.google.com/jsapi'></script>
    <script type='text/javascript'>
      google.load('visualization', '1', {packages:['orgchart']});
      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:'Colleen', f:'Colleen<div style="color:red; font-style:italic">Manager</div>'},
'', 'Manager'],
          [{v:'SamanthaY', f:'<div style="color:red; font-style:italic">Portfolio:
...</div>Samantha'}, 'Colleen', 'Supervisor'],
          [{v:'NathalieT', f:'<div style="color:red; font-style:italic">Portfolio: Social
Services, EMS and Public Health</div>Nathalie'}, 'Colleen', 'Supervisor'],
          [{v:'KimberleyH', f:'<div style="color:red; font-style:italic">Portfolio: SPB,
BOQA, Housing & Long Term Care</div>Kimberley'}, 'Colleen', 'Supervisor'],
          ['Staff', 'SamanthaY', ''],
          ['Doron', 'NathalieT', 'Graphics Designer'],
          ['Lisa', 'NathalieT', 'Media Communications Specialist'],
          ['Karen', 'NathalieT', 'Senior Document Specialist'],
          ['Monique', 'NathalieT', 'Graphics Designer'],
          ['Ben', 'KimberleyH', 'Senior Document Specialist'],
          ['Samantha', 'KimberleyH', 'Senior Document Specialist'],
          ['Debbie', 'Colleen', 'Administrative Clerk'],
          ['Susan', 'Colleen', 'Web Project Coordinator']
        ]);
        // set the background color of 3rd element in array Rows to #FFF
        data.setRowProperty(2, 'style', 'background:#FFF');
        var chart = new google.visualization.OrgChart(document.getElementById('chart_div'));
        //chart.getOrgChart({orientation:RO_LEFT_PARENT_TOP}); // how to implement this??
        chart.draw(data, {allowHtml:true});
      }
</script>

 <div id='chart_div'></div>
</body>
</html>

Original issue reported on code.google.com by 1Thought.Maze1 on 2014-08-05 13:31:21

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant