Insert jQuery into wordpress post

[mcgyver47]

Hi,
I am by a long way not an expert in jQuery or javascript, I am trying to insert a chart in a WordPress post.

$(function () {
$('#container').highcharts({
chart: {
},
title: {
text: 'Croissance, dette et déficit en Grèce'
},
credits:{
enabled:false
},
subtitle: {
text: 'Source : Eurostat'
},
xAxis: [{
categories: ['2007', '2008', '2009', '2010', '2011', '2012','2013']
}],
yAxis: [{ // Primary yAxis
labels: {
format: '{value} %',
style: {
color: '#666'
}
},
title: {
text: 'Déficit et croissance (en % du PIB)',
style: {
color: '#666'
}
}
}, { // Secondary yAxis
title: {
text: 'Dette (en % du PIB)',
style: {
color: '#4572A7'
}
},
labels: {
format: '{value} %',
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
shared: true
},
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
backgroundColor: '#FFFFFF'
},
series: [{
name: 'Dette',
color: '#4572A7',
type: 'column',
yAxis: 1,
data: [107.4,112.9,129.7,148.3,170.3,157.2,175.1],
tooltip: {
valueSuffix: ' % du PIB'
}
}, {
name: 'Croissance',
color: '#89A54E',
type: 'spline',
data: [3.5,-0.2,-3.1,-4.9,-7.1,-7.0,-3.9],
tooltip: {
valueSuffix: ' %'
}
}, {
name: 'Déficit',
color: '#A51500',
type: 'spline',
data: [6.5,9.8,15.6,10.9,9.6,8.9,12.7],
tooltip: {
valueSuffix: ' % du PIB'
}
}]
});
});  

This code works perfectly and as expected if placed after a document ready function in header.php.
I would rather place this piece of code directly into a post so it doesn’t load in every page but only in this post. If this same code is pasted into a post I only get a blank chart zone even “container” is present.
Any body any ideas why how to achieve this ??
Thanks in advance for your help.

[sayedtaqui]

Are you enqueuing the script the wordpress way. Codex…

And use wordpress conditional tags to load it only on the page where you want it.

[mcgyver47]

Thanks you for help.
Code as above works perfectly and as expected if placed after a document ready function in header.php.
If I save same code in a xxx.js file and then I enqueue the script the correct way, it doesn’t work…Should I modify the code one way or another to make it work when loaded from a specific file ?
As you advise I can then use conditional tags to load it only for pages or even posts I choose.
Any ideas ?

[mcjohnst]

Are you enqueueing it in the footer? jQuery and highcharts listed as dependencies ?

The only thing I’d add to the script is a check on the container length to make sure #container exists on the page before binding the highcharts functionality to it.

[mcgyver47]

Yes: enqueuing this file in the footer with highchart as dependency as jQuery is already enqueued by WordPress.
Good pick, I have forgotten this part. My #container doesn’t exist when binding the highcharts functionality.
How would you do this ? in the same file ? Having jQuery adding this container at top of js file ?
Thanks for help.

[Author]

Posts