Art Framing Cost Calculator

:root {
–primary-color: #004a99;
–success-color: #28a745;
–background-color: #f8f9fa;
–text-color: #333;
–border-color: #ddd;
–card-background: #fff;
–shadow: 0 2px 5px rgba(0,0,0,0.1);
}
body {
font-family: ‘Segoe UI’, Tahoma, Geneva, Verdana, sans-serif;
background-color: var(–background-color);
color: var(–text-color);
line-height: 1.6;
margin: 0;
padding: 0;
}
.container {
max-width: 960px;
margin: 20px auto;
padding: 20px;
background-color: var(–card-background);
border-radius: 8px;
box-shadow: var(–shadow);
}
header {
background-color: var(–primary-color);
color: white;
padding: 20px 0;
text-align: center;
margin-bottom: 20px;
border-radius: 8px 8px 0 0;
}
header h1 {
margin: 0;
font-size: 2.5em;
}
h2, h3 {
color: var(–primary-color);
margin-top: 1.5em;
margin-bottom: 0.5em;
}
.loan-calc-container {
background-color: var(–card-background);
padding: 25px;
border-radius: 8px;
box-shadow: var(–shadow);
margin-bottom: 30px;
}
.input-group {
margin-bottom: 20px;
text-align: left;
}
.input-group label {
display: block;
margin-bottom: 8px;
font-weight: bold;
color: var(–primary-color);
}
.input-group input[type=”number”],
.input-group input[type=”text”],
.input-group select {
width: calc(100% – 22px);
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
font-size: 1em;
box-sizing: border-box;
}
.input-group select {
cursor: pointer;
}
.input-group .helper-text {
font-size: 0.85em;
color: #666;
margin-top: 5px;
display: block;
}
.error-message {
color: red;
font-size: 0.85em;
margin-top: 5px;
min-height: 1.2em; /* Prevent layout shift */
}
.button-group {
display: flex;
justify-content: space-between;
margin-top: 25px;
gap: 10px;
}
.button-group button {
padding: 12px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1em;
font-weight: bold;
transition: background-color 0.3s ease;
flex: 1;
}
.button-group button.primary {
background-color: var(–primary-color);
color: white;
}
.button-group button.primary:hover {
background-color: #003366;
}
.button-group button.secondary {
background-color: #6c757d;
color: white;
}
.button-group button.secondary:hover {
background-color: #5a6268;
}
#result {
background-color: var(–success-color);
color: white;
padding: 20px;
text-align: center;
border-radius: 8px;
margin-top: 30px;
box-shadow: var(–shadow);
}
#result h3 {
color: white;
margin-top: 0;
margin-bottom: 10px;
font-size: 1.8em;
}
#result p {
margin: 5px 0;
font-size: 1.2em;
}
#result .intermediate-value {
font-size: 1em;
opacity: 0.9;
}
.formula-explanation {
font-size: 0.9em;
color: #555;
margin-top: 15px;
padding: 10px;
background-color: #e9ecef;
border-radius: 4px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
margin-bottom: 30px;
box-shadow: var(–shadow);
}
th, td {
padding: 12px;
text-align: left;
border-bottom: 1px solid var(–border-color);
}
thead {
background-color: var(–primary-color);
color: white;
}
tbody tr:nth-child(even) {
background-color: #f2f2f2;
}
caption {
font-size: 1.1em;
font-weight: bold;
color: var(–primary-color);
margin-bottom: 10px;
text-align: left;
}
canvas {
display: block;
margin: 20px auto;
background-color: white;
border-radius: 4px;
box-shadow: var(–shadow);
}
.article-content {
margin-top: 40px;
background-color: var(–card-background);
padding: 30px;
border-radius: 8px;
box-shadow: var(–shadow);
}
.article-content h2, .article-content h3 {
margin-top: 1.5em;
}
.article-content p {
margin-bottom: 1em;
}
.article-content ul, .article-content ol {
margin-left: 20px;
margin-bottom: 1em;
}
.article-content li {
margin-bottom: 0.5em;
}
.faq-item {
margin-bottom: 15px;
padding: 10px;
border: 1px solid var(–border-color);
border-radius: 4px;
background-color: #fdfdfd;
}
.faq-item strong {
color: var(–primary-color);
cursor: pointer;
display: block;
}
.faq-item p {
margin-top: 10px;
display: none; /* Hidden by default */
}
.faq-item.open p {
display: block;
}
.related-links ul {
list-style: none;
padding: 0;
}
.related-links li {
margin-bottom: 10px;
}
.related-links a {
color: var(–primary-color);
text-decoration: none;
font-weight: bold;
}
.related-links a:hover {
text-decoration: underline;
}
.related-links span {
font-size: 0.9em;
color: #666;
display: block;
margin-top: 3px;
}
.highlight-result {
font-size: 1.8em;
font-weight: bold;
color: white;
background-color: var(–success-color);
padding: 5px 10px;
border-radius: 4px;
display: inline-block;
margin-left: 10px;
}
.copy-button {
background-color: #6c757d;
color: white;
padding: 10px 15px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 0.9em;
margin-top: 15px;
transition: background-color 0.3s ease;
}
.copy-button:hover {
background-color: #5a6268;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
cursor: help;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 220px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -110px;
opacity: 0;
transition: opacity 0.3s;
font-size: 0.8em;
line-height: 1.4;
}
.tooltip .tooltiptext::after {
content: “”;
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}

