This code is only functional on JSFiddle platform

I encountered an issue with my code recently. It seems to only work properly when tested on jsfiddle, and I can't figure out why it's not functioning correctly on codepen or when run from local files.

Why is this code specific to jsfiddle? When I tried running it on codepen or locally, nothing appeared on the screen. 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 () {

// Code for demo data
var data = [
    {
        "hc-key": "nl-fr",
        "value": 0
    },
    // Additional mock data entries
];

// Initializing 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;
}

Answer №1

Wow!

This code is incredibly versatile and functions flawlessly across different platforms.
For seamless integration into Codepen, remember to include all your JavaScript resources using the cog icon within the JS panel, and ensure that you have selected the Latest version of jQuery. Please note that <script> tags are not recognized in the HTML panel.

$(function () {

    // Setting up 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}
    ];

    // Initializing 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>

Answer №2

In order to execute code in a web browser, you must enclose it within the

<script> //Place your code here </script>
tag

Answer №3

this ->

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

When using CSS, the code must be enclosed within a <style> tag.

this ->

$(function () {

// Sample data
var data = [
    {
        "hc-key": "nl-fr",
        "value": 0
    },
    {
        "hc-key": "nl-gr",
        "value": 1
    },
    // More data here...
];

// Creating the chart
$('#content').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}'
        }
    }]
});
 });

For JavaScript code, it should be enclosed within a <script> tag.

Answer №4

To organize your code neatly, store all CSS files in a separate .css file or within a style tag in your HTML document. Similarly, place all scripts in a .js file or embed them within a script tag in your HTML file.

For more information, you can check out this older post.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

JavaScript random number functionality experiencing an unexpected problem

function generateRandomNumbers(){ var max = document.getElementById('max').value; var min = document.getElementById('min').value; var reps = document.getElementById('reps').value; var i; for (i=0; i<reps ...

Retrieve the data from an HTTP Request using AngularJS

I've been working on creating a JavaScript function that sends an HTTP Request to retrieve data, but I'm struggling with how to handle and use the result in another function. Here are the two functions I've tried (both intended to achieve t ...

leveraging an array from a separate JavaScript file within a Next.js page

I am facing a situation where I need to utilize an array from another page within my Next.js project. However, it seems that the information in the array takes time to load, resulting in encountering undefined initially when trying to access it for title a ...

Tips on retrieving and refreshing dynamically generated PHP file echo output within a div

I have a div that I'm refreshing using jQuery every 10 seconds. The content is being read from a PHP file named status.php. Here is the JavaScript and HTML for the div: <script> function autoRefresh_div() { $("#ReloadThis").load("status.php ...

Guide to testing express Router routes with unit tests

I recently started learning Node and Express and I'm in the process of writing unit tests for my routes/controllers. To keep things organized, I've split my routes and controllers into separate files. How should I approach testing my routes? con ...

"Discover the best way to sort through an array of complex objects with varying levels of nesting using a specified search

I have come across similar answers, but none of them go beyond two levels deep. Therefore, I believe this is not a duplicate problem. My task is to filter an array of objects where each object may contain nested objects of unknown depth. In my data structu ...

Using Partial function input in TypeScript

I am in need of a function that can accept partial input. The function includes a variable called style, which should only have values of outline or fill, like so: export type TrafficSignalStyle = 'outline' | 'fill' let style: TrafficSi ...

Angular prevents the page from reloading when using `$window.location`

I'm facing an issue while trying to refresh my admin page using Angular. I've come across $window.location.reload() and $route.reload(). I attempted to use $window.location.reload() by injecting $window into the function parameters. scope.uploadL ...

Obtain the CSRF token from a webpage using JavaScript

I am currently working on a project where I need to retrieve the csrf token from a web page built with Django using javascript. The structure of my HTML template is as follows: <div class = "debugging"> <p id = "csrf">{% csrf_token %}</p ...

What is the best way to navigate back to the previous state in reactjs?

I have implemented a sidebar component with its initial state set to false in order to hide the block until a user interacts with the hamburger icon. Once clicked, the state changes to true and displays the sidebar menu. However, I am facing an issue whe ...

Unable to alter the css of a jQuery object

I have been attempting to modify the CSS of two child elements of a specific element using Backbone and jQuery. However, my code does not seem to be working as expected. I suspect that the issue lies in distinguishing between a DOM element and a jQuery obj ...

Issue: Error message - Unhandled promise rejection: NodeInjector error - ControlContainer not found

I'm having trouble validating a form and encountering an error. I tried implementing the suggestions provided in the following threads without success: Getting error suddenly in Angular Error: NodeInjector: NOT_FOUND [ControlContainer] Using forms i ...

The CSS property for restricting white-space to nowrap is not functioning as

Having a div with multiple child divs floating left can be tricky. To prevent them from breaking, setting them to display:inline-block and white-space:nowrap seems like the solution. However, in some cases this may not work as expected. If your goal is to ...

Adding up results from Ajax request based on specific criteria

I am performing an Ajax Request that retrieves data from two different databases. For example, I have 2 databases and my ajax request queries those databases to return the following information: [{"question_id":31,"columnheader":"joene_001","ct_yes":"2"," ...

Tips for concealing the ID value within a URL or parameter

I just started learning Angular JS and I have a question about hiding parameters in the URL when clicking on anchor tags to send data to another controller. I don't want any ID or its value to be visible in the URL. Is it possible to hide parameters i ...

How can you determine the index of a table column in JavaScript when you only know its class name?

I am looking for a way to dynamically hide/show table columns based on their classes, without having to add classes to each individual <td> element. This should be accomplished using classes on the columns themselves. Here is a sample of the table ...

Populate HTML drop-down menu with Java ArrayList

I am looking to implement multiple drop down select in JSF. I came across this code that offers a solution: <select id="dates-field2" class="multiselect-ui form-control" multiple="multiple"> <optio ...

Interactive element for initiating a HTTP request to NodeJS/Express server to trigger a specific function

I currently have a frontend button implemented using nodejs and express for my server-side backend. The button is supposed to trigger a function that controls the Philips Hue API on the backend via an HTTP request. I have experimented with various approac ...

Troubleshooting problem in Vercel with Next.js 13 application - encountering "Module not found" error

Encountering a deployment issue with my Next.js 13 application on Vercel. I recently implemented the Parallel Routes feature of Next in my codebase. While pushing the changes to create a new pull request on GitHub, the branch's deployment on Vercel is ...

Adding classes with jQuery does not alter the CSS styling

Is it possible to achieve a hover effect on the <li> elements in a menu by changing the class on hover? I've tried implementing the following code but it doesn't seem to be working as expected. Any ideas on why this might be happening? Any ...