WordPress.org

Ready to get started?Download WordPress

Forums

Highcharts (1 post)

  1. enquirer32
    Member
    Posted 1 year ago #

    I am trying to incorporate Highcharts (javascript) into a WP site. I would be grateful for any advice and perhaps this could serve anyone else trying to implement this.

    I have the following (which fails to load any kind of chart):

    1. After meta and before stylesheets in the theme/header.php:

    <script type="text/javascript" src="<?php get_template_directory_uri(); ?>/script/highcharts.js"></script>

    2. I have created a customs function plugin with the following inside:

    <?php
    add_action( 'wp_enqueue_scripts', 'myname_load_javascript_files' );
    
    // Register some javascript files and enqueue main script: 
    
    function myname_load_javascript_files() {
    
      wp_register_script( 'highcharts', get_template_directory_uri() . '/scripts/highcharts.js' );
      wp_register_script( 'highstock', get_template_directory_uri() . '/scripts/highstock.js' );
    
      wp_register_script( 'jquery', get_template_directory_uri().'scripts/jquery/jquery.js', array('jquery'), '1.8.3', true );
    
      wp_enqueue_script( 'highcharts' );
      }
    ?>

    3. In my post where I want a chart to appear (using the first example on the Highcharts site) I have put some js and a container :

    <script type="text/javascript" src="http://mysite.com/wp-content/themes/mytheme/scripts/highcharts.js"> </script>
    <script type="text/javascript">
    <!--
    highcharts();
    //--></script>
    
    <script>
     jQuery(document).ready(function() {
        var chart1 = new Highcharts.Chart({
            chart: {
                renderTo: 'container',
                type: 'bar'
            },
            title: {
                text: 'Fruit Consumption'
            },
            xAxis: {
                categories: ['Apples', 'Bananas', 'Oranges']
            },
            yAxis: {
                title: {
                    text: 'Fruit eaten'
                }
            },
            series: [{
                name: 'Jane',
                data: [1, 0, 4]
            }, {
                name: 'John',
                data: [5, 7, 3]
            }]
        });
    });‚Äč
    </script>
    <div id="container" style="height: 300px"></div>

    Any help much appreciated. Thank you.

Topic Closed

This topic has been closed to new replies.

About this Topic