VarunaKapuge/trafficflow-master-3000

1document.addEventListener('DOMContentLoaded', function() {2    const trafficData = [3        // D series4        { demand: 'D-1', cluster1: 1, throughput1: -1.88754, efficiency1: 0.9848, travelTime1: 61.06, queue1: 17.94, delay1: 10.38, cluster2: 1, throughput2: -1.38765, efficiency2: 0.9898, travelTime2: 60.02, queue2: 17.38, delay2: 9.26 },5        { demand: 'D-2', cluster1: 1, throughput1: -1.32694, efficiency1: 0.9924, travelTime1: 57.4, queue1: 19.06, delay1: 6.59, cluster2: 1, throughput2: -0.83678, efficiency2: 0.9924, travelTime2: 57.73, queue2: 31.15, delay2: 6.89 },6        { demand: 'D-3', cluster1: 1, throughput1: -1.35255, efficiency1: 0.9695, travelTime1: 65.54, queue1: 44.72, delay1: 14.58, cluster2: 1, throughput2: -0.83392, efficiency2: 0.9695, travelTime2: 63.09, queue2: 35.13, delay2: 12.13 },7        { demand: 'D-4', cluster1: 1, throughput1: -0.80618, efficiency1: 0.9712, travelTime1: 59.02, queue1: 25.4, delay1: 7.97, cluster2: 1, throughput2: -0.81109, efficiency2: 0.9729, travelTime2: 57.94, queue2: 30.69, delay2: 6.9 },8        { demand: 'D-5', cluster1: 1, throughput1: -0.81472, efficiency1: 0.9662, travelTime1: 68.35, queue1: 50.5, delay1: 17.43, cluster2: 1, throughput2: -0.28305, efficiency2: 0.9746, travelTime2: 61.89, queue2: 46.55, delay2: 10.97 },9        { demand: 'D-6', cluster1: 3, throughput1: -0.79765, efficiency1: 0.9763, travelTime1: 85.12, queue1: 80.78, delay1: 34, cluster2: 1, throughput2: -0.26307, efficiency2: 0.9882, travelTime2: 69.29, queue2: 80.27, delay2: 18.13 },10        { demand: 'D-7', cluster1: 1, throughput1: -0.26551, efficiency1: 0.9695, travelTime1: 63.25, queue1: 65.1, delay1: 12.08, cluster2: 1, throughput2: -0.27163, efficiency2: 0.9759, travelTime2: 57.98, queue2: 26.18, delay2: 6.81 },11        { demand: 'D-8', cluster1: 1, throughput1: -0.25697, efficiency1: 0.9734, travelTime1: 75.52, queue1: 79.56, delay1: 24.39, cluster2: 1, throughput2: -0.27163, efficiency2: 0.9848, travelTime2: 61.54, queue2: 52.8, delay2: 10.4 },12        { demand: 'D-9', cluster1: 3, throughput1: -0.25981, efficiency1: 0.9721, travelTime1: 92.94, queue1: 116.46, delay1: 41.77, cluster2: 1, throughput2: 0.26783, efficiency2: 0.981, travelTime2: 69.73, queue2: 89.77, delay2: 18.54 },13        { demand: 'D-10', cluster1: 3, throughput1: -0.23989, efficiency1: 0.981, travelTime1: 105.82, queue1: 138.52, delay1: 54.65, cluster2: 3, throughput2: 0.2821, efficiency2: 0.981, travelTime2: 83.82, queue2: 152.13, delay2: 32.67 },14        { demand: 'D-11', cluster1: 2, throughput1: 0.29509, efficiency1: 0.9756, travelTime1: 65.8, queue1: 75.58, delay1: 14.75, cluster2: 2, throughput2: 0.26212, efficiency2: 0.9766, travelTime2: 58.34, queue2: 42.83, delay2: 7.31 },15        { demand: 'D-12', cluster1: 2, throughput1: 0.31501, efficiency1: 0.9827, travelTime1: 76.64, queue1: 88.1, delay1: 25.45, cluster2: 2, throughput2: 0.28495, efficiency2: 0.9817, travelTime2: 64.68, queue2: 86.8, delay2: 13.49 },16        { demand: 'D-13', cluster1: 3, throughput1: 0.13858, efficiency1: 0.9198, travelTime1: 88.46, queue1: 109.78, delay1: 37.36, cluster2: 3, throughput2: 0.82441, efficiency2: 0.9746, travelTime2: 75.79, queue2: 114.13, delay2: 24.7 },17        { demand: 'D-14', cluster1: 3, throughput1: 0.29225, efficiency1: 0.9746, travelTime1: 108.05, queue1: 219.52, delay1: 56.96, cluster2: 3, throughput2: 0.81585, efficiency2: 0.9827, travelTime2: 90.24, queue2: 271.14, delay2: 39.11 },18        { demand: 'D-15', cluster1: 2, throughput1: 0.85284, efficiency1: 0.9788, travelTime1: 62.84, queue1: 98.78, delay1: 11.86, cluster2: 2, throughput2: 0.84724, efficiency2: 0.9788, travelTime2: 59.63, queue2: 74.12, delay2: 8.63 },19        { demand: 'D-16', cluster1: 2, throughput1: 0.84431, efficiency1: 0.9763, travelTime1: 76.19, queue1: 94.45, delay1: 25.11, cluster2: 2, throughput2: 1.39241, efficiency2: 0.9763, travelTime2: 67.9, queue2: 88.39, delay2: 16.81 },20        { demand: 'D-17', cluster1: 3, throughput1: 0.80731, efficiency1: 0.9653, travelTime1: 95.01, queue1: 218.29, delay1: 43.92, cluster2: 3, throughput2: 1.3496, efficiency2: 0.9856, travelTime2: 78.92, queue2: 206.66, delay2: 27.81 },21        { demand: 'D-18', cluster1: 2, throughput1: 1.41913, efficiency1: 0.984, travelTime1: 65.28, queue1: 89.34, delay1: 14.18, cluster2: 2, throughput2: 1.92616, efficiency2: 0.984, travelTime2: 61.73, queue2: 73.71, delay2: 10.62 },22        { demand: 'D-19', cluster1: 2, throughput1: 1.4049, efficiency1: 0.9804, travelTime1: 76.54, queue1: 141.4, delay1: 25.36, cluster2: 2, throughput2: -1.9214, efficiency2: 0.9731, travelTime2: 68.02, queue2: 134.48, delay2: 16.81 },23        { demand: 'D-20', cluster1: 2, throughput1: 1.98542, efficiency1: 0.9873, travelTime1: 67.19, queue1: 207.72, delay1: 16, cluster2: 2, throughput2: -1.36196, efficiency2: 0.9797, travelTime2: 65.04, queue2: 84.91, delay2: 13.85 },24        // E series25        { demand: 'E-1', cluster1: 1, throughput1: -1.88754, efficiency1: 0.9848, travelTime1: 60.74, queue1: 19.22, delay1: 10.07, cluster2: 1, throughput2: -1.38765, efficiency2: 0.9898, travelTime2: 60.34, queue2: 18.24, delay2: 9.59 },26        { demand: 'E-2', cluster1: 1, throughput1: -1.32694, efficiency1: 0.9924, travelTime1: 57.3, queue1: 45.61, delay1: 6.52, cluster2: 1, throughput2: -0.83678, efficiency2: 0.9924, travelTime2: 57.03, queue2: 19.55, delay2: 6.23 },27        { demand: 'E-3', cluster1: 1, throughput1: -1.35255, efficiency1: 0.9695, travelTime1: 65.05, queue1: 49.8, delay1: 14.08, cluster2: 1, throughput2: -0.83392, efficiency2: 0.9695, travelTime2: 62.4, queue2: 52.57, delay2: 11.45 },28        { demand: 'E-4', cluster1: 1, throughput1: -0.80618, efficiency1: 0.9712, travelTime1: 58.64, queue1: 32.28, delay1: 7.59, cluster2: 1, throughput2: -0.81394, efficiency2: 0.9729, travelTime2: 57.5, queue2: 22.88, delay2: 6.48 },29        { demand: 'E-5', cluster1: 1, throughput1: -0.80049, efficiency1: 0.9746, travelTime1: 61.81, queue1: 43.95, delay1: 10.88, cluster2: 1, throughput2: -0.2859, efficiency2: 0.9746, travelTime2: 61.81, queue2: 43.95, delay2: 10.88 },30        { demand: 'E-6', cluster1: 3, throughput1: -0.79765, efficiency1: 0.9763, travelTime1: 84.02, queue1: 71.32, delay1: 32.9, cluster2: 1, throughput2: -0.26592, efficiency2: 0.9865, travelTime2: 68.53, queue2: 83.18, delay2: 17.38 },31        { demand: 'E-7', cluster1: 1, throughput1: -0.26551, efficiency1: 0.9695, travelTime1: 63.22, queue1: 50.61, delay1: 12.06, cluster2: 1, throughput2: -0.27163, efficiency2: 0.9746, travelTime2: 57.75, queue2: 32.4, delay2: 6.59 },32        { demand: 'E-8', cluster1: 1, throughput1: -0.25128, efficiency1: 0.9759, travelTime1: 76.08, queue1: 85.79, delay1: 24.93, cluster2: 1, throughput2: -0.27163, efficiency2: 0.9835, travelTime2: 61.35, queue2: 52.38, delay2: 10.19 },33        { demand: 'E-9', cluster1: 3, throughput1: -0.25128, efficiency1: 0.9759, travelTime1: 91.91, queue1: 125.72, delay1: 40.75, cluster2: 1, throughput2: 0.27068, efficiency2: 0.981, travelTime2: 68.92, queue2: 84.55, delay2: 17.75 },34        { demand: 'E-10', cluster1: 3, throughput1: -0.23705, efficiency1: 0.9822, travelTime1: 106.12, queue1: 125.07, delay1: 54.99, cluster2: 3, throughput2: 0.2821, efficiency2: 0.981, travelTime2: 81.42, queue2: 144.92, delay2: 30.3 },35        { demand: 'E-11', cluster1: 2, throughput1: 0.29509, efficiency1: 0.9756, travelTime1: 65.19, queue1: 71.43, delay1: 14.14, cluster2: 2, throughput2: 0.26212, efficiency2: 0.9777, travelTime2: 58.71, queue2: 49.99, delay2: 7.69 },36        { demand: 'E-12', cluster1: 2, throughput1: 0.31786, efficiency1: 0.9838, travelTime1: 75.66, queue1: 92.62, delay1: 24.51, cluster2: 2, throughput2: 0.26497, efficiency2: 0.9817, travelTime2: 64.39, queue2: 52.08, delay2: 13.21 },37        { demand: 'E-13', cluster1: 3, throughput1: 0.29225, efficiency1: 0.9746, travelTime1: 87.49, queue1: 114.81, delay1: 36.43, cluster2: 2, throughput2: 0.82156, efficiency2: 0.9746, travelTime2: 72.11, queue2: 102.13, delay2: 21.03 },38        { demand: 'E-14', cluster1: 3, throughput1: 0.30078, efficiency1: 0.9777, travelTime1: 107.22, queue1: 216.86, delay1: 56.1, cluster2: 3, throughput2: 0.81585, efficiency2: 0.9756, travelTime2: 92.15, queue2: 232.04, delay2: 41.05 },39        { demand: 'E-15', cluster1: 2, throughput1: 0.85284, efficiency1: 0.9788, travelTime1: 63.06, queue1: 91.99, delay1: 12.07, cluster2: 2, throughput2: 0.82441, efficiency2: 0.978, travelTime2: 58.41, queue2: 44.53, delay2: 7.41 },40        { demand: 'E-16', cluster1: 2, throughput1: 0.84431, efficiency1: 0.9763, travelTime1: 76.05, queue1: 117.44, delay1: 24.92, cluster2: 2, throughput2: 1.39241, efficiency2: 0.9763, travelTime2: 65.67, queue2: 85.33, delay2: 14.65 },41        { demand: 'E-17', cluster1: 3, throughput1: 0.86138, efficiency1: 0.9814, travelTime1: 93.6, queue1: 207.572, delay1: 42.49, cluster2: 3, throughput2: 1.36672, efficiency2: 0.9788, travelTime2: 83.12, queue2: 252.28, delay2: 32.03 },42        { demand: 'E-18', cluster1: 2, throughput1: 1.41913, efficiency1: 0.984, travelTime1: 65.5, queue1: 88.9, delay1: 14.38, cluster2: 2, throughput2: 1.94899, efficiency2: 0.984, travelTime2: 59.87, queue2: 88.9, delay2: 8.76 },43        { demand: 'E-19', cluster1: 2, throughput1: 1.38783, efficiency1: 0.9761, travelTime1: 75.66, queue1: 128.08, delay1: 24.45, cluster2: 2, throughput2: -1.9214, efficiency2: 0.9775, travelTime2: 68.28, queue2: 145.62, delay2: 17.06 },44        { demand: 'E-20', cluster1: 2, throughput1: 1.95127, efficiency1: 0.9797, travelTime1: 68.16, queue1: 113.02, delay1: 16.99, cluster2: 2, throughput2: -1.35911, efficiency2: 0.9848, travelTime2: 62.08, queue2: 105.61, delay2: 10.89 },45        // F series46        { demand: 'F-1', cluster1: 1, throughput1: -1.88469, efficiency1: 0.9898, travelTime1: 61.34, queue1: 22.2, delay1: 10.48, cluster2: 1, throughput2: -1.38765, efficiency2: 0.9898, travelTime2: 60.09, queue2: 13.64, delay2: 9.22 },47        { demand: 'F-2', cluster1: 1, throughput1: -1.32409, efficiency1: 0.9949, travelTime1: 57.47, queue1: 23.88, delay1: 6.6, cluster2: 1, throughput2: -0.83107, efficiency2: 0.9949, travelTime2: 57.15, queue2: 29.33, delay2: 6.26 },48        { demand: 'F-3', cluster1: 1, throughput1: -1.35255, efficiency1: 0.9695, travelTime1: 65.01, queue1: 45.8, delay1: 13.99, cluster2: 1, throughput2: -0.83392, efficiency2: 0.9695, travelTime2: 62.69, queue2: 38.86, delay2: 11.94 },49        { demand: 'F-4', cluster1: 1, throughput1: -0.80049, efficiency1: 0.9746, travelTime1: 59.11, queue1: 31.59, delay1: 7.97, cluster2: 1, throughput2: -0.81109, efficiency2: 0.9763, travelTime2: 57.83, queue2: 43.29, delay2: 6.68 },50        { demand: 'F-5', cluster1: 1, throughput1: -0.81472, efficiency1: 0.9662, travelTime1: 68.48, queue1: 63.88, delay1: 17.55, cluster2: 1, throughput2: -0.28305, efficiency2: 0.9746, travelTime2: 61.75, queue2: 29.23, delay2: 10.84 },51        { demand: 'F-6', cluster1: 3, throughput1: -0.79765, efficiency1: 0.9763, travelTime1: 86.65, queue1: 120.96, delay1: 35.64, cluster2: 1, throughput2: -0.26878, efficiency2: 0.9882, travelTime2: 67.8, queue2: 58.51, delay2: 16.75 },52        { demand: 'F-7', cluster1: 1, throughput1: -0.26266, efficiency1: 0.9708, travelTime1: 62.82, queue1: 63.8, delay1: 11.71, cluster2: 1, throughput2: -0.27163, efficiency2: 0.9759, travelTime2: 58.07, queue2: 62.48, delay2: 6.95 },53        { demand: 'F-8', cluster1: 1, throughput1: -0.25128, efficiency1: 0.9759, travelTime1: 75.02, queue1: 86.4, delay1: 23.85, cluster2: 1, throughput2: -0.27163, efficiency2: 0.9822, travelTime2: 61, queue2: 54.57, delay2: 9.84 },54        { demand: 'F-9', cluster1: 3, throughput1: -0.25128, efficiency1: 0.9759, travelTime1: 91.85, queue1: 115.04, delay1: 40.65, cluster2: 1, throughput2: 0.27353, efficiency2: 0.981, travelTime2: 69.43, queue2: 81.04, delay2: 18.24 },55        { demand: 'F-10', cluster1: 3, throughput1: -0.24559, efficiency1: 0.9784, travelTime1: 105.57, queue1: 111.71, delay1: 54.31, cluster2: 3, throughput2: 0.28495, efficiency2: 0.981, travelTime2: 83.73, queue2: 177.5, delay2: 32.52 },56        { demand: 'F-11', cluster1: 2, throughput1: 0.29225, efficiency1: 0.9746, travelTime1: 65.78, queue1: 70.21, delay1: 14.76, cluster2: 2, throughput2: 0.25926, efficiency2: 0.9787, travelTime2: 57.71, queue2: 35.74, delay2: 6.68 },57        { demand: 'F-12', cluster1: 2, throughput1: 0.31501, efficiency1: 0.9827, travelTime1: 63.9, queue1: 47.67, delay1: 12.68, cluster2: 2, throughput2: 0.27924, efficiency2: 0.9827, travelTime2: 63.9, queue2: 47.67, delay2: 12.68 },58        { demand: 'F-13', cluster1: 3, throughput1: 0.29225, efficiency1: 0.9746, travelTime1: 88.63, queue1: 124.72, delay1: 37.47, cluster2: 2, throughput2: 0.82726, efficiency2: 0.9736, travelTime2: 72.33, queue2: 109.49, delay2: 21.18 },59        { demand: 'F-14', cluster1: 3, throughput1: 0.29794, efficiency1: 0.9766, travelTime1: 109.54, queue1: 234.57, delay1: 58.46, cluster2: 3, throughput2: 0.81585, efficiency2: 0.9807, travelTime2: 88.54, queue2: 288.34, delay2: 37.46 },60        { demand: 'F-15', cluster1: 2, throughput1: 0.85569, efficiency1: 0.9797, travelTime1: 63.48, queue1: 113.41, delay1: 12.42, cluster2: 2, throughput2: 0.84154, efficiency2: 0.9797, travelTime2: 59.88, queue2: 97.58, delay2: 8.81 },61        { demand: 'F-16', cluster1: 2, throughput1: 0.84431, efficiency1: 0.9763, travelTime1: 74.77, queue1: 110.71, delay1: 23.71, cluster2: 2, throughput2: 1.39241, efficiency2: 0.9763, travelTime2: 70.21, queue2: 263.73, delay2: 19.16 },62        { demand: 'F-17', cluster1: 2, throughput1: 0.86138, efficiency1: 0.9814, travelTime1: 85.39, queue1: 194.34, delay1: 34.14, cluster2: 3, throughput2: 1.32105, efficiency2: 0.9839, travelTime2: 77.15, queue2: 226.88, delay2: 25.91 },63        { demand: 'F-18', cluster1: 2, throughput1: 1.41913, efficiency1: 0.984, travelTime1: 63.12, queue1: 88.8, delay1: 11.96, cluster2: 2, throughput2: 1.93472, efficiency2: 0.984, travelTime2: 59.33, queue2: 68.06, delay2: 8.2 },64        { demand: 'F-19', cluster1: 2, throughput1: 1.36222, efficiency1: 0.9695, travelTime1: 75.71, queue1: 214.15, delay1: 24.49, cluster2: 2, throughput2: 1331, efficiency2: 0.9659, travelTime2: 71.51, queue2: 228.7, delay2: 20.31 },65        { demand: 'F-20', cluster1: 2, throughput1: 1.96835, efficiency1: 0.9835, travelTime1: 69, queue1: 224.99, delay1: 17.82, cluster2: 2, throughput2: 1546, efficiency2: 0.9816, travelTime2: 65.57, queue2: 266.95, delay2: 14.41 }66];67 68    // Populate table69    const tableBody = document.getElementById('tableBody');70    trafficData.forEach(item => {71        const row = document.createElement('tr');72        row.innerHTML = `73            <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">${item.demand}</td>74            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.cluster1}</td>75            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.throughput1.toFixed(5)}</td>76            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.efficiency1.toFixed(4)}</td>77            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.travelTime1.toFixed(2)}</td>78            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.queue1.toFixed(2)}</td>79            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.delay1.toFixed(2)}</td>80            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.cluster2}</td>81            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.throughput2.toFixed(5)}</td>82            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.efficiency2.toFixed(4)}</td>83            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.travelTime2.toFixed(2)}</td>84            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.queue2.toFixed(2)}</td>85            <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">${item.delay2.toFixed(2)}</td>86        `;87        tableBody.appendChild(row);88    });89 90    function create3DScatterPlot() {91const trace1 = {92            x: trafficData.map(item => item.throughput1),93            y: trafficData.map(item => item.travelTime1),94            z: trafficData.map(item => item.queue1),95            mode: 'markers',96            type: 'scatter3d',97            name: 'Case 1',98            marker: {99                size: 8,100                color: '#6366f1',101                opacity: 0.8102            }103        };104 105        const trace2 = {106            x: trafficData.map(item => item.throughput2),107            y: trafficData.map(item => item.travelTime2),108            z: trafficData.map(item => item.queue2),109            mode: 'markers',110            type: 'scatter3d',111            name: 'Case 2',112            marker: {113                size: 8,114                color: '#ec4899',115                opacity: 0.8116            }117        };118 119        const layout = {120            title: '3D Relationship: Throughput vs Travel Time vs Queue Length',121            scene: {122                xaxis: { title: 'Throughput' },123                yaxis: { title: 'Travel Time (s)' },124                zaxis: { title: 'Queue Length (m)' }125            },126            margin: {127                l: 0,128                r: 0,129                b: 0,130                t: 40131            },132            height: 500133        };134 135        Plotly.newPlot('threeDChart', [trace1, trace2], layout);136    }137 138    // Create charts139createThroughputChart();140    createEfficiencyChart();141    createTravelTimeChart();142    createQueueChart();143    createDelayChart();144    create3DScatterPlot();145function createThroughputChart() {146        const ctx = document.getElementById('throughputChart').getContext('2d');147        new Chart(ctx, {148            type: 'bar',149            data: {150                labels: trafficData.map(item => item.demand),151                datasets: [152                    {153                        label: 'Case 1 Throughput',154                        data: trafficData.map(item => item.throughput1),155                        backgroundColor: 'rgba(99, 102, 241, 0.7)',156                        borderColor: 'rgba(99, 102, 241, 1)',157                        borderWidth: 1158                    },159                    {160                        label: 'Case 2 Throughput',161                        data: trafficData.map(item => item.throughput2),162                        backgroundColor: 'rgba(236, 72, 153, 0.7)',163                        borderColor: 'rgba(236, 72, 153, 1)',164                        borderWidth: 1165                    }166                ]167            },168            options: {169                responsive: true,170                plugins: {171                    legend: {172                        position: 'top',173                    },174                    tooltip: {175                        callbacks: {176                            label: function(context) {177                                return `${context.dataset.label}: ${context.raw.toFixed(5)}`;178                            }179                        }180                    }181                },182                scales: {183                    y: {184                        beginAtZero: false185                    }186                }187            }188        });189    }190 191    function createEfficiencyChart() {192        const ctx = document.getElementById('efficiencyChart').getContext('2d');193        new Chart(ctx, {194            type: 'line',195            data: {196                labels: trafficData.map(item => item.demand),197                datasets: [198                    {199                        label: 'Case 1 Efficiency',200                        data: trafficData.map(item => item.efficiency1),201                        backgroundColor: 'rgba(99, 102, 241, 0.2)',202                        borderColor: 'rgba(99, 102, 241, 1)',203                        borderWidth: 2,204                        tension: 0.1,205                        fill: true206                    },207                    {208                        label: 'Case 2 Efficiency',209                        data: trafficData.map(item => item.efficiency2),210                        backgroundColor: 'rgba(236, 72, 153, 0.2)',211                        borderColor: 'rgba(236, 72, 153, 1)',212                        borderWidth: 2,213                        tension: 0.1,214                        fill: true215                    }216                ]217            },218            options: {219                responsive: true,220                plugins: {221                    legend: {222                        position: 'top',223                    },224                    tooltip: {225                        callbacks: {226                            label: function(context) {227                                return `${context.dataset.label}: ${context.raw.toFixed(4)}`;228                            }229                        }230                    }231                },232                scales: {233                    y: {234                        min: 0.9,235                        max: 1.0236                    }237                }238            }239        });240    }241 242    function createTravelTimeChart() {243        const ctx = document.getElementById('travelTimeChart').getContext('2d');244        new Chart(ctx, {245            type: 'bar',246            data: {247                labels: trafficData.map(item => item.demand),248                datasets: [249                    {250                        label: 'Case 1 Travel Time',251                        data: trafficData.map(item => item.travelTime1),252                        backgroundColor: 'rgba(99, 102, 241, 0.7)',253                        borderColor: 'rgba(99, 102, 241, 1)',254                        borderWidth: 1255                    },256                    {257                        label: 'Case 2 Travel Time',258                        data: trafficData.map(item => item.travelTime2),259                        backgroundColor: 'rgba(236, 72, 153, 0.7)',260                        borderColor: 'rgba(236, 72, 153, 1)',261                        borderWidth: 1262                    }263                ]264            },265            options: {266                responsive: true,267                plugins: {268                    legend: {269                        position: 'top',270                    },271                    tooltip: {272                        callbacks: {273                            label: function(context) {274                                return `${context.dataset.label}: ${context.raw.toFixed(2)}s`;275                            }276                        }277                    }278                },279                scales: {280                    y: {281                        beginAtZero: true,282                        title: {283                            display: true,284                            text: 'Seconds'285                        }286                    }287                }288            }289        });290    }291 292    function createQueueChart() {293        const ctx = document.getElementById('queueChart').getContext('2d');294        new Chart(ctx, {295            type: 'bar',296            data: {297                labels: trafficData.map(item => item.demand),298                datasets: [299                    {300                        label: 'Case 1 Queue Length',301                        data: trafficData.map(item => item.queue1),302                        backgroundColor: 'rgba(99, 102, 241, 0.7)',303                        borderColor: 'rgba(99, 102, 241, 1)',304                        borderWidth: 1305                    },306                    {307                        label: 'Case 2 Queue Length',308                        data: trafficData.map(item => item.queue2),309                        backgroundColor: 'rgba(236, 72, 153, 0.7)',310                        borderColor: 'rgba(236, 72, 153, 1)',311                        borderWidth: 1312                    }313                ]314            },315            options: {316                responsive: true,317                plugins: {318                    legend: {319                        position: 'top',320                    },321                    tooltip: {322                        callbacks: {323                            label: function(context) {324                                return `${context.dataset.label}: ${context.raw.toFixed(2)}m`;325                            }326                        }327                    }328                },329                scales: {330                    y: {331                        beginAtZero: true,332                        title: {333                            display: true,334                            text: 'Meters'335                        }336                    }337                }338            }339        });340    }341 342    function createDelayChart() {343        const ctx = document.getElementById('delayChart').getContext('2d');344        new Chart(ctx, {345            type: 'line',346            data: {347                labels: trafficData.map(item => item.demand),348                datasets: [349                    {350                        label: 'Case 1 Delay',351                        data: trafficData.map(item => item.delay1),352                        backgroundColor: 'rgba(99, 102, 241, 0.2)',353                        borderColor: 'rgba(99, 102, 241, 1)',354                        borderWidth: 2,355                        tension: 0.1,356                        fill: true357                    },358                    {359                        label: 'Case 2 Delay',360                        data: trafficData.map(item => item.delay2),361                        backgroundColor: 'rgba(236, 72, 153, 0.2)',362                        borderColor: 'rgba(236, 72, 153, 1)',363                        borderWidth: 2,364                        tension: 0.1,365                        fill: true366                    }367                ]368            },369            options: {370                responsive: true,371                plugins: {372                    legend: {373                        position: 'top',374                    },375                    tooltip: {376                        callbacks: {377                            label: function(context) {378                                return `${context.dataset.label}: ${context.raw.toFixed(2)}s`;379                            }380                        }381                    }382                },383                scales: {384                    y: {385                        beginAtZero: true,386                        title: {387                            display: true,388                            text: 'Seconds'389                        }390                    }391                }392            }393        });394    }395});