Is it possible to iterate over xAxis categories using a for-loop with Highcharts?

I am currently working with a highchart where I have manually coded the xAxis categories. The filteredDatas.xAxis array contains dates, while filteredDatas.xAxisTime has 24 values representing 24 hours in a day.

xAxis: {                
            categories: [{
                name: filteredDatas.xAxis[0],
                categories: filteredDatas.xAxisTime
            }, {
                name: filteredDatas.xAxis[1],
                categories: filteredDatas.xAxisTime
            }, {
                name: filteredDatas.xAxis[2],
                categories: filteredDatas.xAxisTime
            }, {
                name: filteredDatas.xAxis[3],
                categories: filteredDatas.xAxisTime
            }, {
                name: filteredDatas.xAxis[4],
                categories: filteredDatas.xAxisTime
            }, {
                name: filteredDatas.xAxis[5],
                categories: filteredDatas.xAxisTime
            }, {
                name: filteredDatas.xAxis[6],
                categories: filteredDatas.xAxisTime
            }],
},

However, when I select date ranges exceeding 7 days, the x-axis labels do not display correctly.

I believe that dynamically pushing the name and categories using a for-loop and accumulator is the solution. I'm struggling to figure out the syntax for this task as I need to loop N times to include N sets of filteredDatas.xAxis and filteredDatas.xAxisTime values. As a beginner in highcharts, any guidance on how to achieve this would be greatly appreciated.

javascripthighchartscategories

Answer №1

Maybe this solution could be helpful for your situation

 xAxis: {
        categories: function(){
            var values;
            for(var n=0;n<filteredData.xAxis.length;n++){
                values.push({
                    name: filteredData.xAxis[n],
                    categories: filteredData.xAxisTime
             })
            };
            return values;
        }
    },

Alternatively, you have the option to create a variable N to specify the number of times the for loop will iterate

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

Jquery failing to append existing values into the DOM

I'm currently attempting to enhance an existing jQuery table structure with the following code snippet: function GetViewData(data) { $.ajax({ type: "GET", url: "/Services/Configuration/ViewServices. ...

javascriptjqueryjson

Error: SyntaxError - Invalid JSON character encoding detected

