Basic column

author(s): Torstein Hønsi

by harifrais

HTML

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


<figure class="highcharts-figure">
    <div id="container"></div>
    <p class="highcharts-description">
        A basic column chart compares rainfall values between four cities.
        Tokyo has the overall highest amount of rainfall, followed by New York.
        The chart is making use of the axis crosshair feature, to highlight
        months as they are hovered over.
    </p>
</figure>

CSS

.highcharts-figure, .highcharts-data-table table {
    min-width: 310px; 
    max-width: 800px;
    margin: 1em auto;
}

#container {
    height: 400px;
}

.highcharts-data-table table {
	font-family: Verdana, sans-serif;
	border-collapse: collapse;
	border: 1px solid #EBEBEB;
	margin: 10px auto;
	text-align: center;
	width: 100%;
	max-width: 500px;
}
.highcharts-data-table caption {
    padding: 1em 0;
    font-size: 1.2em;
    color: #555;
}
.highcharts-data-table th {
	font-weight: 600;
    padding: 0.5em;
}
.highcharts-data-table td, .highcharts-data-table th, .highcharts-data-table caption {
    padding: 0.5em;
}
.highcharts-data-table thead tr, .highcharts-data-table tr:nth-child(even) {
    background: #f8f8f8;
}
.highcharts-data-table tr:hover {
    background: #f1f7ff;
}

JavaScript

var data = [{"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}}]


// get a distinct list of hour kys

var seriesData =  data.reduce( (acc, {hours}) => {
     Object.keys(hours).forEach(key => {
        if(!acc[key]) acc[key] = [];
    })
    return acc;
},{});

var result = data.reduce( (acc, {project,hours}) => {
   acc.categories.push(project);
   
   Object.keys(acc.seriesData).forEach(s => {
       acc.seriesData[s].push(hours[s] || 0);
   });
   
   return acc;
},{categories:[],seriesData:seriesData});

var categories = result.categories;
var series = Object.entries(result.seriesData).map( e => ({
    name: e[0],
    data:e[1]
}));

console.log(categories);
console.log(series);

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },    
    xAxis: {
        categories: categories,
        crosshair: true
    },
    plotOptions: {
        column: {
            pointPadding: 0.2,
            borderWidth: 0
        }
    },
    series: series
});