feat: Add bar graph for syntax errors in the "Syntax errors" section

aider/website/_posts/2024-08-14-code-in-json.md

@@ -305,6 +305,100 @@ Of course, both JSON results were well below the markdown result.
 
 ## Syntax errors
 
+<div id="syntaxErrorsContainer" style="position: relative; height: 0; padding-bottom: 50%; margin-bottom: 20px;">
+    <canvas id="syntaxErrorsChart" style="position: absolute; width: 100%; height: 100%;"></canvas>
+</div>
+
+<script>
+document.addEventListener('DOMContentLoaded', function () {
+    var ctx = document.getElementById('syntaxErrorsChart').getContext('2d');
+    
+    var yamlData = {{ site.data.code-in-json | jsonify }};
+    
+    var models = [...new Set(yamlData.map(item => item.model))].sort();
+    var editFormats = [...new Set(yamlData.map(item => item.edit_format))];
+    
+    var datasets = editFormats.map(format => ({
+        label: format,
+        data: models.map(model => {
+            var items = yamlData.filter(d => d.model === model && d.edit_format === format);
+            if (items.length === 0) return null;
+            var totalErrors = items.reduce((sum, item) => sum + item.syntax_errors + item.indentation_errors, 0);
+            return totalErrors;
+        }),
+        backgroundColor: function(context) {
+            const format = context.dataset.label;
+            if (format === 'Markdown') {
+                return 'rgba(54, 162, 235, 0.8)';
+            } else if (format.startsWith('JSON')) {
+                const ctx = context.chart.ctx;
+                const gradient = ctx.createPattern(createStripedCanvas(format === 'JSON (strict)'), 'repeat');
+                return gradient;
+            } else {
+                return 'rgba(75, 192, 192, 0.8)';
+            }
+        },
+    }));
+
+    var data = {
+        labels: models,
+        datasets: datasets
+    };
+
+    var config = {
+        type: 'bar',
+        data: data,
+        options: {
+            responsive: true,
+            maintainAspectRatio: false,
+            scales: {
+                x: {
+                    title: {
+                        display: true,
+                        text: 'Model'
+                    }
+                },
+                y: {
+                    beginAtZero: true,
+                    title: {
+                        display: true,
+                        text: 'Total Syntax + Indentation Errors'
+                    }
+                }
+            },
+            plugins: {
+                title: {
+                    display: true,
+                    text: 'Syntax and Indentation Errors by Model and Code Wrapping Strategy',
+                    font: {
+                        size: 16
+                    }
+                },
+                legend: {
+                    position: 'top',
+                }
+            }
+        }
+    };
+
+    // Adjust chart height based on screen width
+    function adjustChartHeight() {
+        var container = document.getElementById('syntaxErrorsContainer');
+        if (window.innerWidth < 600) {
+            container.style.paddingBottom = '75%'; // Increase height on small screens
+        } else {
+            container.style.paddingBottom = '50%'; // Default height
+        }
+    }
+
+    // Call the function initially and on window resize
+    adjustChartHeight();
+    window.addEventListener('resize', adjustChartHeight);
+
+    new Chart(ctx, config);
+});
+</script>
+
 
 ## Conclusions