Your essential tool for estimating framing expenses.

Frame Cost Estimator

Enter the details of your artwork and framing preferences to get an estimated cost.

Formula Used: Total Cost = (Frame Material Cost) + (Mat Board Cost) + (Glass Cost) + (Labor Cost).
Frame Material Cost is calculated based on the perimeter of the artwork plus matting, converted to meters and multiplied by the cost per meter. Mat Board Cost is calculated based on the area of the mat board, converted to square meters and multiplied by the cost per square meter. Glass Cost is based on the area of the artwork and the selected glass type’s cost per square meter. Labor Cost is the estimated hours multiplied by the hourly rate.

Cost Breakdown Chart

Cost Breakdown Table

Component	Estimated Cost (€)
Frame Material	—
Mat Board	—
Glass	—
Labor	—
Total Estimated Cost	—

What is Art Framing Cost?

The term “art framing cost” refers to the total expense incurred when custom framing a piece of artwork. This encompasses a variety of components, including the cost of the frame material itself, the matting (if used), the glass or protective glazing, and the labor involved in the assembly process. Understanding art framing cost is crucial for artists, collectors, and galleries to budget effectively and make informed decisions about presentation and preservation. It’s not just about aesthetics; proper framing significantly impacts the longevity and protection of valuable artworks.

Anyone who owns or creates art that needs to be displayed or protected can benefit from understanding art framing cost. This includes:

• Artists: To price their work accurately and offer framing as an add-on service.
• Art Collectors: To budget for framing new acquisitions or re-framing existing pieces.
• Galleries and Museums: To manage exhibition budgets and ensure artworks are framed to archival standards.
• Homeowners and Interior Designers: To plan for the aesthetic and financial aspects of displaying art.

A common misconception about art framing cost is that it’s a fixed price or solely dependent on the size of the artwork. In reality, the choice of materials (wood vs. metal frames, standard vs. museum glass, single vs. double matting), the complexity of the design, and the reputation of the framer all play significant roles. Another misconception is that expensive framing always equates to better protection; while premium materials offer superior preservation, thoughtful design and quality craftsmanship are equally important. The art framing cost calculator helps demystify these variables.

Art Framing Cost Formula and Mathematical Explanation

Calculating the art framing cost involves summing up the individual expenses for each component. The primary formula is:

Total Framing Cost = Frame Material Cost + Mat Board Cost + Glass Cost + Labor Cost

