I’m making a calculator with a pie chart to show how housing affordability is largely a function of finance costs and taxes on taxes on taxes. It calls a Pie Chart in charts js, the canvas and values display, but I am having trouble adding more than two fields (pie chart is at the very bottom of my calculator page). The third and fourth fields mess up the chart (it becomes a solid field of one colour). Here is how I am adding data, field by field in the field holding custom values (all in dollars):
(function(){
setPieChartBlock(
‘my_canvas’,
[
{label: ‘Land Cost’, value: fieldname41},
{label: ‘Land Cost’, value: fieldname41},
{label: ‘Land Appreciation’, value: fieldname56},
]);
})()
But over in Charts.js I see they make a dataset and just call that:
const DATA_COUNT = 5;
const NUMBER_CFG = {count: DATA_COUNT, min: 0, max: 100};
const data = {
labels: [‘Red’, ‘Orange’, ‘Yellow’, ‘Green’, ‘Blue’],
datasets: [
{
label: ‘Dataset 1’,
data: Utils.numbers(NUMBER_CFG),
backgroundColor: Object.values(Utils.CHART_COLORS),
}
]};
Can you tell me what I may be misunderstanding? Does the pie calculate its own total (ie. 100%) from the fields a user adds, or does that need to be specified somewhere for the subsequent data fields to represent pie slices?
PS: I’m not sure where the mouseover display values of 10, 10, 4 are coming from, they should show the values from their respective fields and dollars before, no?
PPS: I show land cost 2x because the pie breaks anytime I add any other field with a dollar value sum from the subtotal fields on the right hand side of the calculator.
The page I need help with: [log in to see the link]