adding a highchart into wordpress

3 Views

I’m trying to add a highchart to a custom page template.

So far I’ve added the below code in-between header in the header file and the added the div into the page template. The issue is that the chart is not showing in my page template.

Read More

What could be the reason why it is not showing?

In header file between tags 

    <script src="http://code.highcharts.com/highcharts.js"></script>
    <script src="http://code.highcharts.com/modules/exporting.js"></script>
    <script type="text/javascript">
    $(function () {
    $('#chart-container').highcharts({
        title: {
            text: '',
            x: -20 //center

        },
        subtitle: {
            text: '',
            x: -20
        },
        xAxis: {
            categories: ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni','Juli', 'Aug', 'Septemper', 'Oktober', 'November', 'December'],labels:
        {
          enabled: false
        }

        },
        yAxis: {
            title: {
                text: ''
            },
            labels:
        {
          enabled: false
        },
            plotLines: [{
                value: 0,
                width: 1,
                color: '#808080'
            }]
        },
        tooltip: {
            valueSuffix: 'Kr.'
        },
        legend: {
            layout: 'vertical',
            align: 'right',
            verticalAlign: 'middle',
            borderWidth: 0
        },
            credits: {
            enabled: false
         },

        series: [{
            showInLegend: false,
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }]
    });
});</script>

in the page template I’ve added the following 

<div id="chart-container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Post Views: 3

Related posts

Leave a Reply

1 comment

  1. It looks like you are trying to load something similar to the jsfiddle example from highcharts.com: http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

    Your first error, Uncaught reference: $ is not defined on your Javascript console when loading the page means you are not loading jQuery library, which is a requirement for highcharts.

    You have to load jquery before highcharts. The example uses jquery 1.9.1, so you should load that version (or higher) before including the highcharts library. E.g. 

    ... 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script‌​>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>

...

    (Be aware that althought this method should work, WordPress has its own and more appropriate way to include jQuery or any javascript library on a page template to avoid conflicts. See http://codex.wordpress.org/Function_Reference/wp_enqueue_script and http://codex.wordpress.org/Function_Reference/wp_register_script )

    Your second error is that you have to wait for the container to exist (dom ready) before trying to manipulate its content.

    You can do that by using jQuery’s document ready function. Something like:

    <script type="text/javascript">
  $(document).ready({
    $('#chart-container').highcharts({
        title: {
            text: '',
            x: -20 //center

        },

    ...

    });
  });

... 

</script>

    (More info on http://learn.jquery.com/using-jquery-core/document-ready/ )

    These related answers might help you too:

    How could I embed a HighCharts interactive graph into a wordpress 3.5.1 page?

    highcharts and wordpress

    Lastly, you might be interested on a couple of FOS wordpress plugins that already do the heavy work of creating a highchart for you:

    https://wordpress.org/plugins/rj-quickcharts/

    https://wordpress.org/plugins/table2chart/