I am encountering difficulties while attempting to generate the chart series in Highcharts

This is just a demonstration

https://jsfiddle.net/kkulig/0k4m5d2q/

I have made some changes to the original code

Swapped out the following

var originalCategories = [new Category('A'), new Category('B'), new Category('C')].map(function(cat, i) {
    cat.index = i;
    return cat
  });

With this

array_axis= ['2015', '2016', '2017', '2018', '2019', '2020'];//this comes from my DB
    const originalCategories = array_axis.map(x => (new Category(x))).map((c, i) => {
                c.index = i; 
                return c;
            });

and also

var originalSeries = [{
    data: [5, 3, 2].map((y, i) => new Point(originalCategories[i], y)) // automatically assign category
  }, {
    data: [1, 7, 4].map((y, i) => new Point(originalCategories[i], y)) // -//-
  }];

With this(Seems like this part causes issues)

array_x =[{name: '15 a 24 años', data: '23.9,25.4,25.4,23.1,21.8,26.8'},
{name: '25 a 34 años', data: '20.8,24.3,20.0,17.5,18.0,20.4'},
{name: '35 a 44 años', data: '22.3,24.6,23.5,21.7,19.6,24.1'},
{name: '45 a 64 años', data: '20.9,21.6,21.3,18.0,18.8,20.6'},
{name: '65 años y más', data: '21.7,22.7,18.9,17.5,18.1,19.4'},
{name: 'Menor de 15 años', data: '36.9,40.1,35.9,34.2,33.1,37.0'}];//this also comes from my DB


    var originalSeries = [];
    $.each(array_x, function(key, value) {
       var unformated_data = value.data;
       var graph_data = unformated_data.split(',').map(parseFloat);
       originalSeries.push(graph_data.map((y, i) => new Point(originalCategories[i], y))) // automatically assign category
                
                
    });

but the chart is not showing and I get error msg: jquery.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'length')

not sure what I'm doing wrong. I also need to display the name of each series (those are inside array_x)instead of series 1, series 2,...

I already tested the code with hardcoded data on the originalSeries and it works just fine.

Answer №1

It's important to recognize that the array_x is actually an object, not an array, which is why using $.each results in an error.

Answer №2

For those interested in tackling a similar challenge or embarking on a project with similarities, I'm sharing a visual representation of the current code. This showcases the end result of my task, and I trust it will be beneficial to someone out there. Special thanks to Sebastian Wędzel for the assistance provided.

This snippet demonstrates the process of adding values to the seriesName array:

var originalSeries = [];
var seriesName = [];
$.each(array_x, function(key, value) {
    var graph_data = value.data.split(',').map(parseFloat);
    seriesName.push(value.name);//This will serve as the series name
    originalSeries.push(graph_data.map((y, i) => new Point(originalCategories[i], y))) // automatically assign category
});

Below is where the names for the series are assigned using the aforementioned array:

function filterSeries() {
    var filteredSeries = [];
    $.each(originalSeries, function(i, serie) {
      // series options are combined during update, 
      // therefore initializing the serie object with data property is sufficient
      var newSerie = {
        data: []
      };
      newSerie.name = seriesName[i];
      $.each(serie, function(i, point) {
        if (point.category.visible) {
            newSerie.data.push(point);
        }
      });
      filteredSeries.push(newSerie);
    });
    return filteredSeries;
  }

https://jsfiddle.net/on2z6tmr/19/

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

Generating unique triangle patterns through Webgl

Recently, I began learning webgl and have been attempting to create triangles with random sizes and positions similar to the image below using javascript. I understand that I need to utilize a for loop within the function initScene() but I'm uncertai ...

The combination of Ajax, JavaScript, PHP/HTML, and dynamic variables

Hey there, I'm currently working on a game development project and have encountered what seems to be a scope issue. The issue arises in my js file when a player clicks on the card they want to play: It starts in my js file:</p> <pre>&l ...

When transmitting JSON data from the View to the Controller in ASP.NET MVC, the received values are

I'm facing an issue with sending JSON data from an MVC View to Controller. All I seem to get in the Controller is: https://i.sstatic.net/4pKNF.png The JSON I send in Url.Action looks like this: (I create it myself by adding arrays together using .pu ...

When using the v-for directive to display all elements of an array, only the information of the clicked array should be listed when using the

I am facing an issue with my array of locations. There are 2 divs in play - one containing the list of locations and the other displaying additional info when a location is clicked. The problem arises when I click on a specific location, let's say Sc ...

