Interpret data from an external JSON file into a HighCharts chart using JavaScript

Currently, I am exploring the process of incorporating HighCharts Chart data directly within the actual webpage.

Below is the complete code snippet:

<!DOCTYPE html>
<html><head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://highcharts.github.io/export-csv/export-csv.js"></script>
<script type="text/javascript">
        parent.$('iframe').height('256');
    </script>

<style>
  .highcharts-tooltip h3 {
    margin: 0.3em 0;
}
</style>

<script>


$(function () {

    $('#container').highcharts({
        chart: {
            type: 'column',
            height: 220
        },
        title: {
            text: ''
        },
        xAxis: {
            categories: ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5']
        },
        yAxis: {
            min: 0,
            title: {
                text: 'Data by Name'
            },
            stackLabels: {
                enabled: true,
                style: {
                    fontWeight: 'bold',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }
        },
        legend: {
            align: 'right',
            x: -30,
            verticalAlign: 'top',
            y: 25,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.background2) || 'white',
            borderColor: '#CCC',
            borderWidth: 1,
            shadow: false
        },
        tooltip: {
            headerFormat: '<b>{point.x}</b><br/>',
            pointFormat: '{series.name}: {point.y}<br/>Total: {point.stackTotal}'
        },
        plotOptions: {
            column: {
                stacking: 'normal',
                dataLabels: {
                    enabled: true,
                    color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
                    style: {
                        textShadow: '0 0 3px black'
                    }
                }
            }
        },
        series: [{
            name: 'Name 3',
            data: [5, 3, 4, 7, 2]
        }, {
            name: 'Name 2',
            data: [2, 2, 3, 2, 1]
        }, {
            name: 'Name 1',
            data: [3, 4, 4, 2, 5]
        }]
    });

});

</script>
  </head>
  <body style="overflow:hidden">


<div id="container" style="height: 400px; margin: 0 auto"></div>


</body></html>

I am interested in finding out how I can adjust the code to fetch and display data from an external JSON file instead?

Answer №1

Check out this JSFiddle example

For more information, take a look at this helpful answer

$.getJSON('your_json_file.json', function(data) { 
    options.series=data; 
     chart = new Highcharts.Chart(options);            

});

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

JSON Serializer for SignalR Client Side

Here is my code snippet containing multiple classes and interfaces: class A : ISomething{} Class B : ISomething{} interface ISomething{} Class C { public ISomething _member {get;set}} I am attempting to send an object from my .NET SignalR client to my ...

Do I have to additionally check the data type using typeof when implementing PropTypes in my code?

I have a custom method called onNotifyChange that is triggered in the onChange event of an input element. This method has been defined with a PropType of func. MyComponent.propTypes = { onNotifyChange: PropTypes.func, } When invoking the onNotifyCha ...

Parsing Json with Bearer Token in Ruby: A Step-by-Step Guide

After completing a Bootcamp, I am now venturing into projects and job applications. I recently received a test for a potential job that has me feeling unsure of how to approach it. Currently, I am pondering over how to tackle this test. The task at hand i ...

Use the Nodejs HTTP.get() function to include a custom user agent

I am currently developing an API that involves making GET requests to the musicBrainz API using node.js and express. Unfortunately, my requests are being denied due to the absence of a User-Agent header, as stated in their guidelines: This is the code sn ...

Utilize Fb.api to automatically post on user's wall upon logging in

I want to utilize fb.api to make a single post on the logged-in user's wall. Here is the code snippet: var params = {}; params['message'] = 'gegeegeggegall! Check out www.facebook.com/trashcandyrock for more info.'; params['n ...

Update the content of the document element by assigning it a lengthy string

I'm utilizing JQuery to dynamically assign content to a div element. The content has numerous lines with specific spacing, so this is the approach I am taking: document.getElementById('body').innerHTML = "Front-End Developer: A <br/> ...

The versatile aspect of my discord bot is its ability to function with various

