1

I have a problem with some code. It only runs in jsfiddle and i dont know why it's not working in codepen or in files.

Why does this code only works in jsfiddle? I tried it in codepen and just in files but it doesnt show anything http://jsfiddle.net/auagufL8/

<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js">   </script>

<div id="container"></div>


$(function () {

// Prepare demo data
var data = [
    {
        "hc-key": "nl-fr",
        "value": 0
    },
    {
        "hc-key": "nl-gr",
        "value": 1
    },
    {
        "hc-key": "nl-fl",
        "value": 2
    },
    {
        "hc-key": "nl-ze",
        "value": 3
    },
    {
        "hc-key": "nl-nh",
        "value": 4
    },
    {
        "hc-key": "nl-zh",
        "value": 5
    },
    {
        "hc-key": "nl-dr",
        "value": 6
    },
    {
        "hc-key": "nl-ge",
        "value": 7
    },
    {
        "hc-key": "nl-li",
        "value": 8
    },
    {
        "hc-key": "nl-ov",
        "value": 9
    },
    {
        "hc-key": "nl-nb",
        "value": 10
    },
    {
        "hc-key": "nl-ut",
        "value": 11
    }
];

// Initiate the chart
$('#container').highcharts('Map', {

    title : {
        text : 'Highmaps basic demo'
    },

    subtitle : {
        text : 'Source map: <a href="http://code.highcharts.com/mapdata/countries/nl/nl-all.js">The Netherlands</a>'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        min: 0
    },

    series : [{
        data : data,
        mapData: Highcharts.maps['countries/nl/nl-all'],
        joinBy: 'hc-key',
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});
 });


#container {
height: 500px; 
min-width: 310px; 
max-width: 800px; 
margin: 0 auto; 
}
.loading {
margin-top: 10em;
text-align: center;
color: gray;
}
Sebastiaan Nolte
  • 19
  • 4

4 Answers4

0

To run code is a browser, you need to put it inside a <script> //Your code goes here </script> tag

Bwaxxlo
  • 1,860
  • 13
  • 18
0

this -> 

#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
    }
    .loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
    }

Is CSS, it must be inside a <style> tag.

this ->

$(function () {

// Prepare demo data
var data = [
    {
        "hc-key": "nl-fr",
        "value": 0
    },
    {
        "hc-key": "nl-gr",
        "value": 1
    },
    {
        "hc-key": "nl-fl",
        "value": 2
    },
    {
        "hc-key": "nl-ze",
        "value": 3
    },
    {
        "hc-key": "nl-nh",
        "value": 4
    },
    {
        "hc-key": "nl-zh",
        "value": 5
    },
    {
        "hc-key": "nl-dr",
        "value": 6
    },
    {
        "hc-key": "nl-ge",
        "value": 7
    },
    {
        "hc-key": "nl-li",
        "value": 8
    },
    {
        "hc-key": "nl-ov",
        "value": 9
    },
    {
        "hc-key": "nl-nb",
        "value": 10
    },
    {
        "hc-key": "nl-ut",
        "value": 11
    }
];

// Initiate the chart
$('#container').highcharts('Map', {

    title : {
        text : 'Highmaps basic demo'
    },

    subtitle : {
        text : 'Source map: <a href="http://code.highcharts.com/mapdata/countries/nl/nl-all.js">The Netherlands</a>'
    },

    mapNavigation: {
        enabled: true,
        buttonOptions: {
            verticalAlign: 'bottom'
        }
    },

    colorAxis: {
        min: 0
    },

    series : [{
        data : data,
        mapData: Highcharts.maps['countries/nl/nl-all'],
        joinBy: 'hc-key',
        name: 'Random data',
        states: {
            hover: {
                color: '#BADA55'
            }
        },
        dataLabels: {
            enabled: true,
            format: '{point.name}'
        }
    }]
});
 });

Is Javascript, it must be inside a <script> tag.

Georgi-it
  • 3,676
  • 1
  • 20
  • 23
0

Oh!

This code perfectly works everywhere.
To get it to work in Codepen, you need to add all your JS resources via the little cog inside JS panel, and check that Latest version of jQuery is selected. <script> tags are ignored in HTML panel.

$(function () {

    // Prepare demo data
    var data = [
        {"hc-key": "nl-fr","value": 0},
        {"hc-key": "nl-gr","value": 1},
        {"hc-key": "nl-fl","value": 2},
        {"hc-key": "nl-ze","value": 3},
        {"hc-key": "nl-nh","value": 4},
        {"hc-key": "nl-zh","value": 5},
        {"hc-key": "nl-dr","value": 6},
        {"hc-key": "nl-ge","value": 7},
        {"hc-key": "nl-li","value": 8},
        {"hc-key": "nl-ov","value": 9},
        {"hc-key": "nl-nb","value": 10},
        {"hc-key": "nl-ut","value": 11}
    ];

    // Initiate the chart
    $('#container').highcharts('Map', {
        title : {
            text : 'Highmaps basic demo'
        },
        subtitle : {
            text : 'Source map: <a href="http://code.highcharts.com/mapdata/countries/nl/nl-all.js">The Netherlands</a>'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        colorAxis: {
            min: 0
        },
        series : [{
            data : data,
            mapData: Highcharts.maps['countries/nl/nl-all'],
            joinBy: 'hc-key',
            name: 'Random data',
            states: {
                hover: {
                    color: '#BADA55'
                }
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}'
            }
        }]
    });
});
#container {
    height: 500px; 
    min-width: 310px; 
    max-width: 800px; 
    margin: 0 auto; 
}
.loading {
    margin-top: 10em;
    text-align: center;
    color: gray;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.highcharts.com/maps/highmaps.js"></script>
<script src="http://code.highcharts.com/maps/modules/exporting.js"></script>
<script src="http://code.highcharts.com/mapdata/countries/nl/nl-all.js"></script>

<div id="container"></div>
zessx
  • 68,042
  • 28
  • 135
  • 158
0

Put all your CSS related files either in a separate .css file or put it under tag in your HTML file. Also put all the scripts inside a .js file or embed it under tag in your HTML file.

for more reference you can visit this older post.

Community
  • 1
  • 1
Shouvik
  • 449
  • 1
  • 7
  • 17