Flawless JSON structure, yet Highcharts graph fails to display

I am a newcomer to highcharts and I am currently attempting to retrieve JSON data from a web service and display it on a bar chart. However, I am encountering some unusual behavior. When I use $http.get() to fetch the data and set the series to the JSON string like so: series: '$scope.jsondata', the chart displays some unexpected legends but the bars do not show up.

In contrast, if I manually copy and paste all the JSON data from this URL directly into the series field, the chart works perfectly fine.

I have created a Plunker demo that illustrates this issue. You can simply paste the provided JSON data into the series field to see everything functioning correctly.

EDIT: While I have not implemented it yet, I plan to utilize $interval to update the data at regular intervals. Here is an example of how I intend to do this:


$http.get(fullUrl).success(function(data2) {
    $scope.records = [];
    data2.forEach(function(r) {
        $scope.records.push(r);
    });
});     
mainInterval = $interval(function() {
    $http.get(fullUrl).success(function(data2) {
        $scope.records = [];
        data2.forEach(function(r) {
            $scope.records.push(r);
        });
    });
}, 5000); 

One suggestion was to create the chart within the callback of $http.get(), but I am concerned that this approach might interfere with the $interval functionality.

Answer №1

To simplify things, you can streamline the creation of the Chart by moving it into the callback of the get call. Check out this link for a preview: http://plnkr.co/edit/utQG34xOQmtbOukTK71e?p=preview

I made another adjustment from series: '$scope.jsondata' to series: $scope.jsondata.

$http.get('https://api.myjson.com/bins/38qm9').success(function(ret) {
    $scope.jsondata = ret;
    var chart = new Highcharts.Chart({
        chart: {
          renderTo: 'container',
          type: 'bar'
        },
        title: {
          text: 'Active Users'
        },
        xAxis: {
          categories: ['user']
        },
        yAxis: {
          min: 0,
          title: {
            text: 'Total Score',
            align: 'high'
          },
          labels: {
            overflow: 'justify'
          }
        },
        plotOptions: {
          bar: {
            dataLabels: {
              enabled: true
            }
          }
        },
        legend: {
          layout: 'horizontal',
          align: 'center',
          verticalAlign: 'top',
          x: -40,
          y: 100,
          floating: false,
          backgroundColor: ((Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'),
          shadow: false
        },
        credits: {
          enabled: false
        },
        series: $scope.jsondata
    });

    console.debug($scope.jsondata);
});

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

Ways to implement modifications in child component through parent?

In my Angular application, I have a file upload feature where the file upload component is a child component and the app component serves as the parent component. The app.component.html (Parent) contains a single line of code that calls the child componen ...

Guide to integrating Retrofit with the WordPress JSON API

When attempting to implement Retrofit with a simple JSON response that contains an array of objects: [{},{},{},{},{},{},], everything worked as expected. However, when switching to a response format with a status parameter: {"ok", count: 4, count_total: 4 ...

Is the automatic garbage collection of components a built-in feature of

Consider this scenario, where I have the following HTML document: <html> <head>... including all the necessary js and css files here...</head> <body> <div class="placeholderForExtPanel"></div> </b ...

Hear and register keypress in Angular service

I offer a dialog service Check it out below @Injectable() export class HomeDialogService { public constructor(private readonly dialogService: DialogService, private readonly userAgent: UserAgentService) {} @HostListener('document:keydown.escape ...

Why isn't Gzip compression working in webpack? What am I missing?

After comparing the compression results of manual webpack configuration and create-react-app for the same application, it became clear that create-react-app utilizes gzip compression, resulting in a significantly smaller final bundle size compared to manua ...

``When multiple elements are clicked, the second click will remove the class

I'm struggling with jQuery. Essentially, I want the first click on "div 1" to add a class to the others and display "lorem ipsum" text, and continue this pattern for the rest. However, if I click on the same div again, the class should be removed and ...

Using ajax to process form submissions

I'm encountering an issue with a form that I'm using to submit data via ajax. Firebug is throwing an error "ReferenceError: editUser is not defined". The form is located within a modal and I'm intending to use it for editing user information ...

Is Angular SQL lacking something?

I've been attempting to use Angular to display a table, but for some reason it's not showing up. Can anyone spot what may be wrong or missing in the code below? The table structure is present in the source code, yet nothing gets populated within ...

Tips for avoiding swiper from interacting with the content upon reaching the final swiper slide button

Can anyone help me with a problem I'm experiencing? When navigating using the next or previous buttons, I always come across one button that is grayed out, indicating that I cannot move forward (for the next button) or backward (for the prev button) a ...

The type '{}' cannot be assigned to type 'IntrinsicAttributes & FieldsProp'. This error message is unclear and difficult to understand

"The error message "Type '{}' is not assignable to type 'IntrinsicAttributes & FieldsProp'.ts(2322)" is difficult to understand. When I encountered this typeerror" import { useState } from "react"; import { Card } fr ...

How can we transfer data using Routes in React applications?

In my React application, I have a datatable that opens an "Add New" page (a reusable form) when the user clicks on the corresponding button. This AddNew page reads form fields (employeeInputs) specified in App.js. import { employeeInputs } from "./formSour ...

Enter a socket.IO chat room upon accessing an Express route

Encountering difficulty when attempting to connect to a socket.IO room while accessing a specific route in my Express application. The current setup is as follows: app.js var express = require('express'); var app = express(); var http = requir ...

Assistance with Troubleshooting a Complicated JavaScript/TypeScript Software

As someone new to the world of Javascript and Typescript, I am looking to gain a deeper understanding of how a specific large application runs through its steps. Can anyone suggest a debugger or other helpful tool for this task? ...

Changing the 'checked' attribute does not have any impact on how it appears in the browser

I am working on a button group where each button should light up when it is selected. The functionality is not fully working as expected; only one button should be active at a time. https://i.sstatic.net/oB9XG.png let stanceBar = ["long", "short", "out", ...

Send files to various locations depending on the destination specified in the API post request

Just starting out with Express js and I have a unique challenge. I have implemented two upload buttons that trigger separate post calls to upload files. My goal is to store the uploaded files in different locations based on the specific API call. The firs ...

Encountering a "Can't find variable" error in Java when using Ghostdriver 1.2.1 with PhantomJS 2.0 and the newest version

[ALERT - 2016-01-16T02:22:00.898Z] Session [e6651a90-bbf7-11e5-9061-cff578894101] - page.onError - msg: ReferenceError: Can't find variable: data :262 in error [WARNING - 2016-01-16T02:22:00.898Z] Session [e6651a90-bbf7-11e5-9061-cff578894101] ...

Using v-select to bind values directly to objects

My v-select is set up to map objects in the following way: <v-select v-model="object" :items="objectsArray" label="Select Object" item-text="name" item-value="id" ></v-select> Where: The 'object ...

Verification of radio selections

I have successfully implemented validation for the radio button. Now, I would like to add an alert box that asks "Are you sure you want to pick 'x'?" before proceeding with the code. If the user clicks cancel, they should return to the webpage. B ...

How can I prevent 401 unauthorized errors from appearing in the console?

I am facing an issue with a Vue.js function that sends data to the back-end for user login. When the user doesn't exist, it returns a 401 unauthorized error. While I can handle this error, it keeps getting logged in the console. Is there a way to prev ...

Introducing restmod: the sleek and efficient solution for rest operations, offering a new alternative to restangular

I recently came across https://github.com/platanus/angular-restmod and it appears to be more straightforward than restangular. However, I'm having trouble finding extensive information about it. Has anyone here used it before? Are there any potential ...