PN MVP modeling
by Mike Rawling
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container"></div>
CSS
#container {
min-width: 320px;
max-width: 1000px;
margin: 0 auto;
}
JavaScript
Highcharts.setOptions({
colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
});
Highcharts.chart('container', {
chart: {
type: 'packedbubble',
height: '60%'
},
title: {
text: 'PostNord MVPs Prioritised'
},
tooltip: {
useHTML: true,
pointFormat: '<b>{point.name}:</b> Relative priority {point.value}</sub>'
},
plotOptions: {
packedbubble: {
minSize: '30%',
maxSize: '100%',
zMin: 500,
zMax: 1000,
layoutAlgorithm: {
gravitationalConstant: 0.05,
splitSeries: true,
seriesInteraction: false,
dragBetweenSeries: false,
parentNodeLimit: false
},
dataLabels: {
enabled: true,
format: '{point.name}',
filter: {
property: 'y',
operator: '>',
value: 250
},
style: {
color: 'black',
textOutline: 'none',
fontWeight: 'normal'
}
}
}
},
series: [{
name: 'Prognosis',
data: [{
name: 'MVP 1',
value: 5
}]
}, {
name: 'Uniting Multiple Deliveries',
data: [{
name: "Uniting Multiple Deliveries 1: single customer",
value: 10
},
{
name: "Uniting Multiple Deliveries 2: cohabitants, neighbours",
value: 10
},
{
name: "Consolidated subsciption",
value: 5
}]
}, {
name: 'Costs per Parcel',
data: [{
name: "Exact cost per parcel",
value: 10
},
{
name: "What options possible at what price",
value: 10
}]
...