Accessible Data Visualization Creator

Chart Details

Enter Chart Data

Live Preview

Customization


Accessibility Helper

Data Table

No data to display.

'; return; } let svg = ` ${this.state.chartTitle} ${this.state.chartDescription} `; this.PATTERNS.forEach(p => { svg += ` ${p.html.replace('stroke-width="2"', `stroke="${palette[p.id[1]-1]}" stroke-width="2"`)}`; }); svg += ` `; for(let i=0; i<=5; i++) { // Grid lines const y = H-P-(i*(H-P*1.5)/5); svg += `${(maxVal/5*i).toLocaleString()}`; } svg += ` `; const catWidth = (W-P*1.5) / data.length; const barWidth = (catWidth - G*2) / seriesNames.length - S; data.forEach((cat, i) => { svg += ` ${cat.category}`; cat.values.forEach((val, j) => { const h = (val/maxVal) * (H-P*1.5); const x = j*(barWidth+S); const y = H-P-h; const fill = options.usePatterns && seriesNames.length > 1 ? `url(#${this.PATTERNS[j % this.PATTERNS.length].id})` : palette[j % palette.length]; const color = options.usePatterns ? 'transparent' : palette[j % palette.length]; svg += ` ${options.showDataLabels ? `${val.toLocaleString()}`:''} `; }); svg += ``; }); svg += ``; container.innerHTML = svg; } // --- Navigation & PDF --- navigateTabs(dir) { const i = this.TABS_ORDER.indexOf(this.state.activeTab); let n = i; if (dir === 'next' && i < this.TABS_ORDER.length - 1) n++; if (dir === 'prev' && i > 0) n--; this.openTab(null, this.TABS_ORDER[n]); } openTab(event, tabName) { this.state.activeTab = tabName; this.updateUI(); } async generatePdf() { if (this.state.activeTab !== 'export') { this.openTab(null, 'export'); await new Promise(res => setTimeout(res, 50)); } const { jsPDF } = window.jspdf; this.dom.downloadPdfBtn.disabled = true; this.dom.downloadPdfBtn.textContent = 'Generating...'; try { const canvas = await html2canvas(this.dom.pdfOutput, { scale: 2, useCORS: true, backgroundColor: '#ffffff' }); const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF({ orientation: 'landscape', unit: 'pt', format: 'a4' }); const margin = 40; const pdfWidth = pdf.internal.pageSize.getWidth(); const pdfHeight = pdf.internal.pageSize.getHeight(); const imgWidth = pdfWidth - margin * 2; const imgHeight = canvas.height * imgWidth / canvas.width; pdf.addImage(imgData, 'PNG', margin, margin, imgWidth, imgHeight); pdf.save(`${this.state.chartTitle.replace(/\s+/g, '_')}.pdf`); } catch (e) { console.error(e); alert('Error generating PDF.'); } finally { this.dom.downloadPdfBtn.disabled = false; this.dom.downloadPdfBtn.textContent = 'Download as PDF'; } } } const app = new AccessibleVizDashboard();
Scroll to Top