JSON.parse

by harifrais

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container"></div>

JavaScript

let sampleJson = [{"project":"Sciera Internal Application","hours":{"APPLICATIONS DEVELOPMENT":33325,"DATA ENGINEERING":131090,"DATA MANAGEMENT AND OPERATION":328095}},{"project":"RealWatch","hours":{"DATA ENGINEERING":302990,"APPLICATIONS DEVELOPMENT":3015,"DATA MANAGEMENT AND OPERATION":71175}},{"project":"C-TELL","hours":{"DATA ENGINEERING":300110,"DATA MANAGEMENT AND OPERATION":488470}},{"project":"SKY","hours":{"DATA MANAGEMENT AND OPERATION":563250}},{"project":"Cox data aggregation","hours":{"APPLICATIONS DEVELOPMENT":58265}},{"project":"Sciera Web Application","hours":{"APPLICATIONS DEVELOPMENT":72720}},{"project":"Aroscop","hours":{"APPLICATIONS DEVELOPMENT":99160}},{"project":"Pulz","hours":{"APPLICATIONS DEVELOPMENT":3940}},{"project":"Timesheet","hours":{"APPLICATIONS DEVELOPMENT":137215}}]

const categories = sampleJson.map(data => data.project);
console.log(categories);

const getSeriesNames = sampleJson.map(data => {
	for (let i in data.hours) {
		return i
	}
}).filter((item, i, ar) => ar.indexOf(item) === i);


const series = getSeriesNames.map(name => {
	let output = {
		name: name,
		data: []
	};

	sampleJson.forEach(data => {
		if (data.hours[name]) {
			output.data.push(data.hours[name])
		}
	});
	
	return output
})


Highcharts.chart('container', {
	
	chart: {
		type: 'column'
	},
	
	xAxis: {
		categories: categories
	},
	
  series: series
});