Creating a JSON data array for Highcharts visualization: rearranging values for xAxis and columns

I am facing an issue with my column chart where JSON data is being parsed in the "normal" form: Years are displayed on the xAxis and values on the yAxis (check out the fiddle here):

    array(
        array(
            "name" => "Bangladesh", 
            "data" => 
                array(
                    array(2000,27892), 
                    array(2010,56199)
                )
        ), 
        array(
            "name" => "Sri Lanka", 
            "data" => 
                array(
                    array(2000, 10170), 
                    array(2010,12720)
                )
        )
    )

Now, I want to change the display format: countries should be on the xAxis instead of years, and the columns should represent the years. I tried rearranging the data array by replacing country names with years like this:

    array(
        array(
            "name" => 2000, 
            "data" => 
                array(
                    array("Bangladesh",27892), 
                    array("Sri Lanka",10170)
                )
        ), 
        array(
            "name" => 2010, 
            "data" => 
                array(
                    array("Bangladesh",56199), 
                    array("Sri Lanka",12720)
                )
        )
    );

After making these changes, the columns now appear correctly. However, the xAxis is showing "0" and "1" instead of "Bangladesh" and "Sri Lanka".

If anyone can provide me with a solution to fix this issue, I would greatly appreciate it. Thank you!

Answer №1

It's evident from your fiddle that the categories array assigned to the x axis is responsible for the current labels. To rectify this, be sure to update the categories array within the x axis configuration - http://api.highcharts.com/highcharts#Axis.update

Answer №2

Success achieved...

Now, ensure that the xaxis is set to "type: category", and format the series data as shown below (refer to example here):

    "series": 
    [
        {"name": 2007, "data": [["Bangladesh", 48506], ["Sri Lanka", 12467]]}, 
        {"name": 2010, "data": [["Bangladesh", 56199], ["Sri Lanka", 12720]]}
    ]

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

Creating a Custom "Save As" Dialog in HTML5 and JavaScript for Downloading Files

I have developed a NodeJS/Express application that is capable of generating and downloading an Excel document (created using ExcelJS) when a user clicks on a button. Currently, the file gets automatically downloaded to the default download location of the ...

Ways to stop Google Places API from generating outcomes from a particular country

After carefully reviewing the entire documentation at https://developers.google.com/maps/documentation/javascript/reference/places-service#LocationRestriction, I am still unable to find a solution to my problem. I have successfully limited Google autocomp ...

Encountering a Parsing error while utilizing redux: Unexpected token present

Trying to implement Redux for managing the searchField state on the website. After creating action.js, reducer.js, constant.js, and redux.connect() function, An error occurred: Parsing error: Unexpected token 62 | return <div className=&apo ...

Display the variance in values present in an array using Node.js

I am facing a challenge and need help with printing arrays that contain both same and different values. I want to compare two arrays and print the values that are present in both arrays in one array, while also creating another array for the differing val ...

Transforming all numbers to a consistent scale with the help of Numeral JS

Is there a way to customize the output of the numeral.js function so that it always returns numbers in thousands? For example, converting 1000000 to 1000k and 100 to 0.1k. console.log( numeral(1000000).format('0a') ); <script src="https ...

Discovering and revising an item, delivering the complete object, in a recursive manner

After delving into recursion, I find myself at a crossroads where I struggle to return the entire object after making an update. Imagine you have an object with nested arrays containing keys specifying where you want to perform a value update... const tes ...

jQuerry's on method fails to respond to newly added elements through the clone() function

I always thought that jquery's on() function would handle events for dynamically added elements in the DOM, such as those added via ajax or cloning. However, I'm finding that it only works for elements already attached to the dom at page load. Cl ...

Retrieve information from XML using jQuery

<?xml version="1.0" encoding="UTF-8"?> <slider> <csliderData1> <title>Kung Fu Panda</title> <content>In the Valley of Peace, Po the Panda finds himself chosen as the Dragon Warrior despite</content ...

The MaterialUI Datagrid is throwing an error message for an Invalid Hook Call

Having a strange issue with my simple component. I've imported DataGrid from MaterialUI, defined variables for columns and rows, and rendered the DataGrid in a functional component. However, I'm getting an "invalid hook call" error. Most solution ...

State in Vuex is failing to update effectively when actions are being utilized

I'm trying to wrap my head around VueX, but I'm having trouble getting Axios to work with it. In my store.js file, I have the following setup: state: { cards: [], currentPage: 1, lastPage: 2, }, actions: { loadGradients(page ...

Creating keys for my console.log data and appending it to html in order to display console log results in textboxes

I am currently developing a matching system for Player vs. Player battles and I need to ensure that the keys are appended correctly to my div element. Previously, I have successfully used append with keys before. Below is the code snippet: ...

What steps are necessary to configure .eslintrc to identify the use of 'require'?

I recently started using ESLint and successfully integrated it with IntelliJ. Initially, ESLint did not recognize node out of the box. After consulting the documentation, I created a configuration file named .eslintrc at the project's root folder, sp ...

Switch between playing and pausing the mp3 audio in the Next application by using the toggle

I am currently working on my website and I have been trying to add a button to the bottom of the page that can play or pause a song using useSound library. The song starts playing when I click it for the first time, however, I am facing difficulty in stopp ...

How can we effectively streamline these if statements for better organization and efficiency?

Currently, I am dealing with a straightforward if condition structure and aiming to keep the code as DRY (Don't Repeat Yourself) as possible. I believe that I have achieved optimal dryness for my specific situation by utilizing object keys as pointers ...

Recognizing JavaScript in Intellij IDEA within a script tag that does not specify the type as "text/javascript"

Using the MathJax javascript library has presented a challenge for me. Whenever I make changes to the MathJax configuration, I encounter issues because it is written in javascript but its type is labeled as "text/x-mathjax-config". This causes Intellij Ide ...

The presence of ng-show dynamically adjusts the minimum height of a div element

I am encountering an issue with a div that has the class of wrapper. Inside this div, there is a parent div with the class of content-wrapper. The wrapper div includes a conditional directive ng-show which toggles between displaying or hiding its content. ...

Fetching a value by key from a JSON object in a Node.js script

How can I extract the id value from this JSON object? answerTag: [ '[{"id":64,"name":"Coronary Artery Disease"}]', '[{"id":64,"name":"Coronary Artery Disease"}]' ], risk: '1' } ...

What is the best way to turn off the annoying pop-up messages that show up for input validation, specifically the one that says "Please complete

Currently using Angular 2, my form has input fields similar to this simplified version: <input class="body-text1" type="text" [(ngModel)]="model.name" name="name" required minlength="1"> <!--more inputs like this --> Although I have implement ...

Generating dynamic div elements using jQuery

I am currently working on developing a button that will automatically generate pre-formatted divs each time it is clicked. The divs consist of forms with fields that should already be populated with data stored in JavaScript variables. Example: <d ...

Is the validation for the 'prop' property missing in props?

Seeking assistance with react's forwardRef feature. Currently encountering errors related to missing props validation in FadeContents. Is there a way to resolve this issue? It seems like the props need to be defined somewhere in order to be used withi ...