score:2
Accepted answer
You can use reduce() to transform the data in required format.
Iterate on given data and if an item with current label exists, then append values to its data
array, if not create a new array item with current values.
let input = [
{ "label": "city-1", "data1": 200, "data2": 60 },
{ "label": "city-2", "data1": 450, "data2": 40 },
{ "label": "city-3", "data1": 950, "data2": 78 },
];
let result = input.reduce((acc, curr) => {
acc.labels = acc.labels || [];
acc.labels.push(curr.label);
acc.data = acc.data || [];
Object.entries(curr).forEach(([key, value]) => {
if (key !== "label") {
let item = acc.data.find(item => item.label === key);
if (item) {
item.data.push(value);
} else {
acc.data.push({
"data": [value],
"label": key
});
}
}
});
return acc;
}, {});
let labels = result.labels;
let data = result.data;
console.log("Labels", labels);
console.log("Data", data);
score:1
You can find here a working script:
const list = [
{ "label": "city-1", "data1": 200, "data2": 60 },
{ "label": "city-2", "data1": 450, "data2": 40 },
{ "label": "city-3", "data1": 950, "data2": 78 },
]
const result = list.reduce((acc, item) => {
const label = item['label'];
acc[0].push(label);
const keys = Object.keys(item).filter(key => key !== 'label');
keys.forEach(key => {
let labelItem = acc[1].find(value => value.label === key);
if (!labelItem) {
acc[1].push({ label:key, data: [item[key]] });
} else {
labelItem.data.push(item[key]);
}
});
return acc;
}, [[], []]);
console.log(result)
For typescript, you will need to add the type.
Source: stackoverflow.com
Related Query
- How to map json array to two different array for chart
- How to show different product name for every bar in chart js
- How to retain spacing between bars for two different bar charts in Chart.js 2
- How can I have different values for the chart and the tooltip in chart.js?
- How to create a custom tooltip for chartJS graph with data in JSON array in JavaScript?
- How to write better code in es6 for formatting an object with array values
- How do I get a different label for each bar in a bar chart in ChartJS?
- How to create an array of objects dynamically in javascript for a pie chart
- Chart.js how to create chart wirhout y-axis for two data sets
- How to convert Json to Array In javascript for chart.js
- How to populate a charts.js pie chart using json array
- How can labels/legends be added for all chart types in chart.js (chartjs.org)?
- How can I make two of my lines in Chart JS thicker
- Chart.js how to show cursor pointer for labels & legends in line chart
- How to add second Y-axis for Bar and Line chart in Chart.js?
- chart.js Line chart with different background colors for each section
- Chart js. How to change font styles for "labels" array?
- How to add datas to chart js from javascript array itself?
- Different color for each column in angular-chartjs bar chart
- Can I specify a different font size for each row of text in Chart Title?
- How to access labels array using chart plugin (Chart.pluginService.register) in Chartjs 2.x?
- How to hide the y axis and x axis line and label in my bar chart for chart.js
- Chart js different background for y axis
- How to use 'time' (data from database, data type: timestamp ) for plotting graph in Chart JS
- How do I obtain a Chart instance for Chart.js
- how to set chart.js grid color for line chart
- PrimeNg bar chart how to show a label for the y-axis
- chart js - Apply different color for each x-axes label
- Chart JS, Choose different Y-axis for different datasets
- Chart.js plotting two json datasets on a line chart
More Query from same tag
- Chart.js max legend height
- ChartJS 2.7.3 stacked bar chart with overlap
- How can I hide legend text if it's zero?
- How to add color to text using pluginService for Chart.js?
- Chart.js How can I embed additional values to each data point in radar chart
- Chart js padding isn't working for data labels
- How to draw baseline for bar chart in chart.js
- angular Chart data-pushing from another javascript
- What is the benefit of front-end framework wrappers for charting libraries (i.e. vue-chartjs, react-chartjs-2...etc.)?
- How to keep rounded bar corners when data is filtered chartJs?
- Dynamically set chart type with Angular Chart?
- Change Legend Box Outline Chart.js 2
- Vertical lines for custom events and notes
- Animate Chart.JS Only Once
- How to increase line chart width in ng2-charts?
- Add all data in the tooltip of Chart JS
- Javascript highcharts code similar to image
- I have a chart but it is not updating the chart with react chart-js-2
- How can I implement Polar area charts with Chart.js and Canvas
- ChartJs in endless loop
- Vue chartjs is not rendering from API
- How can I add a label above just the last bar in a Chart.JS bar chart?
- Showing labels on bubble chart in angular-charts
- how to send multiple data in chartjs label
- chartjs improvement display label
- Chart.js: scrollable/swipable time-based x-axis
- code works fine on jsfiddle but one function is not working on website
- Chart.js not show in my function (function used in ajax) jquery
- chartjs how to change decimal to integers X-axis
- How to fix chart not starting at zero