What could be causing the chart to fail to load after I switch the JSON file

Today was my first day using highcharts and I ran into an issue when trying to use their provided code. When I changed the url of the json file, the graphic stopped loading.

Original code:

 $.getJSON('https://www.highcharts.com/samples/data/jsonp.php?filename=usdeur.json&callback=?', function (data)

I made the change to:

$.getJSON('http://localhost:55529/content/dados/data.json', function (data)

This is what my json file looks like:

[
[Date.UTC(2013,5,2),0.7695],
[Date.UTC(2013,5,3),0.7648]
]

Anyone able to offer some assistance?

javascriptasp.netjsonhighcharts

Answer №1

Due to the asynchronous nature of $.getJSON(), it's likely that your graph is loading before receiving the response.

To address this issue, you have a couple of options:

First, adjust your JSON format to:

callback([
    [Date.UTC(2013,5,2),0.7695],
    [Date.UTC(2013,5,3),0.7648]
]);

Update your $.getJSON() call to:

$.getJSON('http://localhost:55529/content/dados/data.json&callback=?', function (data)

Alternatively, if you prefer to maintain the current setup but avoid using $.getJSON(), you can use:

$.ajax({
  url: 'http://localhost:55529/content/dados/data.json',
  async: false,
  dataType: 'json',
  success: function (data) {
    mydata = data.whatever;
  }
});

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

Handlebars: The property "from" cannot be accessed because it is not an "own property" of its parent and permission has been denied

My backend is built on Node.js and I am using server-side rendering with handlebars. I have a `doc` array of objects in handlebars that contains keys "content" and "from". However, when I try to loop through this array using `#each`, I encounter the error ...

javascriptnode.jsmongodbexpresshandlebars.js

What could be causing useEffect to trigger only after the component has been mounted in NextJS?

I'm currently encountering an issue with my implementation of a useEffect function that is supposed to act like a componentWillMount, but the behavior is not as expected. Within the code for Component (as demonstrated in the Codesandbox provided belo ...

javascriptreactjsnext.js

Understanding JavaScript's JSON Path Variables

I've scoured the internet for solutions to a similar issue but haven't been able to find any helpful information yet. My current challenge involves accessing a picture path (in JSON format) based on the material type of the selected element. Her ...

javascriptarraysjsonvariablespath

Live AJAX inquiries in progress

Is there a way to track the number of active AJAX requests in jQuery, Mootools, or another library similar to Prototype's Ajax.activeRequestCount? I am looking for a method that can be used across different libraries or directly through XMLHttpRequest ...

javascriptjqueryajaxmootoolsprototypejs

Utilizing the useEffect hook with outdated information

As I was learning about react hooks, I encountered a perplexing issue that I can't quite grasp. My goal is to create a list of numbers that can be incremented and should always display in descending order. However, when I input a high number initially ...

javascriptreactjsreact-hooks

Challenges arise when attempting to pass array data from Ajax to Google Maps

I'm facing an issue with my Google map. I have a data array that is dynamically returned, and I want to use it to add markers to the map. However, the markers don't work when I pass the data variable to the add_markers() function. It only works i ...

javascriptarraysajaxgoogle-mapsgoogle-maps-api-3

What is the best way to combine several plugins in tinymce?

I experimented with a basic code snippet to test tinyMCE, and everything is functioning properly. However, I encountered an issue when attempting to add multiple plugins simultaneously. In this instance, I utilized the tinymce CDN for reference. Below is ...

javascriptjquerytinymce

One issue encountered in the AngularJS library is that the default value does not function properly in the select element when the value and

In this AngularJS example, I have created a sample for the select functionality. It is working fine when I set the default value of the select to "$scope.selectedValue = "SureshRaina";". However, when I set it to "$scope.selectedValue = "Arun";", it does n ...

javascriptangularjsangularjs-directiveangularjs-scopeangularjs-controller

What is the best way to create a function that will initiate the download of a particular file based on a specific key provided by the

I need assistance in creating a function for my text box and button setup. Can someone please guide me on how to achieve this? The user will be provided with a specific alphanumeric key from the website. They must input this key into the text box and then ...

javascripthtmljquerycssdownload

What are some ways to calculate the average of data values in a Vue v-simple-table?

I am working with a v-simple-table. The "TotalAverage" value represents the total average of "ggFinalgrade". How can I retrieve this value? View current image The image I want to display The initial value is 20 calculated as (30+20+10)/3=20 The seco ...

javascriptvue.jsvuetify.js

The XMLHttpRequest's readystate gets stuck at 1 stage

Feeling a bit out of practice here - used to work with AJAX directly, but then spent a few years on a jQuery site and now my native JS skills are rusty. I've simplified my code as much as possible, but it's still not functioning: var rawfile = ...

javascriptajax

problem decoding json data from external server

I have a custom Grease Monkey script that is responsible for collecting data from a game and sending it to my server for tracking our team's progress. This process involves multiple Ajax requests between the GM script and the game, followed by sending ...

javascriptjqueryjsonajax

The behavior of JavaScript replace varies between Chrome and IE

This JavaScript code successfully replaces a string in Chrome: myUrl = someUrl.replace('%2C%7B%22itn%22%3A%5B%22%20guidelines%20%22%5D%7D', ''); However, when tested in Internet Explorer, it does not replace the string as expected. T ...

javascriptinternet-explorergoogle-chrome

How can I change an array from OData into JSON format?

I've been working on finding a solution to properly handle an OData response in JavaScript. The issue I am facing is that the response comes back formatted as an array rather than JSON, preventing me from using JSON.parse(mydata) with the current data ...

javascriptjsonodata

Create an electron application in "development" mode and assemble it for distribution

My application is an Electron app developed with Vue.js, and I am looking to create both a production build and a development build. My goal is to utilize the NODE_ENV environment variable to adjust the behavior of the application once it is packaged. Th ...

javascriptvue.jselectronenvironment-variablesdevelopment-environment

In the realm of PHP, you can explore various categories, each distinguished by its own unique number

I am currently encountering a challenge with my while loop that is generating a select box for different types of rooms in a hotel. Each customer may make multiple reservations at the same time, so I believe creating a selection will be beneficial. Here is ...

javascriptphpjqueryhtml

Guide to extracting the values associated with a specific key across all elements within an array of objects

My goal is to retrieve the values from the products collection by accessing cart.item for each index in order to obtain the current price of the product. const CartSchema = mongoose.Schema({ userId: { type: mongoose.Schema.Types.ObjectId, ...

javascriptnode.jsmongodbexpressmongoose

Ways to retrieve element values in JavaScript without relying on IDs

Imagine for a moment that I had the subsequent code: <div class="post"> <h2 itemprop="name"> <a href="http://www.example.com">The Post Title</a> </h2> <div class="details"> <span> <em class="date" ...

javascripthtmljquery-selectors

How can you modify the default variable names in jQuery UI's Autocomplete feature?

When using jQuery UI Autocomplete, it automatically uses the variable names "value", "id", and "label" to display the drop-down list. Here's an example: $("#cities").autocomplete({ source: "backend/cities.php", minLength: 2, select: funct ...

jqueryjsonvariablesautocomplete

Anticipating the completion of a process.nextTick cycle

Problem Statement I am currently working on a Node.js application that involves complex calculations and utilizes recursive algorithms. The code snippet below gives a brief overview of how the calculations are performed: // routes.js - express.js routes ...

javascriptnode.jsrecursionstack-overflowevent-loop