Let’s break down each component:

1. Frame Material Cost

This is determined by the perimeter of the framed piece and the cost of the chosen frame material per linear meter.

Frame Material Cost = (Artwork Width + Artwork Height + (2 * Frame Width)) * 2 / 1000 * Frame Material Cost per Meter

*Note: We add (2 * Frame Width) to account for the frame’s depth/width on all sides, effectively calculating the outer dimensions of the frame. Dividing by 1000 converts centimeters to meters.*

2. Mat Board Cost

If matting is used, its cost depends on its area and the price per square meter.

Mat Board Cost = (Artwork Width + (2 * Mat Board Width)) * (Artwork Height + (2 * Mat Board Width)) / 10000 * Mat Board Cost per Square Meter

*Note: We add (2 * Mat Board Width) to the artwork dimensions to get the outer dimensions of the mat. Dividing by 10000 converts square centimeters to square meters.*

3. Glass Cost

The cost of the glass is based on the area of the artwork (or the opening size) and the price per square meter for the selected glass type.

Glass Cost = Artwork Width * Artwork Height / 10000 * Glass Cost per Square Meter

4. Labor Cost

This is a straightforward calculation based on the time estimated for the framing job and the hourly rate.

Labor Cost = Estimated Labor Hours * Labor Rate per Hour

The art framing cost calculator automates these calculations for you.

Variables Table

Variable	Meaning	Unit	Typical Range
Artwork Width	Width of the artwork	cm	10 – 200+
Artwork Height	Height of the artwork	cm	10 – 200+
Frame Width	Visible width/depth of the frame material	cm	1 – 10+
Frame Material Cost per Meter	Cost of frame material per linear meter	€/m	10 – 100+
Mat Board Width	Width of matting on each side	cm	0 – 15+
Mat Board Cost per Square Meter	Cost of mat board material per square meter	€/m²	20 – 100+
Glass Cost per Square Meter	Cost of glass type per square meter	€/m²	15 – 70+
Labor Rate per Hour	Cost of labor per hour	€/hour	25 – 60+
Estimated Labor Hours	Time required for framing	hours	0.5 – 5+

Practical Examples (Real-World Use Cases)

Let’s illustrate the art framing cost with two practical examples:

Example 1: Standard Print Framing

Scenario: Framing a standard 50cm x 70cm photographic print with a 5cm mat board and standard glass. The chosen frame profile costs €30 per meter, and the framing job is estimated to take 1.5 hours at a labor rate of €30/hour.

Inputs:

• Artwork Width: 50 cm
• Artwork Height: 70 cm
• Frame Width: 3 cm
• Frame Material Cost: €30/m
• Mat Board Width: 5 cm
• Mat Board Cost: €40/m²
• Glass Type: Standard Glass (€15/m²)
• Labor Rate: €30/hour
• Labor Hours: 1.5 hours

Calculations:

• Frame Material Cost: ((50 + 70 + (2*3)) * 2) / 1000 * 30 = (126 * 2) / 1000 * 30 = 0.252 * 30 = €7.56
• Mat Board Cost: (50 + (2*5)) * (70 + (2*5)) / 10000 * 40 = (60 * 80) / 10000 * 40 = 4800 / 10000 * 40 = 0.48 * 40 = €19.20
• Glass Cost: 50 * 70 / 10000 * 15 = 3500 / 10000 * 15 = 0.35 * 15 = €5.25
• Labor Cost: 1.5 * 30 = €45.00
• Total Estimated Cost: €7.56 + €19.20 + €5.25 + €45.00 = €76.01

Interpretation: For a standard print, the labor cost is the most significant factor, followed by the mat board. This estimate provides a good baseline for pricing or budgeting.

Example 2: Large Oil Painting Framing

Scenario: Framing a large 100cm x 120cm oil painting without matting, using UV protective glass. A premium wood frame costs €60 per meter. The framing is complex and estimated to take 2.5 hours at €40/hour.