When using TypeScript's array intersection type, properties are not accessible when using methods like Array.forEach or Array.some. However, they can be accessed within a for loop

It was challenging to search for this problem because I may not have the correct technical terms, but I hope my example can help clarify it. Background: I am using query data selectors in react-query to preprocess query results and add some properties tha ...

What is the best way to transfer data from an AJAX GET request to a Node.js GET route?

Here is an example of an ajax request being made $.ajax({ url: '/reload', type: 'GET', contentType: "application/json", data: { Name: $("#inputName").val(), Link: $("#inputLink").val() }, succe ...

Distributing Back-end Information to a JavaScript File

Recently, I developed a blog site from scratch that includes features such as posts, users, and comments. To build this site, I utilized MongoDB, NodeJS, and Express while implementing an EJS view. However, I encountered an issue when attempting to create ...

The Axios GET call encountered an error with a status code of 404

I am currently working on developing a blog/articles application using vue.js. This app utilizes axios to retrieve data from my db.json file by making a get request. The objective is to display the selected article's content when it is clicked on from ...

Setting a header with the Axios module and Vue.js in Nuxt: A step-by-step guide

I've been attempting to set up an "Accept-Language" header for my SPA using vue.js (along with nuxt). Here's the approach I took, but unfortunately, it's not functioning properly. I specified that I am utilizing the axios module for nuxt. ...

What is the best way to iterate through one level at a time?

Imagine a scenario where the structure below cannot be changed: <xml> <element name="breakfast" type="sandwich" /> <element name="lunch"> <complexType> <element name="meat" type="string" /> <element name="vegetab ...

Utilize Angular2 data binding to assign dynamic IDs

Here is the JavaScript code fragment: this.items = [ {name: 'Amsterdam1', id: '1'}, {name: 'Amsterdam2', id: '2'}, {name: 'Amsterdam3', id: '3'} ]; T ...

What could be causing the missing key value pairs in my JSON parsing process?

I have set up a Rails backend to serve JSON data, such as the example below from 2.json: {"id":2,"name":"Magic","location":"Cyberjaya","surprise_type":"Great","instructions":"test","status":"awesome","pricing_level":3,"longitude":"2.90873","latitude":"101 ...

Here's a new version: "Strategies for deactivating a text field in a desktop application that

I am currently using WiniumDriver to automate a desktop application. My goal is to disable a text field once a value has been entered into it. // Launch the desktop application WiniumDriver driver = null; DesktopOptions option = new DesktopOptions(); o ...

Experience the classic game of rock-paper-scissors brought to life through JavaScript and HTML,

I've been working on a rock, paper, scissors game in JavaScript and I'm struggling to get the wins and losses to register correctly. The game keeps resulting in a draw even though I've checked my code multiple times. It's frustrating be ...

Suggestions for placing a script under the scripts menu in Illustrator CS5.1

My script for Adobe Illustrator CS5.1 is not showing up in the scripts menu despite trying to place it in various directories such as: C:\Program Files\Adobe\Adobe Illustrator CS5.1\Presets\en_GB\Scripts\ C:\Progra ...

directive still running despite attempting to stop the service

In my modal window, there is a directive that utilizes a service to make HTTP requests at regular intervals using $interval. However, even after closing the modal window, the service continues to run and make requests every 30 seconds. Is there a way to ...

Using Node Express.js to access variables from routes declared in separate files

Currently, I am in the process of developing a website with numerous routes. Initially, all the routes were consolidated into one file... In order to enhance clarity, I made the decision to create separate files for each route using the Router module. For ...

Display an array in php

Here is the challenge I am facing: array(2, 2, 2, 2, 2, 3, 4, 2, 1, 2, 5, 5, 68); I want the output to be like this: There are a total of 6 "2"s in the array 1 "3" 1 "4" 2 "5"s 1 "68" Any suggestions on how to achieve this? ...

What is the method for specifying a specific sub-dependency version in a package in Node.js?

Let me simplify my issue for you. I am facing troubles while trying to install two plugins, plugin A version 2.0 and plugin B version 3.0. It turns out that plugin B has plugin A as a sub-dependency with a conflicting version, resulting in a build phase e ...

Issues with my transpiled and typed TypeScript npm module: How can I effectively use it in a TypeScript project?

I'm trying to experiment with TypeScript. Recently, I created a simple "hello world" TypeScript module and shared it on npm. It's very basic, just has a default export: export default function hello(target: string = 'World'): void { ...