Charting and Data Visualization

AI Patterns / Charting and Data Visualization

Intro

Joule uses charting and data visualization to help users interpret their data at a glance. This table aims to highlight the components that can be surfaced within Joule, where and how they are used within Joule, their current status, and in which products they can be found.

<table style="width:100%;"><tbody><tr><td><strong>Components</strong></td><td><strong>Usage</strong></td><td><strong>Status</strong></td><td><strong>Found In</strong></td></tr><tr><td>Chart Card: Data Tooltip</td><td>Used to show a metric in a dataset</td><td>In Progress;<br>Data Tooltip Guidelines</td><td>Joule</td></tr><tr><td>Metric Card</td><td>Used to show a single metric</td><td>TBC</td><td>SAC<br><br>TBC: Joule</td></tr><tr><td>AI Insight Marker</td><td>Highlight insights on a chart</td><td>TBC</td><td>TBC: Joule</td></tr></tbody></table>

Design Resources

Mobile Chart Styling Guidelines – D&A

Project Watt UX Specification

Contact

Have questions or input? We'd love to hear from you – reach out via dna-web-kit@sap.com or the DNA Design System Teams channel.