Inputs:

• Artwork Width: 100 cm
• Artwork Height: 120 cm
• Frame Width: 5 cm
• Frame Material Cost: €60/m
• Mat Board Width: 0 cm
• Mat Board Cost: €40/m² (N/A)
• Glass Type: UV Protective Glass (€35/m²)
• Labor Rate: €40/hour
• Labor Hours: 2.5 hours

Calculations:

• Frame Material Cost: ((100 + 120 + (2*5)) * 2) / 1000 * 60 = (230 * 2) / 1000 * 60 = 0.46 * 60 = €27.60
• Mat Board Cost: 0 (No matting)
• Glass Cost: 100 * 120 / 10000 * 35 = 12000 / 10000 * 35 = 1.2 * 35 = €42.00
• Labor Cost: 2.5 * 40 = €100.00
• Total Estimated Cost: €27.60 + €0 + €42.00 + €100.00 = €169.60

Interpretation: For a larger, more valuable piece, labor becomes the dominant cost factor due to the increased complexity and time. The premium frame material and UV glass also contribute significantly to the overall art framing cost. This highlights the importance of considering the value and preservation needs of the artwork. Using the art framing cost calculator ensures all these factors are considered.

How to Use This Art Framing Cost Calculator

Our Art Framing Cost Calculator is designed for simplicity and accuracy. Follow these steps to get your estimate:

1. Measure Your Artwork: Accurately measure the width and height of your artwork in centimeters. Enter these values into the “Artwork Width” and “Artwork Height” fields.
2. Determine Frame Specifications:
   • Frame Width/Depth: Measure the visible width or depth of the frame material you are considering (e.g., 3cm, 5cm). Enter this into “Frame Width”.
   • Frame Material Cost: Find out the cost per linear meter for your chosen frame material (e.g., wood, metal). Enter this into “Frame Material Cost per Meter (€)”.
3. Add Matting Details (Optional):
   • If you plan to use a mat board, enter the desired width in centimeters for each side into “Mat Board Width”. Enter ‘0’ if you do not want matting.
   • Enter the cost per square meter for your chosen mat board material into “Mat Board Cost per Square Meter (€)”.
4. Select Glass Type: Choose the type of glass from the dropdown menu. The calculator automatically uses the corresponding cost per square meter. Options typically include standard, UV-protective, and museum-grade glass.
5. Estimate Labor:
   • Enter your estimated hourly labor rate in Euros into “Labor Rate per Hour (€)”.
   • Estimate the total time in hours required for the framing job and enter it into “Estimated Labor Hours”. This can vary based on complexity.
6. Calculate: Click the “Calculate Cost” button.

Reading the Results:

The calculator will display:

• Total Estimated Cost: The primary, highlighted figure representing the overall cost.
• Intermediate Values: Breakdown of costs for Frame Material, Mat Board, Glass, and Labor.
• Cost Breakdown Table & Chart: Visual and tabular representations of the cost distribution.
• Formula Explanation: A clear description of how the total cost was derived.

Decision-Making Guidance:

Use the results to:

• Budget: Compare the estimated cost against your budget.
• Compare Options: Adjust inputs (e.g., different frame materials, matting options) to see how costs change.
• Negotiate: Have a clear understanding of costs when discussing with a professional framer.
• Price Artwork: If you are an artist, use this as a basis for pricing framing services.

The art framing cost calculator empowers you with the knowledge to make informed decisions.

Key Factors That Affect Art Framing Cost

Several elements influence the final art framing cost. Understanding these can help you manage expenses and achieve the desired outcome:

