this is my static chart js.
Code: Select all
let source = [
{SummaryId:1, FullName:"wadelopez", y:4.09, x:2.0, Behavioral:'Capable', Competency: 'Passive'},
{SummaryId:2, FullName:"sethellis", y:3.75, x:1.47, Behavioral:'Aware', Competency: 'Passive'},
{SummaryId:3, FullName:"stellagibson", y:2.13, x:1.71, Behavioral:'Fluent', Competency: 'Apathetic'},
{SummaryId:4, FullName:"verafisher", y:4.55, x:2.47, Behavioral:'Coach', Competency: 'Motivated'},
{SummaryId:5, FullName:"lucythomas", y:3.63, x:1.47, Behavioral:'Aware', Competency: 'Passive'},
{SummaryId:6, FullName:"lewismorgan", y:4.0, x:1.35, Behavioral:'Aware', Competency: 'Passive'},
{SummaryId:7, FullName:"blakesmith", y:4.55, x:2.59, Behavioral:'Coach', Competency: 'Motivated'},
{SummaryId:8, FullName:"antonionewton", y:3.91, x:1.35, Behavioral:'Aware', Competency: 'Passive'},
{SummaryId:9, FullName:"julianperez", y:3.63, x:1.82, Behavioral:'Fluent', Competency: 'Passive'},
{SummaryId:10, FullName:"milaburns", y:2.63, x:1.24, Behavioral:'Skeptic', Competency: 'Apathetic'},
{SummaryId:11, FullName:"leonaford", y:3.45, x:1.41, Behavioral:'Aware', Competency: 'Passive'},
{SummaryId:12, FullName:"lorettagriffin", y:4.5, x:2.0, Behavioral:'Capable', Competency: 'Motivated'},
{SummaryId:13, FullName:"jorgesherman", y:4.73, x:2.65, Behavioral:'Coach', Competency: 'Motivated'},
{SummaryId:14, FullName:"traceyallen", y:3.36, x:1.82, Behavioral:'Fluent', Competency: 'Passive'},
{SummaryId:15, FullName: "bentleyharris", y: 2.75, x: 1.12, Behavioral:'Skeptic', Competency: 'Apathetic'},
{SummaryId:16, FullName: "johndoe", y: 4.45, x: 1.12, Behavioral:'Apathetic', Competency: 'Motivated'},
{SummaryId:17, FullName: "scarletwitch", y: 2.75, x: 2.35, Behavioral:'Coach', Competency: 'Apathetic'},
{SummaryId:18, FullName: "steverogers", y: 3.5, x: 2.45, Behavioral:'Coach', Competency: 'Passive'},
{SummaryId:19, FullName: "blackwidow", y: 4.75, x: 1.75, Behavioral:'Fluent', Competency: 'Motivated'},
{SummaryId:20, FullName: "peterparker", y: 1.75, x: 3, Behavioral:'Coach', Competency: 'Apathetic'}
];
const plotLineX = 2;
const plotLineY = 4.25;
const quadrant = {
// I
upperRight: { data: [], color: "#00FF00" },
// II
upperLeft: { data: [], color: "#FFA500" },
// III
lowerLeft: { data: [], color: "#FF0000" },
// IV
lowerRight: { data: [], color: "#FFFF00" },
};
source.forEach(item => {
const {x, y} = item;
const vertical = (y > plotLineY) ? 'upper' : 'lower';
const horizontal = (x > plotLineX) ? 'Right' : 'Left';
const target = vertical + horizontal;
quadrant[target].data.push(item);
});
const highcharts = d3.select('.highcharts');
// follow the margin convention to give space around the visualization for the axes and their labels
const margin = {
top: 50,
right: 100,
bottom: 100,
left: 100,
};
const space = {
right: 400};
const width = 700 - (margin.right + margin.left);
const height = 500 - (margin.top + margin.bottom);
// the svg is a container 700x500
// ! by default, as the size can be altered in the stylesheet
const container = highcharts
.append('container')
.attr('viewBox', `0 0 ${width + (margin.right + margin.left + space)} ${height + (margin.top + margin.bottom)}`)
.attr('width', width + (margin.right + margin.left))
.attr('height', height + (margin.top + margin.bottom));
// Tooltip
const tooltip = d3
.select("body")
.append("div")
.attr("id", "tooltip")
.style("opacity", 0);
// the group is translated inside the 700x500 container
// ! it does not have a size, as group elements wrap around the nested elements
// the visualization can however use the width and height and be centered in the svg container
const group = container
.append('g')
.attr('transform', `translate(${margin.left} ${margin.top})`);
const xScale = d3
.scaleLinear()
// consider the maximum value found in the dataset
.domain([ 1, 3 ])
.range([0, width])
.nice();
// y scale: petal length
const yScale = d3
.scaleLinear()
.domain([ 1, 5 ])
.range([height, 0])
.nice();
const series = [quadrant.upperRight, quadrant.upperLeft, quadrant.lowerLeft, quadrant.lowerRight];
Highcharts.chart('container', {
chart: {
data: [],
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
credits: {
enabled: false
},
legend: {
enabled: false
},
title: {
text: 'Individual Summary Result'
},
accessibility: {
point: {
valueDescriptionFormat: '{index}. {point.SummaryId}, CompetencyLvl: {point.y}, BehavioralLvl: {point.x}.'
}
},
xAxis: {
endOnTick: false,
title: {
text: 'Competency'
},
categories: {
},
labels: {
format: '{value}'
},
plotLines: [{
color: 'black',
dashStyle: 'stroke',
width: 2,
value: plotLineX
}]
},
yAxis: {
gridLineWidth: 0,
endOnTick: false,
title: {
text: 'Behavioral'
},
labels: {
format: '{value}'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'stroke',
width: 2,
value: plotLineY
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.FullName}</h3></th></tr>' +
'<tr><th>Competency:</th><td>{point.Behavioral}({point.y})</td></tr>' +
'<tr><th>Behavioral:</th><td>{point.Competency}({point.x})</td></tr>',
footerFormat: '</table>',
followPointer: true,
width: 700
},
legend: {
layout: 'vertical',
align: 'left',
verticalAlign: 'top',
x: 60,
y: 50,
floating: true,
backgroundColor: Highcharts.defaultOptions.chart.backgroundColor,
borderWidth: 1
},
plotOptions: {
bubble:{
minSize: 20,
maxSize: 30
},
series: {
dataLabels: {
enabled: true,
format: '{point.SummaryId}'
}
}},
series,
});
}Code: Select all
let new_source = [
{SummaryId:1, FullName:"johndoe", y:4, x:3, Behavioral:'Fluent', Competency: 'Pathetic'},
{SummaryId:2, FullName:"warrenmils", y:2.13, x:1.33, Behavioral:'Skeptic', Competency: 'Motivated'}];
var chart1 = $('#container').highcharts();
chart1.series[0].update({
data: new_source
}, false);
chart1.redraw();anyone can help me how to update my quadrant highchart js?