It's pretty strange, but my bot seems to respond to different prefixes than what I originally set. Even though I specified "-"" as the prefix in my code, the bot's commands also work with other symbols like "_", ">", "?", etc. I suspect this m ...

Exploring Angular 8 Route Paths

Working on an Angular 8 project, I encountered an issue with my code: src/app/helpers/auth.guard.ts import { AuthenticationService } from '@app/services'; The AuthenticationService ts file is located at: src/app/services/authentication.servic ...

Performing multiple SQL queries in a for loop using Node.js and Express

After submitting a Post form, I receive a req.body containing multiple values in the following format: console.log(req.body) { productid:[1, 2, 3] qty: [3, 5, 6] } I'm trying to implement a for loop to use these values in SQL queries. However, I e ...

Tips for preserving the zoom level of flot charts during updates using AJAX

My application regularly queries the database for new data and updates a graph using Ajax. However, I am facing an issue where each time the graph is updated with new values, the current zoom level is reset. Is there a way to preserve the zoom position b ...

Tips for retrieving user input and displaying it on an HTML page

I have encountered an issue with displaying user input in a table. The code for the table display is as follows: <tr ng-repeat="user in users" ng-class-even="'bg-light-grey'" ng-if="isLoading==false"> <td> ...

Issue encountered when updating npm to version 5.4.2: Unable to locate modules in ./node_modules/react-router-dom

When attempting to update my npm version from 3.10.10 to 5.4.2 and migrate react from 15.3.0 to 16.0, I deleted the node_modules folder and re-ran npm install. However, upon trying to run my application again, I encountered the following error: ERROR in ./ ...

Implementing automatic number increment in Vue.js forms

I have a field where I can enter numbers <input type="text" class="form-control" id="validationTooltip01" v-model="verse.number" required> After saving the number in the database, I would like it to automatically increment. For example: If I inpu ...

Preserve the Browser Scroll Position when navigating to another page

Currently tackling a challenge with JS, JQuery, and PHP where I'm attempting to resolve an infinite scroll issue. The specific problem arises when scrolling down the page extensively while loading more pages via ajax, then navigating to a different pa ...

How can I center align my loader inside app-root in Angular2+?

I've successfully added a basic spinner to my <app-root> in the index.html file. This gives the appearance that something is happening behind the scenes while waiting for my app to fully load, rather than showing a blank white page. However, I& ...

Tips for sending a form as a PDF attachment through email using Nodemailer, React, and Node.js

Imagine a scenario with a React form. Here's what I envision: fill out the form, click the submit button, and watch as the form magically generates a PDF that gets sent as an attachment via Nodemailer. Sure, I've successfully managed to send emai ...

Error: The getter callback for the component `RNCSafeAreaProvider` must be a function, but it is currently undefined

After attempting to update my React Native app's dependencies using npm update, chaos ensued. To rectify the situation, I reverted back to the previous package-lock.json, deleted the node_modules folder, and re-ran npm i. Surprisingly, instead of res ...

Ember - Issue with Page Display

Currently tackling my first ember application, which consists of two pages: the Welcome page and a page displaying student details. To accomplish this, I have established two routes named index and studentdb. Unfortunately, I'm encountering an issue w ...

When using a custom AJAX function, make sure that bindings are functioning properly when setting properties within a callback in Ember

I've encountered some unexpected behavior while trying to set an Ember property inside a custom AJAX function callback. The AJAX function is triggered in the route, as seen in the code snippet below. The success callback updates the 'session.aja ...

Exploring the Dynamics of AngularJS: Leveraging ng-repeat and ng-show

Recently, I came across this code snippet: <div class="map" ng-controller="DealerMarkerListCtrl"> <a ng-click="showdetails=!showdetails" href="#/dealer/{{marker.id}}" class="marker" style="left:{{marker.left}}px;top:{{marker.top}}px" ng-rep ...