1. Frame Material and Profile: The type of material (wood, metal, synthetic) and the complexity of the frame’s profile significantly impact cost. Ornate, hand-finished wood frames are typically more expensive than simple metal or plastic profiles. The width and depth of the frame also play a role.
2. Artwork Size: Larger artworks naturally require more material for the frame, matting, and glass, directly increasing the cost. The perimeter and area calculations in the art framing cost calculator reflect this.
3. Matting Choices: Using a mat board adds to the cost. Factors include the width of the mat, whether it’s single or multiple layers (double, triple matting), and the quality/type of mat board material (e.g., standard, acid-free, museum conservation board).
4. Glass/Glazing Type: Standard glass is the most economical. UV-protective glass filters out harmful rays that cause fading, while museum glass offers both UV protection and anti-reflective properties, making it the most expensive option but crucial for valuable or sensitive artworks.
5. Labor Intensity and Framer’s Rate: Complex framing jobs (e.g., shadow boxes, intricate matting, large or delicate pieces) require more time and skill, increasing labor costs. The hourly rate charged by the framing service also varies based on their expertise, location, and overheads.
6. Additional Services and Hardware: Costs can increase with specialized services like mounting, hinging artwork to conservation standards, adding fillets or decorative elements within the mat, or using specialized hanging hardware for heavy pieces.
7. Design Complexity: Beyond basic rectangular frames, custom shapes, multiple openings in a mat, or incorporating 3D objects (for shadow boxes) require more design time and specialized techniques, driving up the overall art framing cost.

Frequently Asked Questions (FAQ)

Q1: What is the average cost to frame a picture?

The average cost can range widely, from €50-€100 for small, simple frames to €300-€1000+ for large, complex, or high-end custom framing jobs. Factors like size, materials, and labor heavily influence this. Our art framing cost calculator provides a more personalized estimate.

Q2: Is custom framing worth the cost?

For valuable, sentimental, or large artworks, custom framing is often worth the cost. It not only enhances the aesthetic appeal but also provides crucial protection against environmental damage (dust, UV light, pollutants), preserving the artwork’s condition and value for years to come.

Q3: How much should I budget for matting?

Matting can add anywhere from €20 to €100+ to the framing cost, depending on its width, quality, and whether it’s single or multi-layered. A 5cm mat on a medium-sized piece might add €20-€50, while a wide, conservation-grade double mat could cost significantly more.

Q4: Does the frame material matter for cost?

Yes, significantly. Basic wood or metal frames might cost €10-€30 per meter, while premium hardwoods, hand-finished profiles, or intricate designs can easily cost €50-€150+ per meter. The art framing cost calculator allows you to input your chosen material’s cost.

Q5: What’s the difference between UV glass and museum glass?

UV glass filters out about 97% of damaging UV rays. Museum glass offers similar UV protection but also features anti-reflective coatings, making the artwork appear clearer and reducing glare, which is ideal for viewing under varying light conditions. Museum glass is considerably more expensive.

Q6: Can I frame artwork myself to save money?

Yes, you can save on labor costs by framing yourself if you have the tools and skills. However, achieving professional results, especially with delicate artworks or complex matting, can be challenging. Mistakes can be costly or even damage the artwork. For valuable pieces, professional framing is recommended.

Q7: How does the size of the frame itself (width/depth) affect the cost?

A wider or deeper frame profile generally uses more material, increasing the frame material cost. It also affects the overall visual weight and presence of the framed piece. The calculator accounts for the frame’s width in calculating the total perimeter length needed.

Q8: Are there hidden costs in framing?

Potential hidden costs can include charges for specialized mounting, complex hinging, extra labor for oversized or fragile items, premium hanging hardware, or rush fees. Always clarify the scope of work and all associated costs with your framer upfront. Using a detailed calculator like this helps anticipate most standard costs.

var glassCosts = {
standard: 15,
uv: 35,
museum: 70
};

function validateInput(id, min, max, errorId, helperTextId) {
var input = document.getElementById(id);
var errorElement = document.getElementById(errorId);
var value = parseFloat(input.value);

errorElement.textContent = ”; // Clear previous error

if (isNaN(value)) {
errorElement.textContent = ‘Please enter a valid number.’;
return false;
}
if (value max) {
errorElement.textContent = ‘Value cannot be greater than ‘ + max + ‘.’;
return false;
}
return true;
}

