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

Jump to bottom

Possible Browser Limitation Breaks Large Org Charts #50

Open
orwant opened this issue May 9, 2015 · 15 comments
Open

Possible Browser Limitation Breaks Large Org Charts #50

orwant opened this issue May 9, 2015 · 15 comments
Assignees
@orwant
Labels
Priority-Medium Type-Defect

Comments

@orwant
Copy link
Collaborator

orwant commented May 9, 2015 

What steps will reproduce the problem? Please provide a link to a
demonstration page if at all possible, or attach code.

I am trying to use the Org Chart component to create the organization chart
for my company which has about 450 people.  Right now as you can see with
the attached files, the org chart is breaking at around 227 nodes.

Since the Org Chart uses html tables to generate the layout, there appears
to be a bug caused by large Org Charts depending on the structure. 
Attached are 2 identical html files with the exception that orgchart4.html
contains 1 additional record and causes the chart to break.  There seems to
be a browser limitation of 999 when using the colspan property on a table
cell.  In the orgchart3.html file, the api generates a colspan=995, but
orgchart4.html generates a colspan=1000 and throws a javascript error in
IE.  In Firefox, it does display the chart, but the layout is messed up.

You may have to modify the code to use another structure other than tables
to generate the org chart.


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

OrgChart

Are you using the test environment (version 1.1)?
(If you are not sure, answer NO)

NO


What operating system and browser are you using?

Windows XP with IE 6.0 and Firefox 3.5.2



*********************************************************
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 khenneman on 2009-09-11 13:55:53

- _Attachment: [orgchart3.html](https://storage.googleapis.com/google-code-attachments/google-visualization-api-issues/issue-50/comment-0/orgchart3.html)_ - _Attachment: [orgchart4.html](https://storage.googleapis.com/google-code-attachments/google-visualization-api-issues/issue-50/comment-0/orgchart4.html)_
@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

P.S.  Here is a discussion about the colspan limitation.

http://www.highdots.com/forums/html/td-maximum-colspan-28831.html

Original issue reported on code.google.com by khenneman on 2009-09-11 14:09:02

@orwant orwant self-assigned this May 9, 2015
@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

Perhaps an option to generate a vertical chart for organizations that are "wider"
than they are "deep" could work.  This would allow for browser printing as well,
since the browser seems to print multiple pages for windows that scroll vertically,
but cuts off for windows that scroll horizontally.

Original issue reported on code.google.com by bess.mah on 2009-10-08 21:21:21

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

What do you mean about "an option"? Is it already implemented within Google
visualization API? If so, where can i find it?

Original issue reported on code.google.com by aakaryagin on 2009-10-12 07:13:02

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

It is not already an option.  Instead of opening a separate Feature Request, I was
suggesting to the development team that they consider this option as a way to address
the colspan limitation.

Original issue reported on code.google.com by bess.mah on 2009-10-12 14:13:38

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

Please let me know when it will be available!

Original issue reported on code.google.com by aakaryagin on 2009-10-13 20:56:40

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

(No text was entered with this change)

Original issue reported on code.google.com by daniel.libicki on 2009-10-19 07:53:33

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

I suggest that Google modify the org chart to use DIVs.  Check out this website that
uses DIVs.  http://www.cogmap.com  These work great for large charts, except their
code uses javascript to build the chart.  For some reason, the IE family of browsers
chokes on large charts.  They will display, but it will take several minutes.  And
in
the middle of the load, the browser will pop up a warning telling you that the
javascript running on the page is running for a long time, and it will ask if you
want to allow it to continue.  However, Firefox will build the large charts in about
10 seconds using their code.

Original issue reported on code.google.com by khenneman on 2010-01-13 13:16:55

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

a short-term solution is...

instead of displaying all the nodes on one page, implement event click on the parent
node. So when you click on the parent node, a new page will open displaying the child
nodes under that parent node.

Original issue reported on code.google.com by Hossein.FLorida on 2010-08-18 02:59:55

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

Is there any news on this from the Google team?  I originally submitted this request
over a year ago, but there has been no change as far as I can tell.  Our end users
are forced to use IE, and I can't change that.  It does however work properly with
Google Chrome, and the top level colspan is around 2050 columns.  I would also like
to see the ability for leaf nodes to go vertically instead of horizontally.  This would
allow for a much nicer looking layout, and especially save a lot of space when a manager
has 40 employees.

Original issue reported on code.google.com by khenneman on 2010-11-22 12:55:42

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

I'm also looking for a resolution on this one. Any word? I'm experiencing the issue
in IE8 and IE9 when trying to render around 150 nodes. The same code works in Google
Chrome very well.

Original issue reported on code.google.com by travis.layne.wilson on 2012-03-10 04:19:59

- _Attachment: [GoogleOrgChartCode.txt](https://storage.googleapis.com/google-code-attachments/google-visualization-api-issues/issue-50/comment-10/GoogleOrgChartCode.txt)_

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

Hi,
I am facing the same issue of rendering more than 125 nodes in the Org chart with IE8,
IE9, IE10. The same code works well with Google Chrome.Is there any update for this
issue.

Original issue reported on code.google.com by anwerbabu on 2014-05-11 04:37:59

@orwant
Copy link
Collaborator Author

orwant commented May 9, 2015 

This issue is becoming less an issue as more and more people are starting to use IE
10 or higher, Chrome, and Firefox. I saw this issue happen in IE 9. And the work around
I used see #8. It would be very helpful if we can get a fix for the vertical display
of the leaves (https://code.google.com/p/google-visualization-api-issues/issues/detail?id=47&sort=-stars&colspec=ID%20Stars%20Modified%20Type%20Status%20Priority%20Milestone%20Owner%20Summary)

Original issue reported on code.google.com by Hossein.Aarabi.Work on 2014-07-11 18:58:08

@jankibhatt17
Copy link

i have 238 nodes and i face same problem, please suggest if anyone found solution

@venkatsamuthiram
Copy link

I am using Google Org chat my project,
I have 900+ Node I am also facing same problem of org chat broken,

 return [
        {
              v: `Linked Under ${row.code}`,
              f: `Linked Under ${row.code}<div style="color:blue; font-style:italic">${row.details}</div>`,
       },
       `${row.code}`,
       'Account Details',
 ]

image
image

@riadrifai22
Copy link

I am using Google Org chat my project, I have 900+ Node I am also facing same problem of org chat broken,

 return [
        {
              v: `Linked Under ${row.code}`,
              f: `Linked Under ${row.code}<div style="color:blue; font-style:italic">${row.details}</div>`,
       },
       `${row.code}`,
       'Account Details',
 ]

image image

Did you end up solving this? Facing same issue here

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@orwant orwant

Labels
Priority-Medium Type-Defect
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@orwant @jankibhatt17 @venkatsamuthiram @riadrifai22