0

I'm learning more about PHP and Javascript. I wanted to use a nifty charting solution for a project I was making from scratch, but it's in Javascript and I am still pretty wet behind the ears with using Javascript in general. Why is my chart not loading where the #container tag is located on my PHP page?

I have a MVC layout here, where the index.php calls to a logged in or not logged in page. The logged in page is where my chart exists and is not loading.

My PHP page is working pretty good. I have placed all my script includes in my _footer.php file, which is included in PHP at the bottom of the page. Below is what my footer file looks like. It had Foundation, a common front-end framework, and my highcharts/highstocks script includes with the example highchart chart example that I verified working on a test.html page.

_footer.php

<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script src="js/highstocks/highstock.js"></script>
<script src="js/highstocks/modules/exporting.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>

<script>
  $(document).foundation();
</script>

<script>
$(function () { 
   $('#container').highcharts({
    chart: {
        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>

Here is the logged in page where the #container div resides and should load the chart.

logged_in.php

<?php include('_header.php'); ?>
<div>
    <a href="index.php?logout"><?php echo WORDING_LOGOUT; ?></a>
    <a href="edit.php"><?php echo WORDING_EDIT_USER_DATA; ?></a>
</div>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Test Page</title>
    <link rel="stylesheet" href="css/foundation.css" />
    <script src="js/vendor/modernizr.js"></script>
  </head>
  <body>
<div class ="test-canvas">
  <div class="off-canvas-wrap" data-offcanvas>
  <div class="inner-wrap">
    <nav class="tab-bar">
      <section class="left-small">
        <a class="left-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>

      <section class="middle tab-bar-section">
        <h1 class="title">Test Menue</h1>
      </section>

      <section class="right-small">
        <a class="right-off-canvas-toggle menu-icon" href="#"><span></span></a>
      </section>
    </nav>

    <aside class="left-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Test Menu</label></li>
        <li><a href="#">Home</a></li>
      </ul>
    </aside>

    <aside class="right-off-canvas-menu">
      <ul class="off-canvas-list">
        <li><label>Users</label></li>
        <li><a href="#">Test User</a></li>
      </ul>
    </aside>

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

  <a class="exit-off-canvas"></a>

  </div>
</div>
</div>
<?php include('_footer.php'); ?>
3
  • Are you using bootstrap or similar for your design? Sep 16, 2014 at 14:25
  • I am using Foundation.
    – Fastidious
    Sep 16, 2014 at 14:26
  • 1
    Do you receive any errors in the console ? Sep 16, 2014 at 14:32

3 Answers 3

0

A common issue with using frameworks is the $ variable is already being used.

Some things to try:

  • Use jQuery (remember to include)

    jQuery(function($){ 
      $('#container').highcharts({
    ...
    
  • Ensure your global.css.scss file matches your Foundation version

  • Recompile your SASS file (delete if doesn't work and is unnecessary)

1
  • I used a test.php file that included Foundation, the header and footer PHP files in one file without the PHP Include(''); and it worked. But when I do the includes on the main page, it does not. What in the world?
    – Fastidious
    Sep 16, 2014 at 15:19
0

Error on my part.

The highcharts script include was included in more than one location within the header.php file. Being it was included in the header and the footer, it did not load the chart. I removed the include in the header file and the chart worked.

Human error, but figured it out. :)

0

Whenever this happens, your PHP with Highcharts page surprisingly still loads the chart on its own. Its only the include that fails.

Solution: Go to your Highcharts PHP and edit this line:

$(function () {

and make it look like this:

$(function ($) {

In the end you should have something like this, then refresh:

$(function ($) {
    $('#conq').highcharts({
        chart: {
            type: 'spline' //-your chart type//
        },`
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.