function calculateFramingCost() {
var isValid = true;
isValid &= validateInput(‘artworkWidth’, 1, undefined, ‘artworkWidthError’);
isValid &= validateInput(‘artworkHeight’, 1, undefined, ‘artworkHeightError’);
isValid &= validateInput(‘frameWidth’, 1, undefined, ‘frameWidthError’);
isValid &= validateInput(‘frameMaterialCost’, 0.01, undefined, ‘frameMaterialCostError’);
isValid &= validateInput(‘matBoardWidth’, 0, undefined, ‘matBoardWidthError’);
isValid &= validateInput(‘matBoardCost’, 0, undefined, ‘matBoardCostError’);
isValid &= validateInput(‘laborRate’, 1, undefined, ‘laborRateError’);
isValid &= validateInput(‘laborHours’, 0.1, undefined, ‘laborHoursError’);

if (!isValid) {
return;
}

var artworkWidth = parseFloat(document.getElementById(‘artworkWidth’).value);
var artworkHeight = parseFloat(document.getElementById(‘artworkHeight’).value);
var frameWidth = parseFloat(document.getElementById(‘frameWidth’).value);
var frameMaterialCostPerMeter = parseFloat(document.getElementById(‘frameMaterialCost’).value);
var matBoardWidth = parseFloat(document.getElementById(‘matBoardWidth’).value);
var matBoardCostPerSqm = parseFloat(document.getElementById(‘matBoardCost’).value);
var glassType = document.getElementById(‘glassType’).value;
var laborRate = parseFloat(document.getElementById(‘laborRate’).value);
var laborHours = parseFloat(document.getElementById(‘laborHours’).value);

var glassCostPerSqm = glassCosts[glassType];

// Calculate Frame Material Cost
var framePerimeterCm = (artworkWidth + artworkHeight + (2 * frameWidth)) * 2;
var frameMaterialTotal = (framePerimeterCm / 1000) * frameMaterialCostPerMeter;

// Calculate Mat Board Cost
var matBoardTotal = 0;
if (matBoardWidth > 0) {
var matBoardWidthCm = artworkWidth + (2 * matBoardWidth);
var matBoardHeightCm = artworkHeight + (2 * matBoardWidth);
var matBoardAreaSqm = (matBoardWidthCm * matBoardHeightCm) / 10000;
matBoardTotal = matBoardAreaSqm * matBoardCostPerSqm;
}

// Calculate Glass Cost
var artworkAreaSqm = (artworkWidth * artworkHeight) / 10000;
var glassTotal = artworkAreaSqm * glassCostPerSqm;

// Calculate Labor Cost
var laborTotal = laborHours * laborRate;

// Calculate Total Cost
var totalCost = frameMaterialTotal + matBoardTotal + glassTotal + laborTotal;

// Display Results
document.getElementById(‘totalCost’).textContent = totalCost.toFixed(2);
document.getElementById(‘frameMaterialTotal’).textContent = frameMaterialTotal.toFixed(2);
document.getElementById(‘matBoardTotal’).textContent = matBoardTotal.toFixed(2);
document.getElementById(‘glassTotal’).textContent = glassTotal.toFixed(2);
document.getElementById(‘laborTotal’).textContent = laborTotal.toFixed(2);

// Update Table
document.getElementById(‘tableFrameMaterial’).textContent = frameMaterialTotal.toFixed(2);
document.getElementById(‘tableMatBoard’).textContent = matBoardTotal.toFixed(2);
document.getElementById(‘tableGlass’).textContent = glassTotal.toFixed(2);
document.getElementById(‘tableLabor’).textContent = laborTotal.toFixed(2);
document.getElementById(‘tableTotal’).textContent = totalCost.toFixed(2);

// Update Chart
updateChart(frameMaterialTotal, matBoardTotal, glassTotal, laborTotal, totalCost);
}

