`).join('');
}
function renderAllCharts() {
renderTimeSeriesChart();
renderFlowChart();
renderCongestionChart();
}
function renderTimeSeriesChart() {
const ctx = document.getElementById('aitraffic-timeseries-chart').getContext('2d');
if(charts.time) charts.time.destroy();
charts.time = new Chart(ctx, {
type: 'line',
data: {
datasets: [
{ label: 'Actual Travel Time', data: filteredData.map(r => ({x: r.Timestamp, y: r.Actual_Travel_Time_min})), borderColor: '#3498db', tension: 0.1 },
{ label: 'AI Predicted Travel Time', data: filteredData.map(r => ({x: r.Timestamp, y: r.AI_Predicted_Travel_Time_min})), borderColor: '#9b59b6', borderDash: [5, 5], tension: 0.1 }
]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Predicted vs. Actual Travel Time (min)' } }, scales: { x: { type: 'time', time: { unit: 'hour' } } } }
});
}
function renderFlowChart() {
const avgAiFlow = filteredData.reduce((sum, row) => sum + row.AI_Adjusted_Flow_Rate_vph, 0) / filteredData.length;
const avgBaselineFlow = filteredData.reduce((sum, row) => sum + row.Baseline_Flow_Rate_vph, 0) / filteredData.length;
const ctx = document.getElementById('aitraffic-flow-chart').getContext('2d');
if(charts.flow) charts.flow.destroy();
charts.flow = new Chart(ctx, {
type: 'bar',
data: {
labels: ['Avg. Flow Rate (Vehicles/Hour)'],
datasets: [
{ label: 'Baseline', data: [avgBaselineFlow], backgroundColor: '#7f8c8d' },
{ label: 'AI Adjusted', data: [avgAiFlow], backgroundColor: '#27ae60' }
]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Flow Rate Comparison' } } }
});
}
function renderCongestionChart() {
const congestionCounts = filteredData.reduce((acc, row) => {
acc[row.Congestion_Level_Actual] = (acc[row.Congestion_Level_Actual] || 0) + 1;
return acc;
}, {});
const ctx = document.getElementById('aitraffic-congestion-chart').getContext('2d');
if(charts.congestion) charts.congestion.destroy();
charts.congestion = new Chart(ctx, {
type: 'doughnut',
data: {
labels: Object.keys(congestionCounts),
datasets: [{ data: Object.values(congestionCounts), backgroundColor: ['#2ecc71', '#f1c40f', '#e74c3c', '#c0392b'] }]
},
options: { responsive: true, maintainAspectRatio: false, plugins: { title: { display: true, text: 'Congestion Level Distribution' } } }
});
}
// --- Utility ---
window.aitrafficDownloadPDF = () => {
html2canvas(document.getElementById('aitraffic-dashboard-output'), { scale: 2 }).then(canvas => {
const pdf = new jspdf.jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' });
const pdfWidth = pdf.internal.pageSize.getWidth();
const imgWidth = pdfWidth;
const imgHeight = (canvas.height * imgWidth) / canvas.width;
pdf.addImage(canvas.toDataURL('image/png'), 'PNG', 0, 0, imgWidth, imgHeight);
pdf.save('AI_Traffic_Performance_Dashboard.pdf');
});
};
});
