Customized Charts & Accordions

[eduturns]

Most of my questions have to do with the Swift charts. Which before I get going, I wanted to ask if you would consider adding two or three intermediate sizes in a future update? That would be a definite plus, and much appreciated…

The main chart-related issue I’m having difficulty with is trying to get manually coded/non-shortcode charts to load on a page that does not have a standard shortcode version of the chart present on the page? My guess is that this is a JS related issue of some sort, but I don’t have the knowledge to say that with any kind of certainty. That’s just my best guess based on the fact that I have the exact same issue when I add an accordion to a page with a SPB “Raw HTML” element. It looks/functions perfectly as long as a standard SPB “Accordion Section” element is present somewhere on the page. But once that is removed from the page, the accordion inserted as a Raw HTML element breaks. I’ll come back to the accordion issue further below.

So, I have managed to figure out how to do some customizations to the Swift charts, modeled after the charts I saw here, Perfectum Bootstrap Template. Those charts actually use jQuery Knob (which is AWESOME – feel free to add) but I’ve got mine to look fairly similar. Anyway, as I said, the charts won’t load unless I include a basic shortcode version of a chart somewhere on the page. The included images are examples of the issue I’m referring to. My code and custom CSS are in the attached file. If it’s the most terrible looking stuff you’ve ever seen, try not laugh too hard, I’m learning.

Customized Charts-1.png – The blue “170” chart on the second row is the standard Swift chart shortcode.

Customized Charts-2.png – This is what it looks like the when the chart shortcode is removed from the page (when the last div in my code is removed)

Example Intermediate Chart Sizes

The other chart related question I was hoping you could help me out with is, how do I control the breakpoints of the charts? I’d like to get them to progressively break into new rows as the screen size is reduced and the current screen size no longer accommodates the current layout. The included images show the basic response I’d like to accomplish as the screen size is reduced. Nearly all of the different methods I’ve tried result in the charts going from 6×1; to being overlapping each other (still at 6×1 – as in Customized Charts-3.png); then all the way down to 1×6, with no in-between. Obviously the charts will always ultimately end up at 1×6 if/when the screen size is small enough, but I’d really like to be able to control the layout up until that point. I know this involves media queries, I just don’t know the correct way to go about doing it. Knowing how to do that would be tremendously helpful and incredibly useful! As I/we could apply the same basic method to control the breakpoints of virtually any set of elements on any given page (modified per use-case of course, and only when absolutely necessary).

The dimensions of the images aren’t meant to be precise and are not necessarily accurate representations of where the breakpoints would actually need to be set. They’re just my effort to show the basic layout I’m aiming to achieve as the size of the viewport is reduced – at all sizes above that which would require the charts to be at 6 rows by one column. In which case I will likely swap them out with the smaller 70px charts.

Customized Charts-3.png – This is the overlapping I was referring to. They hold this position for a span of about 200-220px, starting at approx. 750px up to 960px. The last chart in the row reaches the right edge of the browser at around 830px and continues to slide out of the viewport until the charts break to 6 rows by 1 column. The same thing occurs if SPB generated chart shortcodes are used.

Swift Charts 6×1.png – The normal layout of the charts, 1 row by 6 columns

Swift Charts 2×3.png – Layout at 1st breakpoint, 2 rows by 3 columns

Swift Charts 3×2.png – Layout at 2nd breakpoint, 3 rows by 2 columns

As for the accordions, could you please tell me how I can get the accordion to function properly (not break) without needing to have a standard SPB “Accordion Section” element also on the page. I need to do some small customizations to the accordion for certain pages, but I have no need for an additional accordion on most of those pages. Obviously the accordion inserted via the Raw HTML element in my image is not customized; it’s just a straight copy of the code for the Accordion Section element copied from the page source (so too should be the code included in the file I attached).

This is the page before the SPB Accordion Section element is removed.

This is what happens after it’s removed from the page.

I really appreciate your help!

Thanks!

[eduturns]

Here are the images. Looks like they didn’t make it on the first try.

[eduturns]

This reply has been marked as private.

[eduturns]

Hey guys, just hoping to get a status update? Particularly in regard to the plugin conflict. It would also be great to know if there’s a fix/workaround for loading content elements (accordion, etc.) via the Raw HTML element as described above. But once again, primarily just concerned with the plugin problem. Though the latter would also be a very big help.

Thanks again