I am not pro developer and have small knowledge of html and css only. I am trying to work on a joomla website. I tried to add Google charts to my page. Actually it's a module that I am inserting to an article through load module function. But there seems to have a conflict and the chart is not displayed correctly. It seems that there are some conflicts with the issues but I am not sure how to figure. http://goo.gl/v1GVWk if you go to above link and go to tabs and open trekking map tab you will see the bug. The width of chart is very small. I want to display 100% so that it can be responsive. I tried changing the width to px as well but no luck. Please help me. ..
Asked
Active
Viewed 122 times
0
-
For the record, I just revisited the page and the chart is now displaying at full width, which means this question doesn't stand on its own (since it relied on a live site not working correctly). It would be good to edit it with code that was broken and add in what fixes you made to make it work again properly. – Morgan Estes Feb 21 '14 at 18:43
-
Not sure if its cache or something else but it works for awhile after you inspect element. It stops working again after awhile. I am using JA Google Chart module. I imported the chart from module position in the content. – user3338456 Feb 21 '14 at 18:49
3 Answers
1
The width of elements that are hidden is zero. Therefore, the chart thinks your window has a width of zero and ends up using its smallest width.
Try triggering a resize event on the window when the tab is shown, this should cause the responsive code to run.
Niet the Dark Absol
- 320,036
- 81
- 464
- 592
-
-
I don't know, nor do I have the time to find out - but that's what you need to do and what you should do considering you're the person in charge of it. Don't use tools you don't understand, mkay? – Niet the Dark Absol Feb 21 '14 at 18:35
0
Even though the outer wrapper div#ja-google-chart-wrapper-404 is set to 100% width, two child elements are fixed at 400px. Specifically, the <svg width="400"> element that sets the image at a fixed width, plus the div that wraps it has the width set to 400px. Even though you have their parent set to 100%, if the image itself has a fixed width it won't expand to fill the space.
Check to see if there's a setting in your module or in the Google Chart itself that lets you set a different width (or none at all) on the inserted image.
One solution would be to resize the SVG element when the a#tab1-trekking-map is clicked. I just tested this in the Chrome console and it worked to trigger the map to resize to the full width of the container:
jQuery("#ja-google-chart-wrapper-404 svg").resize();
Add this (or something like it) to your other scripts that are called when your tabs are clicked. If the ID of the chart wrapper is generated dynamically you may need to adjust a bit, but triggering resize() (as stated by Niet and miguelmpn) should do the trick nicely.
Community
- 1
- 1
Morgan Estes
- 223
- 3
- 16
-
Dear Morgan Thank you for quick answer. But if you inspect the element in any browser the chart becomes proper. Any thoughts? – user3338456 Feb 21 '14 at 18:42
-
I just tried again, and if I have that tab open when I refresh the page, the chart displays full-width. If I have another tab open and refresh, the chart is 400px when I select the tab, even if I inspect the element (using Chrome). – Morgan Estes Feb 21 '14 at 18:49
-
-
Edited my answer with some code that I just tested successfully. Give it a shot. – Morgan Estes Feb 21 '14 at 19:02
-
-
Which part of the ID changes? Of you can identify a part that remains the same, alter the selector to look for it, e.g. jQuery( "div[id^='ja-google-chart-wrapper-'] svg" ). – Morgan Estes Feb 22 '14 at 04:55
-
It's going to be very difficult for me, I am not sure where and which file to insert codes. I am beginner. Can you please give me all the codes and let me know where to insert them? Thank you so much! – user3338456 Feb 22 '14 at 05:30
-
No, that's just not possible without knowing your exact setup. You'll need to find someone close to you that you can sit down with and go over this, or hire someone to do it for you. – Morgan Estes Feb 22 '14 at 05:33
-
If it's not long time work will you mind taking a look on it please? It is not easy to find developer here, I live in small town. – user3338456 Feb 22 '14 at 05:37
-
0
I never used Google charts, but what you are experiencing also happens on Google Maps.
You have two options, either you use opacity (or maybe visibility hidden) instead of display: none, this will make the chart to resize automatically when the page opens.
The other option is to trigger the resize event, something like this... Google chart redraw/scale with window resize
Hope it helps
-
You are so quick. I am so sorry that my java script knowledge is so so poor. – user3338456 Feb 21 '14 at 18:56