How could I embed a HighCharts interactive graph i

Question

My name is Josh and I work for a community college newspaper. I've just recently found Highcharts and have been attempting to embed a interactive graph into a post for our website, rather unsuccessfully. Actually, it's been a complete failure.

I have already read over and attempted this post to no avail: highcharts and wordpress

There's no one I know who I can take this problem to and even though I feel like I've tried every suggested solution, Unfortunately, I'm rather illiterate when it comes to html and code. Any help would be GREATLY appreciated.

I am working with Wordpress 3.5.1 Here is the point I am currently at: I am running: Allow PHP in Posts and Pages Plugin & Interactive Javascript and CSS.

For the header option of the post I have:

<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js">    </script>
<script src="http://www.domain.com/wp-content/uploads/2013/03/highcharts1.js"    type="text/javascript"></script>

In some of the websites (this one included), I've seen mention of uploading the Highcharts library onto your wordpress server. I've uploaded the highcharts.js file through the media library but I have a feeling that I am doing this incorrectly?

In the post itself I have placed:

[php]
$(function () {
var chart;
$(document).ready(function() {
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container',
            type: 'line',
            marginRight: 130,
            marginBottom: 25
        },
        title: {
            text: 'State Funding of DSPS Services',
            x: -20 //center
        },
        subtitle: {
            text: 'Source:MPR Associates Report',
            x: -20
        },
        xAxis: {
            categories: ['2003-04', '2004-05', '2005-06', '2006-07', '2007-08',
                '2008-09', '2009-10', '2010-11', '2011-2012', '2012-13']
        },
        yAxis: {
            title: {
                text: '$ Million'
            },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            formatter: function() {
                    return '<b>'+ this.series.name +'</b><br/>'+
                    this.x +': '+ this.y +' Million';
            }
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'top',
            x: -10,
            y: 100,
            borderWidth: 0
        },
        series: [{
            name: 'College Total Funding',
            data: [77.8, 81.8, 86.2, 102.1, 109.3, 108.9, 64.9, 64.8, 64.6, 65.7]

        }]
    });
});

});
[/php]
<div id="container" style="width: 100%; height: 400px"></div>

---

The page comes up blank, as it has been for the past hundred attempts or so. I apologize if this is post in the wrong spot or undesired. Any advice or solutions are greatly appreciated.

Thank you, J

Answer 1

In order to get a chart rendered, you need several things to be in place:

1. Include the highcharts.js - done
2. Include some javascript which defines and creates a chart - done
3. Give highcharts a place to put the chart - ?

I think you may be missing the last element. This is done by including a tag inside your post somewhere. The div can be named using the 'id' property as follows:

<div id='container'>mydiv</div>

You have already told highcharts that you want to 'renderTo' a place called 'container', so this should be all you need.

To add this in wordpress, go into the post editor and make sure you are in 'html' mode. In my version of wordpress, this is a tab just to the top right of the post editing pane with the options 'visual' and 'html'.

In html mode, just add my div code in the place where you want the chart to appear. Hopefully that will do the trick.

Answer 2

there could be several reasons for the chart not showing up.

1)The scripts (jquery and highcharts) need to be loaded onto your page and this is not immediately obvious in wordpress. There's a couple of ways - if you aren't a coder then the simplest is to go to the header.php of your theme. (Appearance->Editor) and look for the header.php file on the right hand side. In the head section you'll need to register the highcharts library...

    wp_register_script('myHighchartsHandle','highcharts/js/highstock.js',array('jquery'),'1.0a');
    wp_enqueue_script('myHighchartsHandle');

The path to the high stock/highcharts library will change depending on where it is on your server of course.

2) The code is javascript - your supplied code has php tags. I think you could edit that to have js tags in the square brackets and install the 'Allow javascript in posts and pages' plugin. Note that plugin needs you to prefix any square brackets in code with a backslash so you'll need to do that to get the data series formatted properly.

3) It does look like you have a div container outside of your code which is good. But as the other answer suggest you will need that and the id has to match the renderTo in the code.

4) If it doesn't work after these 3 steps then you could be falling foul of jQuery noConflict.Wordpress sets jquery in this mode by default. Instead of $ in your js code you may have to replace with jQuery. The highcharts library is ok in the code you've used.

Happy to help more if required. I have since built much of this into a plugin which is much cleaner...