City Metro Fare Cost Estimator

City Metro Fare Cost Estimator

Calculate your metro trip fare based on your journey details.

Your fare estimate will appear here. Please fill out the 'Data Configuration' tab first.

Trip Details

Fare Structure (Customizable)

${formatCurrency(results.totalFare)}

${results.tripDetails["Trip Type"]} for ${results.tripDetails["Stations Traveled"]} stations

Fare Breakdown

${breakdownHtml}
`; downloadBtn.classList.remove('hidden'); const ctx = document.getElementById('fareChart')?.getContext('2d'); if(ctx) { const chartData = { labels: Object.keys(positiveBreakdown).filter(k => k !== 'Discount'), datasets: [{ data: Object.values(positiveBreakdown).filter(v => v > 0), backgroundColor: ['#4f46e5', '#10b981', '#f59e0b'], }] }; if (fareChart) fareChart.destroy(); fareChart = new Chart(ctx, { type: 'bar', data: chartData, options: { responsive: true, maintainAspectRatio: false, plugins: { legend: { display: false } }, scales: { y: { beginAtZero: true, ticks: { callback: value => formatCurrency(value) } } } } }); } } function downloadPDF() { const { jsPDF } = window.jspdf; const pdf = new jsPDF({ orientation: 'p', unit: 'mm', format: 'a4' }); const contentToPrint = document.getElementById('dashboard-content'); if (!contentToPrint) return; html2canvas(contentToPrint, { scale: 2, useCORS: true, onclone: (doc) => { const chartCanvas = doc.getElementById('fareChart'); if (chartCanvas && fareChart) { const img = new Image(); img.src = fareChart.toBase64Image(); img.style.maxWidth = '100%'; img.style.height = 'auto'; chartCanvas.parentNode.replaceChild(img, chartCanvas); } } }).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, pdfHeight > 277 ? 277 : pdfHeight - 20); pdf.save('Metro-Fare-Estimate.pdf'); }); }
Scroll to Top