Column Chart by Highchart

UniqueLevels = [Level 0, Level 1, Level 2] Sample Input = [{name:"Level 0",data:[{name: "Job A",y: 0.26},{name: "Job B",y: 0.36}]}, {name:"Level 1",data:[{name: "Job C",y: 0.96},{name: "Job D",y: 0.29}]}, {name:"Level 2",data:[{name: "Job E,y: 0.96},{name: "Job F",y: 0.29}, {name: "Job G",y: 0.29}]}] The provided input is intended to be used to generate a column chart in Highchart. Although the chart generation works, there seems to be an issue with the output as it is not as expected.

The expected output should display 'Level 0', 'Level 1', and 'Level 2' on the x-axis. For Level 0, 'Job A' and 'Job B' should be displayed. For Level 1, 'Job C' and 'Job D' are expected. And for Level 2, 'Job E', 'Job F', and 'Job G' need to be shown.

The current output shows 'Job A', 'Job C', and 'Job E' for Level 0. Then, it displays 'Job B', 'Job D', and 'Job F' for Level 1. Finally, only 'Job G' is visible for Level 2.

The data appears correctly in the console but the generated chart does not match the expected output. Assistance to resolve this discrepancy would be greatly appreciated.

Thanks.

Expected output:In x axis level 0,level 1, level 2 need to be there. For level 0 Job A and Job B need to populate, for level 1 Job C and Job D need to populate, for level 2 Job E, Job F and Job G need to populate

Highchart.Chart('container1', { chart: { type: 'column' }, xAxis : { categories : UniqueLevels }, series: Sample Input })enter image description here

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

Use the ng-pattern regex to specifically identify instances where a pattern occurs only once

Looking for a string pattern 'abcd' followed by a colon(:) and any number of integers, with the restriction that this pattern cannot be repeated. Here are some examples of valid patterns: - abcd:23415 - abcd:23 And invalid patterns: - asda:4 ...

What distinguishes submitting a form from within the form versus outside of it?

When the code below, you will see that when you click btnInner, it will alert 'submit', but clicking btnOuter does not trigger an alert. However, if you then click btnInner again, it will alert twice. Now, if you refresh the page: If you first ...

retrieve information from an array of objects that include promises

Within my react application, I am faced with the task of retrieving email and name data for various user IDs from separate API endpoints. To achieve this, I follow these steps: const promises = ids.map( id => ( {email: axios.get(`blabla/${id}/email ...

Struggling to find the accurate height of an element in React

Trying to display text in two rows using a React component. However, I am facing issues with getting the updated height of the element - it only shows the height after rendering. Below is my current component: constructor (props) { super(props) ...

Using jQuery's $.get method causes the browser to continuously load without stopping

Using jQuery version 1.4, I have the code below that checks if cookies are enabled: $.get("http://localhost:8080/cookietester/cookietester", function(data) { if (data == "false") document.write("Enable Cookies!"); else if(data == "true") ...

Vue Router is failing to match a URL that contains numerous dynamic parameters

I've been working on adding a nested url to my routes and have encountered an issue with the last route in my code. Every other route seems to be functioning properly. I attempted to nest the urls using the children property, but it wasn't succe ...

GeoJSON event listeners failing to trigger

Incorporating the .tsx code below, I am taking guidance from the tutorial on interactive choropleth provided by the docs, aiming to transpose it into React and TypeScript. The map displays the expected colors for each US state, but unfortunately, the mouse ...

Eliminate the array from the data retrieved through an http request in AngularJS

Currently, I am making an http call to retrieve data from a database. This process involves calling 6 different types individually. $scope.getAll = function() { var url = 'http://someurl/'; var allObjects = []; $sc ...

Unexpected token error in jQuery caused by margin-left issue

While working on editing CSS values of some elements using jQuery, I encountered an issue when trying to change the margin-left value of an element. This resulted in an "Unexpected token" error due to the "-" in margin-left. Is there a way to adjust margin ...

How to merge two JSON objects using JavaScript

I am facing a challenge with two separate JSON objects. The first object looks like this: [{"pmid":"29092960","MemberID":"33"},{"pmid":"28652336","MemberID":"33"}] And the second object is structured as follows: { "meta": { "refs": 0, ...

There was an error with validation in Graphql that was of an undefined type

Running a gql query on a React app with default variables is causing an error. The specific error message is: Error: GraphQL error: Validation error of type FieldUndefined: Field 'firstname' in type 'HealthcareWorkersPage' is undefin ...

Firebug detected an error with the regular expression flag "h" after executing the YUI Compressor

When I run YUI Compressor, an error occurs with the message: invalid regular expression flag h [Break On This Error] ction(event){$(this).removeClass('lumi...cs_glb.php</b> on line <b>221</b><br/> The issue seems to be with t ...

Error: The function concat() is not valid for messagesRef.current

I'm currently developing an app that enables users to interact with AI by asking questions related to the uploaded PDF file. However, I've encountered a problem while interacting with AI on the client side - I keep receiving the error 'TypeE ...

Looking to parse and iterate over JSON data retrieved from a query using Express and Jade?

As a newcomer to nodejs, I am facing an issue with passing JSON data from a select query to the Jade view. Using Node.js Tools for Visual Studio and Express + Jade in my project, here is a snippet from my index.js file: exports.products = function (req, r ...

Specifying the key type of an object in React using TypeScript

Just getting started with Typescript and feeling a bit confused on how to approach this. I have an object with various keys: interface eachUserInt { avatar: string; name: string; uid: string; friends: userInterface[]; requests: userInte ...

Issue: My application is unable to start due to the module nuxt.js not being found. Can someone help me troubleshoot

Upon attempting to execute npm run dev following the installation of dependencies, I encountered an error that has left me puzzled. Despite trying various solutions found online, none have seemed to resolve the issue. <a href="/cdn-cgi/l/email-protectio ...

Why does the lazy loading feature keep moving the background image around?

While trying to incorporate lazy loading on my website, I encountered an issue where the image position would change after it was fully loaded and made visible. I experimented with rearranging the order in which my JavaScript and CSS files were called, bu ...

Tips for changing the style of a class in Salesforce on Trailhead

I'm experiencing some difficulties when attempting to add style to a specific class in Trailhead Salesforce. I have tried various methods listed below, but none of them seem to be working: document.body.style.setWidth = 100%; document.getElementsByCla ...

Ways to speed up the initial loading time in Angular 7 while utilizing custom font files

Storing the local font file in the assets/fonts folder, I have utilized 3 different types of fonts (lato, raleway, glyphicons-regular). https://i.stack.imgur.com/1jsJq.png Within my index.html under the "head" tag, I have included the following: <lin ...

Express server is encountering an undefined multer file issue

Here is the code snippet for my axios post request. await axios .post( status === "register" ? "api/v1/publicUsers/register" : "api/v1/publicUsers/login", formData, { headers: { " ...