${ex.text}

`; } displayContainer.appendChild(contentDiv); if (index === 0) { btn.classList.add('active'); contentDiv.classList.add('active'); } }); } function updateQuadrantView() { const infoType = document.querySelector('input[name="info_type"]:checked').value; const purpose = document.querySelector('input[name="purpose"]:checked').value; const quadrantId = `${infoType}-${purpose}`; document.querySelectorAll('.gc-quadrant').forEach(q => q.classList.remove('active')); document.getElementById(quadrantId).classList.add('active'); } function createAllCharts() { if(document.getElementById('barChart')) charts.bar = new Chart(document.getElementById('barChart').getContext('2d'), { type: 'bar', data: { labels: ['Q1', 'Q2', 'Q3', 'Q4'], datasets: [{ label: 'Sales', data: [120, 190, 150, 210], backgroundColor: '#198754' }] }, options: {plugins:{legend:{display:false}}} }); if(document.getElementById('lineChart')) charts.line = new Chart(document.getElementById('lineChart').getContext('2d'), { type: 'line', data: { labels: ['Jan', 'Feb', 'Mar', 'Apr'], datasets: [{ label: 'Users', data: [50, 65, 80, 75], tension: 0.1, borderColor: '#dc3545' }] }, options: {plugins:{legend:{display:false}}} }); if(document.getElementById('pieChart')) charts.pie = new Chart(document.getElementById('pieChart').getContext('2d'), { type: 'pie', data: { labels: ['Marketing', 'Sales', 'Dev'], datasets: [{ data: [300, 500, 100], backgroundColor: ['#0d6efd', '#ffc107', '#6c757d'] }] } }); if(document.getElementById('scatterPlot')) charts.scatter = new Chart(document.getElementById('scatterPlot').getContext('2d'), { type: 'scatter', data: { datasets: [{ label: 'Data Points', data: [{x:2,y:3},{x:4,y:5},{x:3,y:1},{x:5,y:2}], backgroundColor: '#ffc107' }] }, options: {plugins:{legend:{display:false}}} }); if(document.getElementById('heatmap')) { const data = { labels: ['Mon', 'Tue', 'Wed'], datasets: [{ label: 'User Activity', data: [{x:0,y:0,v:10},{x:1,y:1,v:20},{x:2,y:0,v:15}], backgroundColor(c) { const a = c.raw.v / 20; return `rgba(25, 135, 84, ${a})`; } }] }; charts.heatmap = new Chart(document.getElementById('heatmap').getContext('2d'), { type: 'matrix', data, options: { plugins:{legend:{display:false}, title:{display:true, text:'Example Heatmap'}}, scales:{x:{type:'category', labels:['Morning', 'Afternoon', 'Evening']}, y:{type:'category', labels:['Mon','Tue','Wed'], offset:true}} } }); } } const svgGenerators = { processFlow: () => ``, cycleDiagram: () => ``, orgChart: () => ``, vennDiagram: () => ``, mindMap: () => ``, networkDiagram: () => ``, geoMap: () => ``, }; // --- EVENT LISTENERS --- document.getElementById('gc-container').addEventListener('click', e => { if(e.target.matches('.gc-example-btn')) { const quadrant = e.target.closest('.gc-quadrant'); quadrant.querySelectorAll('.gc-example-btn').forEach(b => b.classList.remove('active')); quadrant.querySelectorAll('.gc-example-content').forEach(c => c.classList.remove('active')); e.target.classList.add('active'); quadrant.querySelector(`#content-${quadrant.id}-${e.target.dataset.exampleName.replace(/\s/g, '')}`).classList.add('active'); } }); document.querySelectorAll('input[name="info_type"], input[name="purpose"]').forEach(radio => { radio.addEventListener('change', updateQuadrantView); }); document.getElementById('pdf-download-btn').addEventListener('click', async () => { const btn = document.getElementById('pdf-download-btn'); btn.textContent = 'Generating...'; btn.disabled = true; const { jsPDF } = window.jspdf; const canvas = await html2canvas(document.querySelector('.gc-quadrant.active'), { scale: 2, backgroundColor: '#ffffff' }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF('p', 'mm', 'a4'); const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = (canvas.height * pdfWidth) / canvas.width; pdf.addImage(imgData, 'PNG', 10, 10, pdfWidth - 20, pdfHeight - 20); pdf.save('Chart_Recommendation.pdf'); btn.textContent = 'Download Selection'; btn.disabled = false; }); // Initial setup Object.keys(chartExamples).forEach(setupQuadrant); updateQuadrantView(); createAllCharts(); });