Unable to load json File for highcharts

Question

I am trying to use highcharts to add a graph to my site. However, I am a newby to json and I am having trouble loading the file.

Here is the code: http://jsfiddle.net/czNn2/9/

'graph-data-array2.json' contains:

[{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]

When I run this on my site there are no errors on the console and the area where the graph should be is blank. I am following the advice from the 2nd answer to this prior question: Creating 100% stacked area graph for a website

I also tried a json file formated as:

[
["Price", "Us", "You"],
[0,0.5,0.5],
[1,0.5,0.5],
[2,0.5,0.5]
]

But it did not work either. In this case I get an error in the console "Uncaught Highcharts error #13"

Answer 1

Just to make sure (since I didn't see it in your code), add your chart to your <div id="container-chart" />.

You can do this via adding a property to the chart options:

chart: {
        renderTo: container-chart,
        height: 400
    },

SOURCE: http://api.highcharts.com/highcharts#chart.renderTo

OR use jQuery:

$('#container').highcharts({

EDIT: Turns out you can't use a hypen in the id of the div you're rendering to. Your json seems fine. Here is an updated working fiddle: http://jsfiddle.net/czNn2/5

Answer 2

The problem is with cross domain problem, because you try to load json with other domain. Solution can be usuing JSONP.