why doesn't this code work on jsfiddle?

Question

ok here is the jsfiddle: http://jsfiddle.net/Vh79z/2/

and here is a working example: http://jvectormap.com/examples/france-elections/

Simple question.. It works on the example page, and I think I have replicate it perfectly - but it does not work.

I am trying to implement this code into my own project and trying to work from this example - but it is useless since I can't get it work.

please help

$(function () {
$.getJSON('http://jvectormap.com/data/france-elections.json', function (data) {
    new jvm.WorldMap({
        map: 'fr_merc_en',
        container: $('#map2007'),
        series: {
            regions: [{
                scale: {
                    '1': '#4169E1',
                        '2': '#FF69B4'
                },
                attribute: 'fill',
                values: data['year2007'].results
            }]
        }
    });

    new jvm.WorldMap({
        map: 'fr_merc_en',
        container: $('#map2012'),
        series: {
            regions: [{
                scale: {
                    '1': '#FF69B4',
                        '2': '#4169E1'
                },
                attribute: 'fill',
                values: data['year2012'].results
            }]
        }
    });
});

});

Answer 1

The first issue is with your getJSON and CORS (Cross-origin resource sharing).

Basically, the browser won't let you perform an XHR request to data from another domain - so it's throwing an error. If you open your developer console window, you'll see an error that looks something like

XMLHttpRequest cannot load http://jvectormap.com/data/france-elections.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://fiddle.jshell.net' is therefore not allowed access.

This is a security features of browsers to prevent certain kinds of attacks. In order for this to work properly, the server over at jsvectormap needs to send out a special header in their response that indicates to the browser that it is safe to load data from their domain into the domain you're executing from. There's really nothing you can do about it on your end, unless the person you're grabbing data from also supports JSONP (a way of circumventing the requirement of CORS headers).

Can you try grabbing the data you want first and just pasting it into JSFiddle directly as a JavaScript object?

EDIT:

Doing that, it seems like it works great. Here's the code (I would post a JSFiddle, but I can't have more than two links in a post with this little reputation):

$(function(){
    var data = {"year2012":{"candidate1":"Hollande","candidate2":"Sarkozy","results":{"FR-J":1,"FR-G":2,"FR-S":1,"FR-Q":1,"FR-F":2,"FR-P":1,"FR-D":1,"FR-O":1,"FR-M":2,"FR-A":2,"FR-I":2,"FR-R":1,"FR-E":1,"FR-T":1,"FR-B":1,"FR-N":1,"FR-L":1,"FR-V":2,"FR-C":1,"FR-K":1,"FR-U":2,"FR-H":2,"FR-GP":1,"FR-MQ":1,"FR-GF":1,"FR-YT":2}},"year2007":{"candidate1":"Sarkozy","candidate2":"Royal","results":{"FR-J":1,"FR-G":1,"FR-S":1,"FR-Q":1,"FR-F":1,"FR-P":1,"FR-D":1,"FR-O":1,"FR-M":1,"FR-A":1,"FR-I":1,"FR-R":1,"FR-E":2,"FR-T":2,"FR-B":2,"FR-N":2,"FR-L":2,"FR-V":1,"FR-C":2,"FR-K":1,"FR-U":1,"FR-H":1,"FR-GP":2,"FR-MQ":2,"FR-GF":1,"FR-YT":2}}};

    new jvm.WorldMap({
      map: 'fr_merc_en',
      container: $('#map2007'),
      series: {
        regions: [{
          scale: {
            '1': '#4169E1',
            '2': '#FF69B4'
          },
          attribute: 'fill',
          values: data['year2007'].results
        }]
      }
    });

    new jvm.WorldMap({
      map: 'fr_merc_en',
      container: $('#map2012'),
      series: {
        regions: [{
          scale: {
            '1': '#FF69B4',
            '2': '#4169E1'
          },
          attribute: 'fill',
          values: data['year2012'].results
        }]
      }
    });
});

exmple HERE: http://jsfiddle.net/Vh79z/3/