Problems displaying charts on different tabs
Closed this issue · 12 comments
I'm trying to display two charts on two tabs of the same page, using jquery tabs. Each displays fine when it's the active tab, but when I switch to an inactive tab, I get a GViz API error: "Cannot read property 'length' of Null".
The accepted answers from Stack Overflow are recommending editing the raw javascript, but I don't think I can do think using django-gcharts. Is there a work around that will achieve the same thing?
Hi,
Well, editing the raw javascript would be a little tricky to achieve since it's put in context by the {% gcharts %} template tag.
I don't really have an answer for you now, but I might find time to have a quick look at it in near future.
Sounds good. For some additional context, there's a pretty good explanation
of how to handle inactive tabs here:
https://groups.google.com/forum/#!topic/google-visualization-api/HSxnyAGYAGY
Sounds like the key issue is that when the chart is rendered on an inactive
tab, (where display = none) all calls for CSS height & width fail. So one
solution would be to render the chart only when the tab is shown. I can't
seem to make this work with django-gcharts, but it might be possible.
On Thu, Jan 16, 2014 at 3:59 AM, Rolf Håvard Blindheim <
notifications@github.com> wrote:
Hi,
Well, editing the raw javascript would be a little tricky to achieve since
it's put in context by the {% gcharts %} template tag.I don't really have an answer for you now, but I might find time to have a
quick look at it in near future.—
Reply to this email directly or view it on GitHubhttps://github.com//issues/6#issuecomment-32451723
.
Ok - so I'm trying to dig into this, despite only a little familiarity with django-gcharts.
In order to render the chart only when the tab is shown, you need to know if a tab has been clicked, what's the graph container id inside that tab and load only the chart with that container.
I'm not sure how to check if a tab has been clicked. I can do this in jquery like this:
// When the user clicks a tab
$('a[data-toggle="tab"]').click(function() {
// Check what's the graph container in that panel
// Something like this but it can be done differently
var this_container = $($(this).attr('href')).find('graph-container').attr('id');
// Then use a conditional to only load the graph that has the same container as this_container
// I think you can do this inside the for loop, for example
// if(c.container === this_container){
// chart.draw(datatable, c.options);
// }
});
But I'm still not sure how to modify the django-gcharts code to accomplish this. I'm happy to try to make it work if others have suggestions.
Hi,
I just gave this a spin at my local machine and it worked right out of the box.
Try to download the git version as it contains a demo project which you can use to test things out.
I've pastebin'ed the modified html source.
http://pastebin.com/DykV5Nvm (line 204 - 216)
Does this clear things up a bit?
Thanks for the response. I can get your sample working (and have used the basic charts a fair bit), but when I try to replicate the tabs, I can't get it working. Have tried Bootstrap tabs and jquery tabs.
Page I'm using is here:
http://pastebin.com/N2MLBMqv
Hi again!
Can you try to move the {% load gcharts %} out of the analytics block and put it right at the top of your file (after {% extends base_cockpit %}, as well as moving the loading of the jquery javascripts into the <head> element?
I suspect there might be some problem with your template inheritance (speaking from experience). You could also try to stuff the {% gcharts %} ... {% endgcharts %} into your <footer> or whatever, just try to make sure all required dependencies are loaded before trying to render the charts.
Also try to simplify your template until you find the cause of error, and build up again from there.
I've had some problems myself with django's template inheritance, so this is my advice =)
Let me know if you make it work!
Thanks for the suggestions! I'm not there yet, but narrowed it down to something with template inheritance, so I've got it working but now need to add back other elements. Much appreciated!
Love django-gcharts, btw.
Glad you worked it out!
Thanks for the appreciation =)
Hi all,
I have had the same issue and solve it after I realized, that the charts throwing errors after I changed the padding of the div element of the chart. Hope it will help.
Did you ever figured this out, @timogilvie ?
No, we could never get this to work the way we wanted.
As a work around, we pre-rendered all of the charts, then allowed the user to change which one was visible with a tab. This wasn't ideal, but worked.
Alright, thanks!
I'll have to do some maintenance work on this library soon, so I'll keep
that in mind.
On Tue, Sep 8, 2015 at 2:44 PM Tim Ogilvie notifications@github.com wrote:
No, we could never get this to work the way we wanted.
As a work around, we pre-rendered all of the charts, then allowed the user
to change which one was visible with a tab. This wasn't ideal, but worked.—
Reply to this email directly or view it on GitHub
#6 (comment)
.