When handling POST requests with ajax in my controller, I also add data from GET requests directly to the js-code. The code snippet below is from mycontroller.php: $sServiceNumber = isset($_POST['ServiceNumber']) ? $_POST['ServiceNumber&ap ...

javascriptphpjqueryajaxjson

MERN Stack - Table Ordering Solution

After spending countless hours trying to order the list items in the table, I am still unable to figure it out. The data is being fetched from a MongoDB using Axios. I am currently working with MongoDB Express React and NodeJS If you'd like to check ...

javascriptnode.jsreactjsmongodbexpress

Why is the JS Component failing to appear on the page?

My component is not rendering on the page. Despite no errors or warnings, I have logged the gameData value and confirmed that all data is correct. Below is the function being exported: export default function AllGameDeals( gameData ){ const dealArr = ...

javascriptreactjsnext.js

Autocomplete feature is not functioning properly when trying to use JSON input

Currently, I am utilizing the MUI autocomplete component in my project. The situation involves making an API call and populating 'options' and 'value' with the response from the API. Below is the code snippet. // App.js import { useEff ...

javascriptreactjsmaterial-ui

Connecting a dynamically assessed function on the $scope to a service

Within my code, there is a function called make_value_summary that has the capability to generate a generic summary of various fields within the $scope. By applying this function, I am able to create location_summary, which is then linked to the view using ...

javascriptangularjs

Guide on creating a live connection between a slider and a canvas

Currently, I am working on implementing a slider that can dynamically adjust a specific value in the canvas, such as the radius of a circle. Although my code works as intended, I would like the canvas to update in real-time as I move the slider instead of ...

javascripthtmlhtml5-canvas

Angular does not recognize the function element.sortable

I'm attempting to utilize ui.sortable in order to create a sortable list. Despite following the instructions provided at https://github.com/angular-ui/ui-sortable, I am still encountering an issue and receiving the following error message: TypeError: ...

javascriptjqueryangularjsspringjquery-ui

The POST request to the localhost API endpoint resulted in a 404 Not Found error

Whenever I try to send a POST request to "/api/auth/signup" in my JavaScript application, I keep getting a 404 Not Found error. My goal is to create a MERN application for a Modern Real Estate Marketplace. This is the code snippet causing the is ...

javascriptexpress

Introduce an additional parameter to the Prestashop Cart entity

After setting up a radiobox "stock_action" in the Cart, I need to send its value to the Cart object for additional order costs. In the Cart Override, the $stock_action variable has been added: public $stock_action; /** * @see ObjectModel::$defi ...

javascriptphpajaxprestashopcart

Issue with click function not activating in Chrome when using Angular 6

I am facing an issue where the (click) function is not triggering in my select tag when I use Google Chrome, but it works fine in Mozilla. Below is my code: <div class="col-xl-4 col-lg-9"> <select formControlName="deptId" class="form-control ...

javascripthtmlangulartypescriptgoogle-chrome

Prisma DB is a versatile database that excels in handling m-n

In my database, I have implemented a structure with 3 tables: Member, Characters, and MemberCharacters. Each member can have multiple Characters, and each Character can be used by multiple Members. To handle this many-to-many relationship, I have utilized ...

javascripttypescriptnext.jsprisma

Loop through different JSON objects with unique values using ng-repeat

I am facing an issue with a JSON file that contains three different objects for each area, and I need some help. Here is an example: { "gebieden":"Antwerpen", "onderwerpen":"Gemiddeld netto inkomen per belastingsplichtige", "data_2005":"15084, ...

javascriptangularjsjsontwitter-bootstrapangularjs-ng-repeat

Encountering a problem with AngularJS when attempting to access an array and display an alert message

While working with Angular, I encountered an issue in trying to access content stored within an array. Upon reviewing the code, console.log(JSON.stringify($scope.lineItems)) was returning [[]]. However, when inspecting or setting a breakpoint on this line ...

javascriptangularjs

Complete Form Validation Issue Unresolved by Jquery Validation Plugin

I'm facing an issue with the jQuery validation plugin while attempting to validate a form. Strangely, it only works for one input field. Can anyone suggest a solution? <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.valid ...

javascriptjqueryhtmlcssvalidation

Struggling to adjust the dimensions of a React Barcode to the specified width and height?

I've encountered an issue with resizing the React Barcode Image. I prefer all barcodes to have a width of 200px and a height of 100px. From what I understand, the width of the barcode will expand when the length value increases. Below is my current co ...

javascriptreactjs

Form an item using an array

Is there a way to efficiently convert this array into a map? Here is how the array looks: var array = [{ "id" : 123 }, { "id" : 456 }, { "id" : 789 }]; The desired output should be: var result = { "123": { id: 123 } , "456": { id: 456 } , ...

javascriptarraysnode.jsmapping

Display a loading bar or prevent any user interface actions until the server has finished generating the file

I am currently developing a force directed layout using d3.js on data retrieved from an MS SQL server database. I'm creating the json file with a python script and running it on a local server using python -m SimpleHTTPServer. My goal is to establish ...

javascriptjqueryajaxd3.js

Unable to locate property 'location' due to being undefined

When trying to use the react-router-dom 4.0.0 library, an error was encountered: Uncaught TypeError: Cannot read property 'location' of undefined The issue seems to be with browserHistory. Previously, I had been using react-router 2.x.x witho ...

javascriptreactjsreact-router

The instance of the Javascript Object Prototype losing its reference

I'm currently developing a small Javascript Object that will attach click listeners to specific elements, triggering an AJAX call to a PHP function. Everything is functioning as expected, but I want to execute a function once the AJAX response is rece ...

javascriptjqueryajaxoop