Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Will Burchard
Will Burchard
8,064 Points

How to use Highcharts plugin in Workspace

Hi,

Trying to get this plugin to work in Workspace: http://www.highcharts.com/docs/getting-started/installation. (Note: I use this plugin often and have proper license - trying to apply it to a few of the things I've learned here.)

It seems like I should simply have to paste this in head: <script src="http://code.highcharts.com/highcharts.js"></script>

However, it's not working for me.

Here's a simplified version:

<!DOCTYPE html>
<html>
  <head>
      <script src="http://code.highcharts.com/highcharts.js"></script>
 </head>
  <body>
    <div id="container" style="width:100%; height:400px;"></div>
           <script>     
             $(function () { 
                var myChart = Highcharts.chart('#container', {
                    title: {
                        text: 'Fruit Consumption'
                    },
                    xAxis: {
                        categories: ['Apples', 'Bananas', 'Oranges']
                    },
                    series: [{
                        name: 'Jane',
                        data: [1, 0, 4]
                    }]
                });
            });
    </script>  
  </body>
</html>

Any help would be great.

2 Answers

Kevin Korte
Kevin Korte
28,149 Points

Yes, what Seth said it correct, and it's the first error. You'll also need to include jQuery. The other problem is that you want to just reference container without the #, as you have coded, it won't find the div with an id container. I assume, and it would be normal, that whatever you pass to the Chart class will also reference an ID attribute, to ensure you don't have two matching elements for a single chart object.

Will Burchard
Will Burchard
8,064 Points

Awesome! Thank you both. Newbie here, so your effort is much appreciated.

Seth Kroger
Seth Kroger
56,416 Points
Seth Kroger
Seth Kroger
56,416 Points

From the $() it looks like you want to use jQuery over vanilla JS but you haven't included it in the page.