I'm using this as an example
https://jsfiddle.net/kkulig/0k4m5d2q/
I removed the parts were he uses hardcoded data for these lines
Replaced this
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 this
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(I think this is the part of the code that doesn't work)
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.
Notice that the array_x is an object - not an array, so there using the $.each returns error.
I'm sharing my fiddle of how the code looks now for everyone else to see, if they are interested in solving a similar issue or are planning to create something similar to this.
This is the end result of what I needed to acomplish. I hope someone finds this useful. Thanks to Sebastian Wędzel for the help.
Here is where I push values inside 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 I will use for my series name
originalSeries.push(graph_data.map((y, i) => new Point(originalCategories[i], y))) // automatically assign category
});
And here is where I set the names for my series using that array
function filterSeries() {
var filteredSeries = [];
$.each(originalSeries, function(i, serie) {
// serie options are merged during update,
// so it's enough to initialize serie object only with data property
var newSerie = {
data: []
};
//newSerie.name = serie[i].y.name;
newSerie.name = seriesName[i];
$.each(serie, function(i, point) {
if (point.category.visible) {
newSerie.data.push(point);
}
});
filteredSeries.push(newSerie);
});
return filteredSeries;
}