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

Attempting to bring in HTML through a helper, but Rails doesn't seem too thrilled about it

I have a form that triggers a remote GET request, leading to the display of a modal. The issue I'm facing is that multiple actions can utilize the same model, so I am attempting to employ a helper and jQuery to showcase different data based on what is ...

Comparing Arrays.Stream and Stream.of: A Closer Look

Why does the output differ when using Arrays.stream and Stream.of? Ideally, both should return the same value. Input: int numbers[] = {1, 2, 3, 4}; System.out.println(Arrays.stream(numbers).count()); Output: 4 Input: int numbers[] = {1, 2, 3, 4}; System ...

JSON - The challenge of incorporating single quotes within double quotes

In my current scenario, I am using the following code to populate form fields. The code is designed to handle a JSON dataset that has been encoded with PHP's json_encode function. Everything works smoothly when dealing with either single or double qu ...

Issue encountered while importing TypeScript files from an external module in a Next.js project

Encountering an issue within my Next.js project with the following project structure: ├── modules/ │ └── auth/ │ ├── index.ts │ ├── page.tsx │ └── package.json └── nextjs-project/ ├─ ...

Setting up a service URL with parameters using a versatile approach

I am faced with a situation where I have over 200 service URLs that follow a specific format: serviceURL = DomainName + MethodName + Path; The DomainName and MethodNames can be configured, while the path may consist of elements such as Param1, Param2, an ...

How can I create a custom Sweet Alert button in JavaScript that redirects to a specific webpage when clicked?

Here's what I have in my code: swal({ title: 'Successfully Registered!', text: "Would you like to proceed to the Log In page?", type: 'success', showCancelButton: true, confirmButtonColor: '#308 ...

When troubleshooting the "Uncaught reference error: require is not defined," the browserify command encountered the error message "Error: Cannot find module."

I am encountering a similar issue to @RachelD in the thread discussing the Uncaught reference error. When I execute the 'browserify' command following the instructions provided here, and using my directory as a reference, like so... myname@compn ...

Tips for populating countryList data in Form.Select component within a React.js application

I have a data file that contains a list of all countries, and I need to display these countries in a select input field, similar to what you see on popular websites when a user logs in and edits their profile information like name, address, and country. H ...

When the button is clicked, redirect to a new page and submit a form using AJAX with data obtained from the click event

I have a page called 2.html where inputting an ID number results in some output being displayed. This functionality is achieved using Ajax post method, sending data along with the data parameter. I also have another page named 1.html that contains a list o ...

What is the most efficient method for managing components with dynamic templates and their corresponding data in Vue.js?

I have a question and requirement that I would like to discuss. It involves dynamically rendering templates and data using components. The scenario is as follows: The root Vue instance fetches data from the backend, and let's say the following data i ...

Guide to testing express Router routes with unit tests

I recently started learning Node and Express and I'm in the process of writing unit tests for my routes/controllers. To keep things organized, I've split my routes and controllers into separate files. How should I approach testing my routes? con ...

what is the easiest way to retrieve JSON data by referring to HTML values using jQuery?

Although I am new to jquery, I am determined to complete my project. Seeking assistance from experienced individuals. My goal is to code the following HTML structure: <li value="bca"></li> <li value="bni"></li> <li value="bri"& ...

Sequelize encountered an error: getaddrinfo ENOTFOUND (even though the address is correct)

I've encountered some Sequelize errors while attempting to deploy a site I developed using Angular and Express/Sequelize. Here's the issue: Everything works perfectly on my local WAMP server, connecting to the local database without any problems ...

Transferring information among components and incorporating the ngDoCheck function

We are currently working on transferring data from one component to another using the following method. If there is no data available, we display an error message; however, if there is data present, we populate it in a select box. showGlobalError = true; ...

I am looking to dynamically add and remove an active link on my sidebar using JavaScript

Looking to create a dynamic website with interactive features like adding and removing active links upon clicking, and smooth transitioning between sections using JavaScript. Feel free to skip over the SVG code. HTML source code <div class="s ...

Switch the toggle to activate or deactivate links

My attempt at coding a switch to disable and enable links using CSS is functional in terms of JavaScript, but the appearance is not changing. I am lacking experience in this area. Here is my HTML Button code: <label class="switch" isValue="0"> ...

Transforming multi-dimensional arrays into database structures

I am faced with the challenge of converting a complex configuration array in PHP into a database-friendly format. The array structure is extensive and contains details such as festival information, registration layout, page layout, event options, and more. ...

Utilizing Jade to access and iterate through arrays nested in JSON data

Take a look at this JSON data: { "Meals": { "title": "All the meals", "lunch": ["Turkey Sandwich", "Chicken Quesadilla", "Hamburger and Fries"] } } I want to pass the array from this JSON into a jade view so that I can iterate over each item in ...

The magical form component in React using TypeScript with the powerful react-final-form

My goal is to develop a 3-step form using react-final-form with TypeScript in React.js. I found inspiration from codesandbox, but I am encountering an issue with the const static Page. I am struggling to convert it to TypeScript and honestly, I don't ...

Retrieving the value of the key from a JSON response

JSON: { "json": { "response": { "servicetype": "1", "functiontype": "10011", "statuscode": "0", "statusmessage": "Success", "data": { "unassignedroles": [ {"role ...