search

rhblind / django-gcharts

Provides a QuerySet, Manager and other tools for easy integration with the Google Visualization API
Other
41 stars 14 forks source link

Problems displaying charts on different tabs #6

Closed timogilvie closed 10 years ago

timogilvie commented 10 years ago

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?

http://stackoverflow.com/questions/15299482/cannot-read-property-length-of-null-using-css-display-block-select-onchange

rhblind commented 10 years ago

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.

timogilvie commented 10 years ago

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/rhblind/django-gcharts/issues/6#issuecomment-32451723 .

timogilvie commented 10 years ago

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.

rhblind commented 10 years ago

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?

timogilvie commented 10 years ago

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

rhblind commented 10 years ago

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!

timogilvie commented 10 years ago

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.

rhblind commented 10 years ago

Glad you worked it out! Thanks for the appreciation =)

MSafter commented 9 years ago

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.

rhblind commented 9 years ago

Did you ever figured this out, @timogilvie ?

timogilvie commented 9 years ago

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.

rhblind commented 9 years ago

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 https://github.com/rhblind/django-gcharts/issues/6#issuecomment-138548773 .