Chart.js polar area chart
Polar area chart with the Chart.js adapter
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.js"></script>
<canvas id="chart" height="400" width="400"></canvas>
CSS
canvas#chart {
display: block;
}
JavaScript
var profile1 = 256;
var profile2 = 1500;
var intersection = 115;
function getDataSets (p1, p2, p12) {
var elements1 = [
{ x: 0, y: 0}
];
elements1.push({ x: p1/2, y: p1 });
elements1.push({ x: p1, y: 0});
var start2 = p1 - p12;
var elements2 = [
{ x: start2 , y: 0 },
{ x: start2 + p2/2 , y: p2 },
{ x: start2 + p2 , y: 0 }
];
var start3 = p1 - p12;
var elements3 = [
{ x: start3 , y: 0 },
{ x: (start3 + p1)/2 , y: p12 },
{ x: p1 , y: 0 }
];
return { e1: elements1, e2: elements2, e3 : elements3 };
}
var a = getDataSets(profile1, profile2, intersection);
console.log(a.e1, a.e2)
new Chart('chart', {
type: "polar",
data: {
datasets: [{
label: 'First Dataset',
data: a.e1,
//backgroundColor: '#123456'
},{
label: 'Second Dataset',
data: a.e2
},{
label: 'Intersection',
data: a.e3,
backgroundColor: '#123456'
}]
},
options: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
}
});