var myChart; // Declare chart variable globally

function updateChart(frameMat, matBoard, glass, labor, total) {
var ctx = document.getElementById(‘costBreakdownChart’).getContext(‘2d’);

// Destroy previous chart instance if it exists
if (myChart) {
myChart.destroy();
}

myChart = new Chart(ctx, {
type: ‘bar’,
data: {
labels: [‘Frame Material’, ‘Mat Board’, ‘Glass’, ‘Labor’],
datasets: [{
label: ‘Cost Component (€)’,
data: [frameMat, matBoard, glass, labor],
backgroundColor: [
‘rgba(0, 74, 153, 0.7)’, // Primary color
‘rgba(40, 167, 69, 0.7)’, // Success color
‘rgba(108, 117, 125, 0.7)’, // Secondary color
‘rgba(255, 193, 7, 0.7)’ // Warning color
],
borderColor: [
‘rgba(0, 74, 153, 1)’,
‘rgba(40, 167, 69, 1)’,
‘rgba(108, 117, 125, 1)’,
‘rgba(255, 193, 7, 1)’
],
borderWidth: 1
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
ticks: {
callback: function(value) {
if (value % 1 === 0) {
return ‘€’ + value;
}
}
}
}
},
plugins: {
legend: {
display: false // Hide legend as labels are on bars
},
tooltip: {
callbacks: {
label: function(context) {
var label = context.dataset.label || ”;
if (label) {
label += ‘: ‘;
}
if (context.parsed.y !== null) {
label += ‘€’ + context.parsed.y.toFixed(2);
}
return label;
}
}
}
}
}
});
}

function resetForm() {
document.getElementById(‘artworkWidth’).value = 50;
document.getElementById(‘artworkHeight’).value = 70;
document.getElementById(‘frameWidth’).value = 3;
document.getElementById(‘frameMaterialCost’).value = 25;
document.getElementById(‘matBoardWidth’).value = 5;
document.getElementById(‘matBoardCost’).value = 40;
document.getElementById(‘glassType’).value = ‘standard’;
document.getElementById(‘laborRate’).value = 30;
document.getElementById(‘laborHours’).value = 1.5;

// Clear errors
document.getElementById(‘artworkWidthError’).textContent = ”;
document.getElementById(‘artworkHeightError’).textContent = ”;
document.getElementById(‘frameWidthError’).textContent = ”;
document.getElementById(‘frameMaterialCostError’).textContent = ”;
document.getElementById(‘matBoardWidthError’).textContent = ”;
document.getElementById(‘matBoardCostError’).textContent = ”;
document.getElementById(‘laborRateError’).textContent = ”;
document.getElementById(‘laborHoursError’).textContent = ”;

// Reset results and chart
document.getElementById(‘totalCost’).textContent = ‘–‘;
document.getElementById(‘frameMaterialTotal’).textContent = ‘–‘;
document.getElementById(‘matBoardTotal’).textContent = ‘–‘;
document.getElementById(‘glassTotal’).textContent = ‘–‘;
document.getElementById(‘laborTotal’).textContent = ‘–‘;

document.getElementById(‘tableFrameMaterial’).textContent = ‘–‘;
document.getElementById(‘tableMatBoard’).textContent = ‘–‘;
document.getElementById(‘tableGlass’).textContent = ‘–‘;
document.getElementById(‘tableLabor’).textContent = ‘–‘;
document.getElementById(‘tableTotal’).textContent = ‘–‘;

if (myChart) {
myChart.destroy();
myChart = null; // Ensure it’s reset
}
// Optionally call calculateFramingCost() to update with defaults if needed
// calculateFramingCost();
}

