[yahya_c]

Hi,

I recently purchased and installed the plugin but charts are not rendering. I tried the example code from the documentation too but it doesn’t work.

Code below –

[intense_content_section]
[intense_row]
[intense_column size="6"]
<h2>Line</h2>
[intense_chart width="450" height="200" labels="January,February,March,April,May,June,July" type="line"]
[intense_chart_data fill_color="rgba(220,220,220,0.5)" stroke_color="rgba(220,220,220,1)" point_color="rgba(220,220,220,1)" point_stroke_color="#fff" values="65,59,90,81,56,55,40" /]
[intense_chart_data fill_color="rgba(151,187,205,0.5)" stroke_color="rgba(151,187,205,1)" point_color="rgba(151,187,205,1)" point_stroke_color="#fff" values="28,48,40,19,96,27,100" /]
[/intense_chart]
[/intense_column]
[intense_column size="6"]
<h2>Bar</h2>
[intense_chart width="450" height="200" labels="January,February,March,April,May,June,July" type="bar"]
[intense_chart_data fill_color="rgba(220,220,220,0.5)" stroke_color="rgba(220,220,220,1)" point_color="rgba(220,220,220,1)" point_stroke_color="#fff" values="65,59,90,81,56,55,40" /]
[intense_chart_data fill_color="rgba(151,187,205,0.5)" stroke_color="rgba(151,187,205,1)" point_color="rgba(151,187,205,1)" point_stroke_color="#fff" values="28,48,40,19,96,27,100" /]
[/intense_chart]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
[intense_row]
[intense_column size="6"]
<h2>Radar</h2>
[intense_chart width="450" height="300" labels="January,February,March,April,May,June,July" type="radar"]
[intense_chart_data fill_color="rgba(220,220,220,0.5)" stroke_color="rgba(220,220,220,1)" point_color="rgba(220,220,220,1)" point_stroke_color="#fff" values="65,59,90,81,56,55,40" /]
[intense_chart_data fill_color="rgba(151,187,205,0.5)" stroke_color="rgba(151,187,205,1)" point_color="rgba(151,187,205,1)" point_stroke_color="#fff" values="28,48,40,19,96,27,100" /]
[/intense_chart]
[/intense_column]
[intense_column size="6"]
<h2>Polar Area</h2>
[intense_chart width="450" height="300" type="polararea"]
[intense_chart_data values="30,90,24,58,82,8" colors="#D97041,#C7604C,#21323D,#9D9B7F,#7D4F6D,#584A5E" /]
[/intense_chart]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
[intense_row]
[intense_column size="6"]
<h2>Pie</h2>
[intense_chart width="450" height="200" type="pie"]
[intense_chart_data values="30,50,100" colors="#F38630,#E0E4CC,#69D2E7,#949FB1,#4D5360,#584A5E" /]
[/intense_chart]
[/intense_column]
[intense_column size="6"]
<h2>Doughnut</h2>
[intense_chart width="450" height="200" type="doughnut" animation_easing="easeOutBounce"]
[intense_chart_data values="30,50,100,40,120" colors="#F7464A,#E2EAE9,#D4CCC5,#949FB1,#4D5360,#584A5E" /]
[/intense_chart]
[/intense_column]
[/intense_row]
[/intense_content_section]
[intense_hr size="large" /]
[intense_content_section]
<h2>Chart With Text or Icon</h2>
[intense_row]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" text="70%"]
[intense_chart_data values="70,30" colors="#1a8be2,#E2EAE9" /]
[/intense_chart]
[/intense_column]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" icon="heart" color="#F7464A"]
[intense_chart_data values="50,50" colors="#F7464A,pink" /]
[/intense_chart]
[/intense_column]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" text="1/4"]
[intense_chart_data values="25,75" colors="#1a8be2,#E2EAE9" /]
[/intense_chart]
[/intense_column]
[intense_column size="3"]
[intense_chart width="270" height="200" type="doughnut" animation_easing="easeInSine" animation_steps="100" percentage_inner_cutout="85" text="Power"]
[intense_chart_data values="90,10" colors="#40ba18,#E2EAE9" /]
[/intense_chart]
[/intense_column]
[/intense_row]
[/intense_content_section]

[Intense Visions]

yahya_c,

Hello!

We have tested this same code locally and everything is working correctly. Our initial guess is that the script is not being loaded for the charts. Would it be possible to give us a link to an example page that shows the issue? This will help us track down what is actually going on.

Thanks,

Josh

[yahya_c]

Hi Josh!

Thanks for the quick reply. This is the page – http://cycletocivility.sproj.com/take-the-assessment/survey-result1

I’m guessing it might be a script loading issue because the code is exactly the same as on this http://intenseplugin.com/shortcodes/chart-shortcode/.

Thanks,
-Yahya

[Intense Visions]

Yahya,

Hello!

Thank you for the link, it gave us the information that we needed.

It looks as though the issue is that jQuery is being loaded too late on the page. The theme seems to be loading jQuery near the bottom of the page, when it should be loaded in the head of the page. We see a number of errors all mentioning “Uncaught ReferenceError: jQuery is not defined”. Our code is trying to use jQuery prior to it being loaded on the page. One thing you could do to correct this would be to add the following code into the “Closing head code” option in the Intense admin options (Settings->Intense) on the Extras tab. This will add the jQuery script into the head section of the page.

<script type="text/javascript" src="http://cycletocivility.sproj.com/wp-includes/js/jquery/jquery.js?ver=1.11.3"></script>

Let us know if this doesn’t correct the issue. If you would rather not include this script this way, you may have to contact the theme developer and see if they could setup the theme to call the jQuery script earlier.

Thanks,

Josh

• This reply was modified 8 years, 6 months ago by Intense Visions.

[yahya_c]

Thanks Josh! I did add the script reference as you mentioned in the ‘Closing head code’ but unfortunately it’s still not working.

If it’s a theme issue, I’m willing to change the theme now that I have the intense plugin. Is there a theme that is tested with the plugin that I can try instead?

-Yahya

[Intense Visions]

Yahya,

I downloaded the theme that you’re using and it seems to work correctly. It does look like it loads jQuery in the head, but something else is loading jQuery lower on the page (likely another plugin). I think you can remove the code that I had you add. I think the next thing to do would be to deactivate your plugins one at a time to see if you can find one that causes the issue. You could deactivate all the plugins (aside from Intense), then check to see if the charts work. If they do work at this point, then activate the plugins one at a time to find which one causes the problem.

Let us know what you find.

Thanks,

Josh

[yahya_c]

Thanks! Its working now.

I deactivated all the plugins but it was still not working so I figured it must’ve been some edit that I had done to the Coraline theme. To test for that, I installed a new theme and it’s voila! Since we know that the Coraline theme works otherwise, I’ll debug my edits to see which one caused the problem.

Thank you so much for your help!

-Yahya

[Author]

Posts