highcharts and wordpress [closed]

Question

Can someone outline the steps to adding highcharts to Wordpress.

For example, I've added in the code to my header:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

But this provides a server error.

Is there a step-by-step anyone can provide including a basic chart so I can see it working. Thanks.

Answer 1

Pressed post on wrong tab! Ignore previous incomplete answer. This is fuller. Nick.

Hi - I had the same problem as Wordpress strips out a lot of HTML tags. You need to do a few things mentioned below. Hope it helps you. Nick.

1) You need to bypass Wordpress stripping out your code so install the plugin "Allow Javascript in Posts and Pages" checkout hitreach.co.uk for the plugin.

2) Tell your page about the highcharts library - I actually put it in my header.php because I use charts frequently. You may prefer to put it in the post itself.

For the header.php approach - put a link to the highcharts library before the closing head tag. I put both the jquery link and highstock.js link there. I had to put the js libraries on my server of course. I put the links in like this

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"        type="text/javascript"></script>
<script src="http://www.yourdomain.com/wp-content/plugins/highcharts/js/highstock.js"    type="text/javascript"></script>

Notice I had to have the highstock.js file on my server - the second link shows where I put it.

3) Create a new post and in there you'll need to wrap the js code with these new tags:

[js] Your JS Code [/js]

The [js] tags effectively replace the script tags in regular html.

Here's the full post...

[js]

  $(function() {
$.getJSON('http://www.highcharts.com/samples/data/jsonp.php?filename=aapl-       c.json&callback=?', function(data) {

    // Create the chart
    window.chart = new Highcharts.StockChart({
        chart : {
            renderTo : 'container'
        },

        rangeSelector : {
            selected : 1
        },

        title : {
            text : 'AAPL Stock Price'
        },

        series : \[{
            name : 'AAPL Stock Price',
            data : data,
            marker : {
                enabled : true,
                radius : 3
            },
            shadow : true,
            tooltip : {
                valueDecimals : 2
            }
        }\]
    });
    });
 });

[/js]

<div id="container" style="width: 100%; height: 400px"></div>