Highcharts Demo

author(s): Torstein Hønsi

by koh_edwin

HTML

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


<div id="container" style="height: 400px; min-width: 310px; max-width: 800px; margin: 0 auto"></div>

JavaScript

function cdr(matrix){
	var newMatrix=[];
	if(matrix.length>=1) 
  	for(i=1; i<matrix.length; i++){
    	newMatrix.push(matrix[i]);
    }
    
  return newMatrix;
}

function getUtilization(thisResource, thisProjectPeriod){
	if(thisResource.length===0) 
  	return {result:'NOTFOUND', 
    	newPeriod: thisProjectPeriod};
  else if(thisResource[0].period === thisProjectPeriod.period)
    return {result:'ISFOUND',
     	newPeriod:{period:thisProjectPeriod.period,
     	percent:thisProjectPeriod.percent + thisResource[0].percent}};
  else 
   	return getUtilization(cdr(thisResource),thisProjectPeriod);
}; 


//initialize sample data----------------------------------------------------------------

//specifications: 
//	resources = array of resource
//  resource = JSON of resource name, resource utilization
//  resource utilization = array of periods
//  period = period num (date index or week index), percent utilization for period
//  percent utilization is aggregate across all projects for the resource
//
//  projects = array of project
//  project = JSON of project name, project requirements
//  project requirements = array of period (same spec as resource)
//
//  to make processing easier, the period array is assumed to be sequential

var resources=[{name:'Jinzu',utilization:[{period:1,percent:.5},{period:2,percent:.5},
{period:3,percent:.8},{period:4,percent:.6},
{period:5,percent:.8},{period:6,percent:.9},
{period:7,percent:.5},{period:8,percent:.5}]},
{name:'Surya',utilization:[{period:1,percent:.5},{period:2,percent:.5},
{period:3,percent:.5},{period:4,percent:.5},
{period:5,percent:.5},{period:8,percent:.5}]},
{name:'Edwin',utilization:[{period:1,percent:.5},{period:2,percent:.5},
{period:3,percent:.5},{period:4,percent:.5},
{period:5,percent:.5},{period:8,percent:.5}]}
];
var...