Visualize
DBCode empowers users to visualize query results with charts, enabling better insights and efficient analysis. With support for various chart types such as bar charts, line charts, and pie charts, DBCode integrates visualization seamlessly within Visual Studio Code.
Creating Visualizations
Prerequisites
-
Run a Query
- Open a
.sql
file in DBCode Notebook or SQL Editor and execute your SQL query - For guidance, refer to SQL Editor Documentation or Notebooks Documentation
- Open a
-
View Results
- Results appear in the Results Pane (SQL Editor) or in the output area of the code cell (Notebook)
Query results in tabular format, ready for visualization
Chart Creation Methods
Method 1: Using Range Selection
-
Select Data
- Highlight desired columns or rows by clicking and dragging in the Results Pane
- Alternatively, use the
Columns
tab to select columns and drag them toRow Groups
andValues
fields
-
Create Chart
- Right-click on selection → Chart Range → Select chart type (bar, line, pie, etc.)
-
Edit Chart
- Click the ⋮ (three dots) menu in the top-right corner → Edit
Chart editing interface with Chart, Set Up, and Customize tabs - Configure settings across these tabs:
- Chart: Change visualization type and style
- Set Up: Define categories, series, and aggregation methods
- Customize: Adjust styles, titles, legends, and axis labels
Method 2: Using Pivot Mode
-
Enable Pivot Mode
- Toggle the Pivot Mode button in the
Columns
tab of results pane
- Toggle the Pivot Mode button in the
-
Configure Pivot Layout
Section Purpose Example Row Groups Group data by categories Product Category, Region Values Display series with aggregation SUM(Sales), COUNT(Orders) Column Labels Group series across columns Year, Quarter Pivot configuration interface showing drag-and-drop areas -
Create Chart
- Right-click in result area → Pivot Chart → Select chart type
-
Edit Chart
- Click ⋮ (three dots) menu → Edit → Use tabs to customize
Chart Customization Options
Style and Appearance
Tab | Feature | Available Options |
---|---|---|
Chart Style | Visual treatment | Padding, background color |
Titles | Text elements | Chart title, subtitle, axis titles |
Legend | Reference guide | Enable/disable, position (top, bottom, left, right) |
Series | Data appearance | Style, tooltips, opacity, labels, shadows |
Axes | Grid structure | Position, color, grid lines, ticks, labels |
Supported Chart Types
- Column/Bar Charts: Compare data across categories
- Line Charts: Analyze trends over time
- Pie/Donut Charts: Display proportions of a whole
- Scatter Plots: Highlight relationships between variables
- Area Charts: Represent cumulative data trends
- Hierarchical Charts: Visualize parent-child relationships with expandable categories
- Combination Charts: Mix multiple chart types for complex data relationships
Additional Features
Chart Management
- Expand: ⋮ menu → Expand (enlarges chart for better visibility)
- Shrink: ⋮ menu → Shrink (returns to original size)
- Close: ⋮ menu → Close (removes chart from view)
Data Filtering
- Click the Filters tab in query output pane
- Apply filters using operators:
- Text: Contains, Equals, Starts with, Ends with
- Numbers: Equals, Greater than, Less than, Between
- Dates: Before, After, Between
- General: Blank, Not blank
- Charts automatically update to reflect filtered data
Exporting Charts
- Click ⋮ menu → Download
- Choose filename and location to save as image
Benefits of DBCode Visualization
- Integrated Analysis: Complete data workflow within VS Code
- Flexible Visualization: Multiple chart types for different analysis needs
- Interactive Exploration: Drill down, filter, and refine visualizations
- Efficient Workflow: Toggle between table and chart views seamlessly
DBCode’s chart visualization transforms raw query outputs into actionable insights directly within Visual Studio Code.