Chart.js legend - split into two and display separately? - chart.js

Question

Is there any way to split the Chart.js legend into two groups of datasets and have them placed separately (or with a divider or something)?
I have a lot of datasets, and they're sort of in two groups -- our company datasets and broader research datasets. I want to be able to easily compare our data to the broader research. I think it would be easier if there were two separate legends.
Here's what I'm working on...
var allData = [5.36,4.75,5.64,5.82,5.43,5.34,7.05,6.50,5.91,5.52,4.66,5.30,4.75,4.41,4.66,5.70,5.34,6.52,5.48,5.43,5.55,6.18,6.14,5.45];
var femaleData = [5.33,5.17,5.44,5.44,5.61,5.61,6.67,6.22,5.83,5.61,4.56,4.67,5.61,4.28,4.11,5.83,5.61,6.33,5.50,5.56,6.22,5.94,5.72,4.83];
var maleData = [5.38,4.46,5.77,6.08,5.31,5.15,7.31,6.69,5.96,5.46,4.73,5.73,4.15,4.50,5.04,5.62,5.15,6.65,5.46,5.35,5.08,6.35,6.42,5.88];
// function1Data is G&A
var function1Data = [5.18,5.18,6.09,5.09,5.36,5.09,6.45,6.55,5.36,5.64,4.55,5.09,4.82,4.55,4.91,6.00,5.91,5.64,5.45,5.27,6.27,5.73,5.64,4.82];
// function2Data is Sales & Service
var function2Data = [5.63,4.50,5.56,5.88,5.63,6.13,7.19,6.75,5.75,5.69,4.88,5.44,4.75,4.44,4.31,5.94,5.06,6.63,5.44,5.75,5.25,6.50,6.50,5.63];
// function3Data is tech
var function3Data = [5.24,4.71,5.41,6.24,5.29,4.76,7.29,6.24,6.41,5.29,4.53,5.29,4.71,4.29,4.82,5.29,5.24,7.00,5.53,5.24,5.35,6.18,6.12,5.71];
// function4Data is dev
var program1Data = [5.08,4.54,5.58,5.58,5.42,5.29,7.13,6.58,5.63,5.54,4.58,4.79,4.88,4.54,4.46,6.04,5.04,6.67,5.75,5.33,5.33,6.46,5.96,5.00];
var program2Data = [5.21,4.58,5.89,5.58,5.42,5.32,6.89,6.53,5.68,5.42,4.58,5.37,4.47,4.32,4.79,5.84,5.32,6.26,5.68,5.47,5.32,6.21,6.16,5.37];
// service1Data is 0-50
var service1Data = [5.50,4.58,5.67,5.50,5.50,5.25,7.00,6.75,5.67,5.58,4.92,5.50,4.67,4.33,5.25,5.42,5.33,6.33,4.92,5.50,5.42,6.17,6.17,5.67];
// service2Data is 51-80
var service2Data = [4.90,5.20,5.90,5.60,5.40,5.00,7.20,6.10,5.60,5.00,4.30,5.00,4.90,4.50,4.00,5.60,5.90,6.20,5.90,5.10,5.70,5.80,5.80,4.50];
// service3Data is 81-100
var service3Data = [6.25,4.42,5.67,6.08,5.00,5.83,7.08,6.42,6.08,6.33,4.50,5.67,4.75,4.25,4.17,5.17,4.83,6.67,5.08,4.92,5.17,6.50,6.58,5.42];
// service4Data is 101-154
var service4Data = [4.60,4.90,5.30,6.10,5.90,5.20,6.90,6.70,6.30,5.00,4.90,4.90,4.70,4.60,5.20,6.80,5.40,6.90,6.20,6.30,6.00,6.20,5.90,6.20];
// role1Data is 0-4
var role1Data = [5.33,4.67,5.75,6.50,5.17,4.75,7.42,6.75,6.33,5.42,4.50,6.08,4.17,4.50,4.83,5.42,5.08,6.83,5.83,5.17,5.50,6.50,6.58,6.08];
// role2Data is 5-18
var role2Data = [5.27,5.09,5.45,5.64,5.64,6.18,7.18,6.27,5.64,4.91,4.82,5.09,4.73,4.36,4.73,5.82,5.91,6.64,5.36,5.45,5.73,5.73,5.73,5.27];
// role3Data is 19-32
var role3Data = [4.78,4.67,6.56,5.22,6.44,4.78,7.00,6.78,5.78,5.56,5.22,4.89,4.56,4.11,4.22,5.89,5.22,5.44,6.44,6.78,6.00,6.33,6.22,5.33];
// role4Data is 33-60
var role4Data = [5.50,5.00,5.67,5.58,5.25,5.00,6.50,5.83,5.75,5.83,4.58,5.00,5.08,4.75,4.67,5.58,5.58,6.25,5.25,5.25,5.33,5.83,5.75,5.08];
// data from research for global norms/profiles
// sds realistic high
var norm1Data = [5.7,5.4,5.7,6.0,4.5,5.2,5.5,5.2,5.9,6.2,4.4,5.7,4.5,6.1,5.9,5.6,5.3,5.9,5.2,4.8,5.3];
// sds realistic low
var norm2Data = [6.1,6.2,4.4,5.2,4.7,6.4,5.4,5.2,5.1,6.0,4.5,5.1,7.2,5.9,6.0,5.1,6.7,5.5,5.2,5.1,5.9];
// sds investigative high
var norm3Data = [5.2,5.8,5.4,5.5,4.4,4.8,6.5,5.1,5.4,5.6,4.5,5.3,5.1,5.8,6.5,5.7,5.8,5.8,5.8,4.6,5.2];
// sds investigative low
var norm4Data = [6.5,6.0,4.8,5.4,4.6,6.7,4.7,5.6,5.4,6.7,4.5,5.7,6.7,5.8,5.7,5.1,6.1,5.2,5.0,5.0,5.9];
// sds social high
var norm5Data = [6.9,5.6,4.4,6.3,4.4,6.9,5.4,5.3,5.8,6.8,4.5,6.6,5.9,5.9,6.2,4.8,5.9,6.4,4.9,5.0,5.0];
// sds social low
var norm6Data = [4.1,6.4,6.0,4.6,4.8,3.6,5.9,5.0,4.7,5.4,4.5,4.0,5.4,6.3,5.8,6.6,6.1,5.1,6.3,5.0,6.0];
// sds enterprising high
var norm7Data = [6.7,5.6,4.8,6.9,4.4,6.6,5.2,5.7,6.8,6.9,4.4,6.6,5.3,6.2,6.2,5.1,5.3,6.3,5.0,5.1,5.6];
// sds enterprising low
var norm8Data = [4.6,6.6,4.8,4.5,4.2,4.4,5.5,4.6,4.2,5.4,4.1,4.1,6.7,6.1,6.4,5.9,6.7,5.7,6.1,4.3,5.7];
// sds conventional high
var norm9Data = [5.8,5.7,5.8,5.5,5.4,5.8,5.4,5.7,5.6,6.1,5.0,5.4,5.4,5.8,5.0,5.5,6.0,5.3,5.4,5.8,5.5];
// sds conventional low
var norm10Data = [6.1,5.8,4.4,5.9,3.9,5.9,5.2,5.4,5.7,6.3,3.9,5.5,6.3,6.0,6.6,5.0,5.8,6.3,5.3,4.4,5.6];
// corporate
var norm11Data = [6.1,5.0,5.5,5.8,5.9,6.5,7.4,5.0,6.0,5.5,5.9,6.1,5.2,4.1,4.7,5.2,5.1,6.0,5.1,5.5,5.1];
// engineers
var norm12Data = [5.3,5.9,5.4,5.6,5.0,5.3,7.8,4.6,5.5,5.5,4.9,5.4,4.8,5.4,6.0,5.5,5.5,6.2,5.9,5.2,5.6];
// scientists
var norm13Data = [4.5,5.4,4.8,5.4,4.6,4.5,8.3,4.8,5.0,4.8,4.3,5.0,5.4,5.1,6.5,5.8,5.0,6.9,6.7,4.9,5.3];
// emotional expressivity high
var norm14Data = [7.3,5.8,4.6,6.2,5.2,7.1,6.6,5.6,5.9,6.9,4.3,6.4,6.0,5.4,6.1,4.5,6.0,6.0,4.2,5.0,5.9];
// emotional expressivity low
var norm15Data = [5.1,5.8,5.7,5.0,5.5,5.5,6.5,5.7,4.9,5.5,5.3,5.0,5.3,5.9,5.5,6.1,6.0,5.3,5.8,5.3,5.5];
// emotional sensitivity high
var norm16Data = [6.4,6.0,4.5,5.7,5.2,6.9,6.5,5.3,5.6,6.4,4.9,5.3,5.8,5.8,6.2,5.3,6.4,6.1,5.0,4.9,5.6];
// emotional sensitivity low
var norm17Data = [5.2,5.5,6.1,5.1,5.3,5.2,6.3,5.8,5.2,5.7,5.3,5.2,5.1,5.8,5.3,6.1,5.6,5.0,5.6,5.3,5.6];
// emotional control high
var norm18Data = [5.4,5.5,4.0,5.7,5.9,5.5,6.6,5.6,5.5,5.9,4.7,5.4,5.7,5.6,6.2,6.2,5.5,6.1,5.6,5.1,5.5];
// emotional control low
var norm19Data = [6.1,5.8,5.4,5.4,5.2,6.4,6.4,5.6,5.4,6.1,5.2,5.6,5.6,5.5,5.4,5.3,6.2,5.4,5.2,5.1,5.6];
// social expressivity high
var norm20Data = [7.4,5.4,4.7,6.0,4.9,7.0,6.5,5.6,5.5,7.3,4.5,6.7,5.7,5.2,5.8,4.6,5.8,6.2,4.1,4.9,5.5];
// social expressivity low
var norm21Data = [4.8,5.8,5.9,4.9,5.8,5.2,6.6,5.6,4.9,5.1,5.2,4.8,5.3,5.8,5.5,6.2,5.9,5.1,6.0,5.3,5.6];
// social sensitivity high
var norm22Data = [6.0,7.0,5.5,4.7,4.9,6.3,6.3,4.6,4.8,6.3,5.0,4.7,5.6,5.7,5.8,5.2,7.1,5.0,5.0,5.3,6.4];
// social sensitivity low
var norm23Data = [5.8,4.8,5.5,5.7,5.7,5.8,6.6,6.3,5.7,5.9,5.3,5.9,5.4,5.1,5.2,5.6,5.3,5.7,5.4,5.3,5.1];
// social control high
var norm24Data = [6.7,4.8,4.5,6.4,5.9,6.6,6.8,6.2,6.1,6.3,4.9,6.9,6.1,4.7,5.5,5.0,5.3,6.5,4.7,5.3,5.2];
// social control low
var norm25Data = [5.3,6.2,5.9,4.7,5.4,5.4,6.3,5.2,4.7,5.7,5.4,4.8,5.3,5.8,5.6,5.8,6.3,5.0,5.6,5.2,5.8];
// empathy high
var norm26Data = [7.0,5.1,4.2,5.9,4.3,6.9,6.4,6.1,5.4,7.1,4.5,6.3,6.2,5.0,6.1,5.1,5.8,6.6,4.5,4.7,5.0];
// empathy low
var norm27Data = [4.6,7.1,5.8,5.0,4.9,4.6,6.0,4.2,5.2,5.5,4.6,4.1,5.2,6.7,6.3,6.1,6.5,5.1,6.1,5.4,6.3];
// high psych emotional
var norm28Data = [5.9,3.7,5.7,5.9,6.0,5.8,6.1,7.2,5.8,5.3,5.9,6.2,5.2,5.2,4.7,5.3,3.6,5.8,5.0,5.7,4.7];
// high psych social
var norm29Data = [7.1,4.6,4.9,6.8,5.3,6.8,6.2,6.2,6.4,6.3,5.4,5.4,5.6,5.5,5.5,4.5,4.2,6.1,4.6,5.5,5.2];
// high psych occupational
var norm30Data = [5.8,4.5,5.7,5.3,5.8,6.0,5.9,6.5,5.2,5.3,6.0,5.6,5.3,5.2,5.0,5.5,4.6,5.5,5.0,5.4,5.0];
// self-esteem high
var norm31Data = [6.6,3.6,5.3,6.9,6.0,6.6,4.7,7.1,7.1,5.9,6.0,6.8,5.3,5.2,5.1,5.3,3.8,6.0,4.5,6.1,4.2];
// self-esteem low
var norm32Data = [4.9,6.8,5.5,4.9,5.0,5.1,4.2,4.2,4.7,5.3,5.2,4.6,5.5,6.8,6.7,6.0,6.3,5.0,5.9,5.4,5.6];
var origin = 5.5;
var factorLabelsResearch = [['Extraversion','Introverted • Extroverted'],['Anxiety','Low-Anxiety • High-Anxiety'],['Tough-Mindedness','Receptive • Tough-Minded'],['Independence','Accommodating • Independent'],['Self-Control','Unrestrained • Self-Controlled'],['Warmth (A)','Reserved • Warm'],['Reasoning (B)','Concrete • Absract'],['Emotional Stability (C)','Reactive • Emotionally Stable'],['Dominance (E)','Deferential • Dominant'],['Liveliness (F)','Serious • Lively'],['Rule-Consciousness (G)','Expedient • Rule-Conscious'],['Social Boldness (H)','Shy • Socially Bold'],['Sensitivity (I)','Utilitarian • Sensitive'],['Vigilance (L)','Trusting • Vigilant'],['Abstractedness (M)','Grounded • Abstracted'],['Privateness','Forthright • Private'],['Apprehension (O)','Self-Assured • Apprehensive'],['Openness to Change (Q1)','Traditional • Open to Change'],['Self-Reliant (Q2)','Group-Oriented • Self-Reliant'],['Perfectionism (Q3)','Tolerates Disorder • Perfectionistic'],['Tension (Q4)','Relaxed • Tense']];
var globalProfiles = {
labels: factorLabelsResearch,
datasets: []};
globalProfiles.datasets.push({
data: role1Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(79,143,0,.75)',
label: '0-4'
});
globalProfiles.datasets.push({
data: role2Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: '5-18'
});
globalProfiles.datasets.push({
data: role3Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: '19-32'
});
globalProfiles.datasets.push({
data: role4Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: '33-60'
});
globalProfiles.datasets.push({
data: service1Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(79,143,0,.75)',
label: '0-50'
});
globalProfiles.datasets.push({
data: service2Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: '51-80'
});
globalProfiles.datasets.push({
data: service3Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: '81-100'
});
globalProfiles.datasets.push({
data: service4Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: '101-154'
});
globalProfiles.datasets.push({
data: program1Data.map(function(value) { return value-origin; }),
backgroundColor: 'green',
label: 'Program 1'
});
globalProfiles.datasets.push({
data: program2Data.map(function(value) { return value-origin; }),
backgroundColor: 'green',
label: 'Program 2'
});
globalProfiles.datasets.push({
data: function1Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'G&A'
});
globalProfiles.datasets.push({
data: function2Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Sales & Service'
});
globalProfiles.datasets.push({
data: function3Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'Technology'
});
globalProfiles.datasets.push({
data: femaleData.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'Female'
});
globalProfiles.datasets.push({
data: maleData.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'Male'
});
globalProfiles.datasets.push({
data: allData.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'All'
});
globalProfiles.datasets.push({
data: norm1Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.99)',
label: 'High Realistic'
});
globalProfiles.datasets.push({
data: norm2Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.35)',
label: 'Low Realistic'
});
globalProfiles.datasets.push({
data: norm3Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'High Investigative'
});
globalProfiles.datasets.push({
data: norm4Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.15)',
label: 'Low Investigative'
});
globalProfiles.datasets.push({
data: norm5Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(100,190,194,.99)',
label: 'High Social'
});
globalProfiles.datasets.push({
data: norm6Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(100,190,194,.35)',
label: 'Low Social'
});
globalProfiles.datasets.push({
data: norm7Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Enterprising'
});
globalProfiles.datasets.push({
data: norm8Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(100,190,194,.15)',
label: 'Low Enterprising'
});
globalProfiles.datasets.push({
data: norm9Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(255,192,0,.99)',
label: 'High Conventional'
});
globalProfiles.datasets.push({
data: norm10Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(255,192,0,.35)',
label: 'Low Conventional'
});
globalProfiles.datasets.push({
data: norm11Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.85)',
label: 'Corporate'
});
globalProfiles.datasets.push({
data: norm12Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.5)',
label: 'Engineers'
});
globalProfiles.datasets.push({
data: norm13Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.25)',
label: 'Scientists'
});
globalProfiles.datasets.push({
data: norm14Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Emotional Expressivity'
});
globalProfiles.datasets.push({
data: norm15Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'Low Emotional Expressivity'
});
globalProfiles.datasets.push({
data: norm16Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Emotional Sensitivity'
});
globalProfiles.datasets.push({
data: norm17Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(79,143,0,.75)',
label: 'Low Emotional Sensitivity'
});
globalProfiles.datasets.push({
data: norm18Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'High Emotional Control'
});
globalProfiles.datasets.push({
data: norm19Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Low Emotional Control'
});
globalProfiles.datasets.push({
data: norm20Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Social Expressivity'
});
globalProfiles.datasets.push({
data: norm21Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(79,143,0,.75)',
label: 'Low Social Expressivity'
});
globalProfiles.datasets.push({
data: norm22Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'High Social Sensitivity'
});
globalProfiles.datasets.push({
data: norm23Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Low Social Sensitivity'
});
globalProfiles.datasets.push({
data: norm24Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Social Control'
});
globalProfiles.datasets.push({
data: norm25Data.map(function(value) { return value-origin; }),
backgroundColor: 'green',
label: 'Low Social Control'
});
globalProfiles.datasets.push({
data: norm26Data.map(function(value) { return value-origin; }),
backgroundColor: 'green',
label: 'High Empathy'
});
globalProfiles.datasets.push({
data: norm27Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'Low Empathy'
});
globalProfiles.datasets.push({
data: norm28Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'High Psych Emotional'
});
globalProfiles.datasets.push({
data: norm29Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Psych Social'
});
globalProfiles.datasets.push({
data: norm30Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Psych Occupational'
});
globalProfiles.datasets.push({
data: norm31Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'High Self-Esteem'
});
globalProfiles.datasets.push({
data: norm32Data.map(function(value) { return value-origin; }),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'Low Self-Esteem'
});
var ctxGlobalProfiles = document.getElementById('global-profiles').getContext('2d');
window.globalProfiles = new Chart(ctxGlobalProfiles, {
type: 'horizontalBar',
data: globalProfiles,
options: {
elements: {
rectangle: {
borderWidth: 2,
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
legend: {
position: 'top',
},
tooltips: {
enabled: true,
backgroundColor: 'rgba(100,190,194,.95)',
bodyFontColor: 'rgba(26,78,125,.99)',
titleFontColor: 'rgba(26,78,125,.99)',
borderColor: 'rgba(26,78,125,.99)',
borderWidth: 1,
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.xLabel + 5.5;
return label;
}
}
},
scales: {
yAxes: [{
display: true,
offsetGridlines: true
}],
xAxes: [{
ticks: {
min: -4.5,
max: 4.5,
callback: function(value, index, values) {
return value+5.5;
},
display: true
}
}]
},
title: {
display: true,
text: ''
}
}
});
// add toggles
jQuery('#toggle-profiles').click(function() {
globalProfiles.data.datasets.forEach(function(ds) {
ds.hidden = !ds.hidden;
});
globalProfiles.update();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<div class='uk-panel uk-panel-box uk-panel-box-primary'>
<h3>Profiles from Research Data <br />and Company Data</h3>
<div class='uk-panel-box uk-panel-box-secondary uk-margin'>
<h4>The 5 Global & 16 Primary Factors</h4>
<button class='uk-button uk-button-small uk-button-primary' id='toggle-profiles'>show/hide all</button>
<canvas id='global-profiles' height='800'></canvas>
</div>
What I want to do is have the first 16 datasets "grouped" together and somehow visually separated from the rest of the datasets in the legend.
Is there a way to do this?

Answer 1

UPDATE: I figured out how to do a custom legend using the legendCallback functionality... however, I haven't figured out how to make the legend items "clickable" to select/deselect the datasets. (I'll post a new question for that)
Here's what I've got at least for the custom legend:
var allData = [5.36, 4.75, 5.64, 5.82, 5.43, 5.34, 7.05, 6.50, 5.91, 5.52, 4.66, 5.30, 4.75, 4.41, 4.66, 5.70, 5.34, 6.52, 5.48, 5.43, 5.55, 6.18, 6.14, 5.45];
var femaleData = [5.33, 5.17, 5.44, 5.44, 5.61, 5.61, 6.67, 6.22, 5.83, 5.61, 4.56, 4.67, 5.61, 4.28, 4.11, 5.83, 5.61, 6.33, 5.50, 5.56, 6.22, 5.94, 5.72, 4.83];
var maleData = [5.38, 4.46, 5.77, 6.08, 5.31, 5.15, 7.31, 6.69, 5.96, 5.46, 4.73, 5.73, 4.15, 4.50, 5.04, 5.62, 5.15, 6.65, 5.46, 5.35, 5.08, 6.35, 6.42, 5.88];
// function1Data is G&A
var function1Data = [5.18, 5.18, 6.09, 5.09, 5.36, 5.09, 6.45, 6.55, 5.36, 5.64, 4.55, 5.09, 4.82, 4.55, 4.91, 6.00, 5.91, 5.64, 5.45, 5.27, 6.27, 5.73, 5.64, 4.82];
// function2Data is Sales & Service
var function2Data = [5.63, 4.50, 5.56, 5.88, 5.63, 6.13, 7.19, 6.75, 5.75, 5.69, 4.88, 5.44, 4.75, 4.44, 4.31, 5.94, 5.06, 6.63, 5.44, 5.75, 5.25, 6.50, 6.50, 5.63];
// function3Data is tech
var function3Data = [5.24, 4.71, 5.41, 6.24, 5.29, 4.76, 7.29, 6.24, 6.41, 5.29, 4.53, 5.29, 4.71, 4.29, 4.82, 5.29, 5.24, 7.00, 5.53, 5.24, 5.35, 6.18, 6.12, 5.71];
// function4Data is dev
var program1Data = [5.08, 4.54, 5.58, 5.58, 5.42, 5.29, 7.13, 6.58, 5.63, 5.54, 4.58, 4.79, 4.88, 4.54, 4.46, 6.04, 5.04, 6.67, 5.75, 5.33, 5.33, 6.46, 5.96, 5.00];
var program2Data = [5.21, 4.58, 5.89, 5.58, 5.42, 5.32, 6.89, 6.53, 5.68, 5.42, 4.58, 5.37, 4.47, 4.32, 4.79, 5.84, 5.32, 6.26, 5.68, 5.47, 5.32, 6.21, 6.16, 5.37];
// service1Data is 0-50
var service1Data = [5.50, 4.58, 5.67, 5.50, 5.50, 5.25, 7.00, 6.75, 5.67, 5.58, 4.92, 5.50, 4.67, 4.33, 5.25, 5.42, 5.33, 6.33, 4.92, 5.50, 5.42, 6.17, 6.17, 5.67];
// service2Data is 51-80
var service2Data = [4.90, 5.20, 5.90, 5.60, 5.40, 5.00, 7.20, 6.10, 5.60, 5.00, 4.30, 5.00, 4.90, 4.50, 4.00, 5.60, 5.90, 6.20, 5.90, 5.10, 5.70, 5.80, 5.80, 4.50];
// service3Data is 81-100
var service3Data = [6.25, 4.42, 5.67, 6.08, 5.00, 5.83, 7.08, 6.42, 6.08, 6.33, 4.50, 5.67, 4.75, 4.25, 4.17, 5.17, 4.83, 6.67, 5.08, 4.92, 5.17, 6.50, 6.58, 5.42];
// service4Data is 101-154
var service4Data = [4.60, 4.90, 5.30, 6.10, 5.90, 5.20, 6.90, 6.70, 6.30, 5.00, 4.90, 4.90, 4.70, 4.60, 5.20, 6.80, 5.40, 6.90, 6.20, 6.30, 6.00, 6.20, 5.90, 6.20];
// role1Data is 0-4
var role1Data = [5.33, 4.67, 5.75, 6.50, 5.17, 4.75, 7.42, 6.75, 6.33, 5.42, 4.50, 6.08, 4.17, 4.50, 4.83, 5.42, 5.08, 6.83, 5.83, 5.17, 5.50, 6.50, 6.58, 6.08];
// role2Data is 5-18
var role2Data = [5.27, 5.09, 5.45, 5.64, 5.64, 6.18, 7.18, 6.27, 5.64, 4.91, 4.82, 5.09, 4.73, 4.36, 4.73, 5.82, 5.91, 6.64, 5.36, 5.45, 5.73, 5.73, 5.73, 5.27];
// role3Data is 19-32
var role3Data = [4.78, 4.67, 6.56, 5.22, 6.44, 4.78, 7.00, 6.78, 5.78, 5.56, 5.22, 4.89, 4.56, 4.11, 4.22, 5.89, 5.22, 5.44, 6.44, 6.78, 6.00, 6.33, 6.22, 5.33];
// role4Data is 33-60
var role4Data = [5.50, 5.00, 5.67, 5.58, 5.25, 5.00, 6.50, 5.83, 5.75, 5.83, 4.58, 5.00, 5.08, 4.75, 4.67, 5.58, 5.58, 6.25, 5.25, 5.25, 5.33, 5.83, 5.75, 5.08];
// data from research for global norms/profiles
// sds realistic high
var norm1Data = [5.7, 5.4, 5.7, 6.0, 4.5, 5.2, 5.5, 5.2, 5.9, 6.2, 4.4, 5.7, 4.5, 6.1, 5.9, 5.6, 5.3, 5.9, 5.2, 4.8, 5.3];
// sds realistic low
var norm2Data = [6.1, 6.2, 4.4, 5.2, 4.7, 6.4, 5.4, 5.2, 5.1, 6.0, 4.5, 5.1, 7.2, 5.9, 6.0, 5.1, 6.7, 5.5, 5.2, 5.1, 5.9];
// sds investigative high
var norm3Data = [5.2, 5.8, 5.4, 5.5, 4.4, 4.8, 6.5, 5.1, 5.4, 5.6, 4.5, 5.3, 5.1, 5.8, 6.5, 5.7, 5.8, 5.8, 5.8, 4.6, 5.2];
// sds investigative low
var norm4Data = [6.5, 6.0, 4.8, 5.4, 4.6, 6.7, 4.7, 5.6, 5.4, 6.7, 4.5, 5.7, 6.7, 5.8, 5.7, 5.1, 6.1, 5.2, 5.0, 5.0, 5.9];
// sds social high
var norm5Data = [6.9, 5.6, 4.4, 6.3, 4.4, 6.9, 5.4, 5.3, 5.8, 6.8, 4.5, 6.6, 5.9, 5.9, 6.2, 4.8, 5.9, 6.4, 4.9, 5.0, 5.0];
// sds social low
var norm6Data = [4.1, 6.4, 6.0, 4.6, 4.8, 3.6, 5.9, 5.0, 4.7, 5.4, 4.5, 4.0, 5.4, 6.3, 5.8, 6.6, 6.1, 5.1, 6.3, 5.0, 6.0];
// sds enterprising high
var norm7Data = [6.7, 5.6, 4.8, 6.9, 4.4, 6.6, 5.2, 5.7, 6.8, 6.9, 4.4, 6.6, 5.3, 6.2, 6.2, 5.1, 5.3, 6.3, 5.0, 5.1, 5.6];
// sds enterprising low
var norm8Data = [4.6, 6.6, 4.8, 4.5, 4.2, 4.4, 5.5, 4.6, 4.2, 5.4, 4.1, 4.1, 6.7, 6.1, 6.4, 5.9, 6.7, 5.7, 6.1, 4.3, 5.7];
// sds conventional high
var norm9Data = [5.8, 5.7, 5.8, 5.5, 5.4, 5.8, 5.4, 5.7, 5.6, 6.1, 5.0, 5.4, 5.4, 5.8, 5.0, 5.5, 6.0, 5.3, 5.4, 5.8, 5.5];
// sds conventional low
var norm10Data = [6.1, 5.8, 4.4, 5.9, 3.9, 5.9, 5.2, 5.4, 5.7, 6.3, 3.9, 5.5, 6.3, 6.0, 6.6, 5.0, 5.8, 6.3, 5.3, 4.4, 5.6];
// corporate
var norm11Data = [6.1, 5.0, 5.5, 5.8, 5.9, 6.5, 7.4, 5.0, 6.0, 5.5, 5.9, 6.1, 5.2, 4.1, 4.7, 5.2, 5.1, 6.0, 5.1, 5.5, 5.1];
// engineers
var norm12Data = [5.3, 5.9, 5.4, 5.6, 5.0, 5.3, 7.8, 4.6, 5.5, 5.5, 4.9, 5.4, 4.8, 5.4, 6.0, 5.5, 5.5, 6.2, 5.9, 5.2, 5.6];
// scientists
var norm13Data = [4.5, 5.4, 4.8, 5.4, 4.6, 4.5, 8.3, 4.8, 5.0, 4.8, 4.3, 5.0, 5.4, 5.1, 6.5, 5.8, 5.0, 6.9, 6.7, 4.9, 5.3];
// emotional expressivity high
var norm14Data = [7.3, 5.8, 4.6, 6.2, 5.2, 7.1, 6.6, 5.6, 5.9, 6.9, 4.3, 6.4, 6.0, 5.4, 6.1, 4.5, 6.0, 6.0, 4.2, 5.0, 5.9];
// emotional expressivity low
var norm15Data = [5.1, 5.8, 5.7, 5.0, 5.5, 5.5, 6.5, 5.7, 4.9, 5.5, 5.3, 5.0, 5.3, 5.9, 5.5, 6.1, 6.0, 5.3, 5.8, 5.3, 5.5];
// emotional sensitivity high
var norm16Data = [6.4, 6.0, 4.5, 5.7, 5.2, 6.9, 6.5, 5.3, 5.6, 6.4, 4.9, 5.3, 5.8, 5.8, 6.2, 5.3, 6.4, 6.1, 5.0, 4.9, 5.6];
// emotional sensitivity low
var norm17Data = [5.2, 5.5, 6.1, 5.1, 5.3, 5.2, 6.3, 5.8, 5.2, 5.7, 5.3, 5.2, 5.1, 5.8, 5.3, 6.1, 5.6, 5.0, 5.6, 5.3, 5.6];
// emotional control high
var norm18Data = [5.4, 5.5, 4.0, 5.7, 5.9, 5.5, 6.6, 5.6, 5.5, 5.9, 4.7, 5.4, 5.7, 5.6, 6.2, 6.2, 5.5, 6.1, 5.6, 5.1, 5.5];
// emotional control low
var norm19Data = [6.1, 5.8, 5.4, 5.4, 5.2, 6.4, 6.4, 5.6, 5.4, 6.1, 5.2, 5.6, 5.6, 5.5, 5.4, 5.3, 6.2, 5.4, 5.2, 5.1, 5.6];
// social expressivity high
var norm20Data = [7.4, 5.4, 4.7, 6.0, 4.9, 7.0, 6.5, 5.6, 5.5, 7.3, 4.5, 6.7, 5.7, 5.2, 5.8, 4.6, 5.8, 6.2, 4.1, 4.9, 5.5];
// social expressivity low
var norm21Data = [4.8, 5.8, 5.9, 4.9, 5.8, 5.2, 6.6, 5.6, 4.9, 5.1, 5.2, 4.8, 5.3, 5.8, 5.5, 6.2, 5.9, 5.1, 6.0, 5.3, 5.6];
// social sensitivity high
var norm22Data = [6.0, 7.0, 5.5, 4.7, 4.9, 6.3, 6.3, 4.6, 4.8, 6.3, 5.0, 4.7, 5.6, 5.7, 5.8, 5.2, 7.1, 5.0, 5.0, 5.3, 6.4];
// social sensitivity low
var norm23Data = [5.8, 4.8, 5.5, 5.7, 5.7, 5.8, 6.6, 6.3, 5.7, 5.9, 5.3, 5.9, 5.4, 5.1, 5.2, 5.6, 5.3, 5.7, 5.4, 5.3, 5.1];
// social control high
var norm24Data = [6.7, 4.8, 4.5, 6.4, 5.9, 6.6, 6.8, 6.2, 6.1, 6.3, 4.9, 6.9, 6.1, 4.7, 5.5, 5.0, 5.3, 6.5, 4.7, 5.3, 5.2];
// social control low
var norm25Data = [5.3, 6.2, 5.9, 4.7, 5.4, 5.4, 6.3, 5.2, 4.7, 5.7, 5.4, 4.8, 5.3, 5.8, 5.6, 5.8, 6.3, 5.0, 5.6, 5.2, 5.8];
// empathy high
var norm26Data = [7.0, 5.1, 4.2, 5.9, 4.3, 6.9, 6.4, 6.1, 5.4, 7.1, 4.5, 6.3, 6.2, 5.0, 6.1, 5.1, 5.8, 6.6, 4.5, 4.7, 5.0];
// empathy low
var norm27Data = [4.6, 7.1, 5.8, 5.0, 4.9, 4.6, 6.0, 4.2, 5.2, 5.5, 4.6, 4.1, 5.2, 6.7, 6.3, 6.1, 6.5, 5.1, 6.1, 5.4, 6.3];
// high psych emotional
var norm28Data = [5.9, 3.7, 5.7, 5.9, 6.0, 5.8, 6.1, 7.2, 5.8, 5.3, 5.9, 6.2, 5.2, 5.2, 4.7, 5.3, 3.6, 5.8, 5.0, 5.7, 4.7];
// high psych social
var norm29Data = [7.1, 4.6, 4.9, 6.8, 5.3, 6.8, 6.2, 6.2, 6.4, 6.3, 5.4, 5.4, 5.6, 5.5, 5.5, 4.5, 4.2, 6.1, 4.6, 5.5, 5.2];
// high psych occupational
var norm30Data = [5.8, 4.5, 5.7, 5.3, 5.8, 6.0, 5.9, 6.5, 5.2, 5.3, 6.0, 5.6, 5.3, 5.2, 5.0, 5.5, 4.6, 5.5, 5.0, 5.4, 5.0];
// self-esteem high
var norm31Data = [6.6, 3.6, 5.3, 6.9, 6.0, 6.6, 4.7, 7.1, 7.1, 5.9, 6.0, 6.8, 5.3, 5.2, 5.1, 5.3, 3.8, 6.0, 4.5, 6.1, 4.2];
// self-esteem low
var norm32Data = [4.9, 6.8, 5.5, 4.9, 5.0, 5.1, 4.2, 4.2, 4.7, 5.3, 5.2, 4.6, 5.5, 6.8, 6.7, 6.0, 6.3, 5.0, 5.9, 5.4, 5.6];
var origin = 5.5;
var factorLabels = [
['Extraversion', 'Introverted • Extroverted'],
['Anxiety', 'Low-Anxiety • High-Anxiety'],
['Tough-Mindedness', 'Receptive • Tough-Minded'],
['Independence', 'Accommodating • Independent'],
['Self-Control', 'Unrestrained • Self-Controlled'],
['Warmth (A)', 'Reserved • Warm'],
['Reasoning (B)', 'Concrete • Absract'],
['Emotional Stability (C)', 'Reactive • Emotionally Stable'],
['Dominance (E)', 'Deferential • Dominant'],
['Liveliness (F)', 'Serious • Lively'],
['Rule-Consciousness (G)', 'Expedient • Rule-Conscious'],
['Social Boldness (H)', 'Shy • Socially Bold'],
['Sensitivity (I)', 'Utilitarian • Sensitive'],
['Vigilance (L)', 'Trusting • Vigilant'],
['Abstractedness (M)', 'Grounded • Abstracted'],
['Privateness', 'Forthright • Private'],
['Apprehension (O)', 'Self-Assured • Apprehensive'],
['Openness to Change (Q1)', 'Traditional • Open to Change'],
['Self-Reliant (Q2)', 'Group-Oriented • Self-Reliant'],
['Perfectionism (Q3)', 'Tolerates Disorder • Perfectionistic'],
['Tension (Q4)', 'Relaxed • Tense'],
['Adjustment', 'Emotionally Fragile', ' • Emotionally Resilient'],
['Leadership', 'Non-Leader • Leader'],
['Creativity', 'Status Quo • Innovative']
];
var factorLabelsResearch = [
['Extraversion', 'Introverted • Extroverted'],
['Anxiety', 'Low-Anxiety • High-Anxiety'],
['Tough-Mindedness', 'Receptive • Tough-Minded'],
['Independence', 'Accommodating • Independent'],
['Self-Control', 'Unrestrained • Self-Controlled'],
['Warmth (A)', 'Reserved • Warm'],
['Reasoning (B)', 'Concrete • Absract'],
['Emotional Stability (C)', 'Reactive • Emotionally Stable'],
['Dominance (E)', 'Deferential • Dominant'],
['Liveliness (F)', 'Serious • Lively'],
['Rule-Consciousness (G)', 'Expedient • Rule-Conscious'],
['Social Boldness (H)', 'Shy • Socially Bold'],
['Sensitivity (I)', 'Utilitarian • Sensitive'],
['Vigilance (L)', 'Trusting • Vigilant'],
['Abstractedness (M)', 'Grounded • Abstracted'],
['Privateness', 'Forthright • Private'],
['Apprehension (O)', 'Self-Assured • Apprehensive'],
['Openness to Change (Q1)', 'Traditional • Open to Change'],
['Self-Reliant (Q2)', 'Group-Oriented • Self-Reliant'],
['Perfectionism (Q3)', 'Tolerates Disorder • Perfectionistic'],
['Tension (Q4)', 'Relaxed • Tense']
];
var factorLabelsThemes = ['Investigative', 'Realistic', 'Enterprising', 'Artistic', 'Conventional', 'Social'];
var factorLabelsLeft = ['Introverted', 'Low Anxiety', 'Receptive', 'Accomodating', 'Unrestrained', 'Reserved', 'Concrete', 'Reactive', 'Deferential', 'Serious', 'Expedient', 'Shy', 'Utilitarian', 'Trusting', 'Grounded', 'Forthright', 'Self-Asured', 'Traditional', 'Group-Oriented', 'Tolerates Disorder', 'Relaxed', 'Emotionally Fragile', 'Non-Leader', 'Status Quo'];
var factorLabelsRight = ['Extroverted', 'High Anxiety', 'Tough-Minded', 'Independent', 'Self-Controlled', 'Warm', 'Abstract', 'Emotionally Stable', 'Dominant', 'Lively', 'Rule-Conscious', 'Socially Bold', 'Sensitive', 'Vigilant', 'Abstracted', 'Private', 'Apprehensive', 'Open to Change', 'Self-Reliant', 'Perfectionistic', 'Tense', 'Emotionally Resilient', 'Leader', 'Innovative'];
var globalProfiles = {
labels: factorLabelsResearch,
datasets: []
};
globalProfiles.datasets.push({
data: role1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: '0-4'
});
globalProfiles.datasets.push({
data: role2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: '5-18'
});
globalProfiles.datasets.push({
data: role3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: '19-32'
});
globalProfiles.datasets.push({
data: role4Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: '33-60'
});
globalProfiles.datasets.push({
data: service1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: '0-50'
});
globalProfiles.datasets.push({
data: service2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: '51-80'
});
globalProfiles.datasets.push({
data: service3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: '81-100'
});
globalProfiles.datasets.push({
data: service4Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: '101-154'
});
globalProfiles.datasets.push({
data: program1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'Program 1'
});
globalProfiles.datasets.push({
data: program2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'Program 2'
});
globalProfiles.datasets.push({
data: function1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'G&A'
});
globalProfiles.datasets.push({
data: function2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Sales & Service'
});
globalProfiles.datasets.push({
data: function3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'Technology'
});
globalProfiles.datasets.push({
data: femaleData.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'Female'
});
globalProfiles.datasets.push({
data: maleData.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'Male'
});
globalProfiles.datasets.push({
data: allData.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'All'
});
globalProfiles.datasets.push({
data: norm1Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.99)',
label: 'High Realistic'
});
globalProfiles.datasets.push({
data: norm2Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.35)',
label: 'Low Realistic'
});
globalProfiles.datasets.push({
data: norm3Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'High Investigative'
});
globalProfiles.datasets.push({
data: norm4Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.15)',
label: 'Low Investigative'
});
globalProfiles.datasets.push({
data: norm5Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.99)',
label: 'High Social'
});
globalProfiles.datasets.push({
data: norm6Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.35)',
label: 'Low Social'
});
globalProfiles.datasets.push({
data: norm7Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Enterprising'
});
globalProfiles.datasets.push({
data: norm8Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.15)',
label: 'Low Enterprising'
});
globalProfiles.datasets.push({
data: norm9Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(255,192,0,.99)',
label: 'High Conventional'
});
globalProfiles.datasets.push({
data: norm10Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(255,192,0,.35)',
label: 'Low Conventional'
});
globalProfiles.datasets.push({
data: norm11Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.85)',
label: 'Corporate'
});
globalProfiles.datasets.push({
data: norm12Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.5)',
label: 'Engineers'
});
globalProfiles.datasets.push({
data: norm13Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.25)',
label: 'Scientists'
});
globalProfiles.datasets.push({
data: norm14Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Emotional Expressivity'
});
globalProfiles.datasets.push({
data: norm15Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'Low Emotional Expressivity'
});
globalProfiles.datasets.push({
data: norm16Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Emotional Sensitivity'
});
globalProfiles.datasets.push({
data: norm17Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: 'Low Emotional Sensitivity'
});
globalProfiles.datasets.push({
data: norm18Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'High Emotional Control'
});
globalProfiles.datasets.push({
data: norm19Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Low Emotional Control'
});
globalProfiles.datasets.push({
data: norm20Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Social Expressivity'
});
globalProfiles.datasets.push({
data: norm21Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(79,143,0,.75)',
label: 'Low Social Expressivity'
});
globalProfiles.datasets.push({
data: norm22Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'High Social Sensitivity'
});
globalProfiles.datasets.push({
data: norm23Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'Low Social Sensitivity'
});
globalProfiles.datasets.push({
data: norm24Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Social Control'
});
globalProfiles.datasets.push({
data: norm25Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'Low Social Control'
});
globalProfiles.datasets.push({
data: norm26Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'green',
label: 'High Empathy'
});
globalProfiles.datasets.push({
data: norm27Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(83, 134, 155,.75)',
label: 'Low Empathy'
});
globalProfiles.datasets.push({
data: norm28Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(182, 87, 56,.75)',
label: 'High Psych Emotional'
});
globalProfiles.datasets.push({
data: norm29Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'High Psych Social'
});
globalProfiles.datasets.push({
data: norm30Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(100,190,194,.75)',
label: 'High Psych Occupational'
});
globalProfiles.datasets.push({
data: norm31Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(26,78,125,.75)',
label: 'High Self-Esteem'
});
globalProfiles.datasets.push({
data: norm32Data.map(function(value) {
return value - origin;
}),
backgroundColor: 'rgba(103, 182, 93,.75)',
label: 'Low Self-Esteem'
});
var ctxGlobalProfiles = document.getElementById('global-profiles').getContext('2d');
var myLegendContainer = document.getElementById("chart-legend");
var myGlobalProfiles = new Chart(ctxGlobalProfiles, {
type: 'horizontalBar',
data: globalProfiles,
options: {
elements: {
rectangle: {
borderWidth: 2,
}
},
layout: {
padding: {
left: 0,
right: 0,
top: 0,
bottom: 0
}
},
responsive: true,
legend: {
display: false,
},
legendCallback: function(chart) {
var legendHtml = [];
legendHtml.push('<ul>');
legendHtml.push('<h5>Company Data</h5>');
for (var i = 0; i < 16; i++) {
legendHtml.push('<li>');
legendHtml.push('<span class="chart-color" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span><span>' + chart.data.datasets[i].label + '</span>');
legendHtml.push('</li>')
}
legendHtml.push('<hr />');
legendHtml.push('<h5>Research Data</h5>');
for (var i = 16; i < chart.data.datasets.length; i++) {
legendHtml.push('<li>');
legendHtml.push('<span class="chart-color" style="background-color:' + chart.data.datasets[i].backgroundColor + '"></span><span>' + chart.data.datasets[i].label + '</span>');
legendHtml.push('</li>')
}
legendHtml.push('</ul>');
return legendHtml.join("");
},
tooltips: {
enabled: true,
backgroundColor: 'rgba(100,190,194,.95)',
bodyFontColor: 'rgba(26,78,125,.99)',
titleFontColor: 'rgba(26,78,125,.99)',
borderColor: 'rgba(26,78,125,.99)',
borderWidth: 1,
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.xLabel + 5.5;
return label;
}
}
},
scales: {
yAxes: [{
display: true,
offsetGridlines: true
}],
xAxes: [{
ticks: {
min: -4.5,
max: 4.5,
callback: function(value, index, values) {
return value + 5.5;
},
display: true
}
}]
},
title: {
display: true,
text: ''
}
}
});
myLegendContainer.innerHTML = myGlobalProfiles.generateLegend();
jQuery('#toggle-profiles').click(function() {
myGlobalProfiles.data.datasets.forEach(function(ds) {
ds.hidden = !ds.hidden;
});
myGlobalProfiles.update();
});
h4 {
text-align: center;
}
ul {
list-style: none;
}
li {
display: inline-block;
padding: 0 10px;
}
li.hidden {
text-decoration: line-through;
}
li span.chart-color {
border-radius: 5px;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Profiles from Research Data <br />and Company Data</h3>
<div class='uk-panel-box uk-panel-box-secondary uk-margin'>
<h4>The 5 Global & 16 Primary Factors</h4>
<button id='toggle-profiles'>show/hide all</button>
<div id="chart-legend"></div>
<canvas id='global-profiles' height='800'></canvas>
</div>