function copyResults() {
var totalCost = document.getElementById(‘totalCost’).textContent;
var frameMaterial = document.getElementById(‘frameMaterialTotal’).textContent;
var matBoard = document.getElementById(‘matBoardTotal’).textContent;
var glass = document.getElementById(‘glassTotal’).textContent;
var labor = document.getElementById(‘laborTotal’).textContent;

var assumptions = “Key Assumptions:\n”;
assumptions += “- Frame Material Cost per Meter: €” + document.getElementById(‘frameMaterialCost’).value + “\n”;
assumptions += “- Mat Board Cost per Sqm: €” + document.getElementById(‘matBoardCost’).value + “\n”;
assumptions += “- Glass Type: ” + document.getElementById(‘glassType’).options[document.getElementById(‘glassType’).selectedIndex].text.split(‘(‘)[0].trim() + “\n”;
assumptions += “- Labor Rate per Hour: €” + document.getElementById(‘laborRate’).value + “\n”;
assumptions += “- Estimated Labor Hours: ” + document.getElementById(‘laborHours’).value + ” hours\n”;

var textToCopy = “— Estimated Framing Costs —\n”;
textToCopy += “Total Estimated Cost: ” + totalCost + ” €\n”;
textToCopy += “Frame Material Cost: ” + frameMaterial + ” €\n”;
textToCopy += “Mat Board Cost: ” + matBoard + ” €\n”;
textToCopy += “Glass Cost: ” + glass + ” €\n”;
textToCopy += “Labor Cost: ” + labor + ” €\n\n”;
textToCopy += assumptions;

// Use a temporary textarea to copy text
var textArea = document.createElement(“textarea”);
textArea.value = textToCopy;
textArea.style.position = “fixed”; // Avoid scrolling to bottom
textArea.style.left = “-9999px”;
document.body.appendChild(textArea);
textArea.focus();
textArea.select();

try {
var successful = document.execCommand(‘copy’);
var msg = successful ? ‘Results copied!’ : ‘Copy failed!’;
var copyMessage = document.getElementById(‘copyMessage’);
copyMessage.textContent = msg;
copyMessage.style.color = successful ? ‘lightgreen’ : ‘salmon’;
} catch (err) {
var copyMessage = document.getElementById(‘copyMessage’);
copyMessage.textContent = ‘Copy failed!’;
copyMessage.style.color = ‘salmon’;
}

document.body.removeChild(textArea);
}

function toggleFaq(element) {
var parent = element.parentElement;
parent.classList.toggle(‘open’);
}

// Initial calculation on page load with default values
document.addEventListener(‘DOMContentLoaded’, function() {
calculateFramingCost();
// Ensure chart canvas is available before trying to update
var canvas = document.getElementById(‘costBreakdownChart’);
if (canvas) {
// Initial chart update after calculateFramingCost() has set values
var frameMat = parseFloat(document.getElementById(‘frameMaterialTotal’).textContent);
var matBoard = parseFloat(document.getElementById(‘matBoardTotal’).textContent);
var glass = parseFloat(document.getElementById(‘glassTotal’).textContent);
var labor = parseFloat(document.getElementById(‘laborTotal’).textContent);
var total = parseFloat(document.getElementById(‘totalCost’).textContent);
if (!isNaN(frameMat) && !isNaN(matBoard) && !isNaN(glass) && !isNaN(labor) && !isNaN(total)) {
updateChart(frameMat, matBoard, glass, labor, total);
}
}
});

// Add Chart.js library dynamically if not present
if (typeof Chart === ‘undefined’) {
var script = document.createElement(‘script’);
script.src = ‘https://cdn.jsdelivr.net/npm/chart.js@3.7.0/dist/chart.min.js’; // Use a specific version
script.onload = function() {
console.log(‘Chart.js loaded.’);
// Recalculate and update chart after Chart.js is loaded
calculateFramingCost();
};
document.head.appendChild(script);
} else {
// If Chart.js is already loaded, ensure chart is drawn on load
document.addEventListener(‘DOMContentLoaded’, function() {
calculateFramingCost();
});
}