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

1. 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

2. View Results

   • Results appear in the Results Pane (SQL Editor) or in the output area of the code cell (Notebook)

   

Chart Creation Methods

Method 1: Using Range Selection

1. 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 to Row Groups and Values fields

2. Create Chart

   • Right-click on selection → Chart Range → Select chart type (bar, line, pie, etc.)

3. Edit Chart

   • Click the ⋮ (three dots) menu in the top-right corner → Edit

   

   • 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

1. Enable Pivot Mode

   • Toggle the Pivot Mode button in the Columns tab of results pane

2. 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

   

3. Create Chart

   • Right-click in result area → Pivot Chart → Select chart type

4. 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

1. Click the Filters tab in query output pane
2. 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
3. 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.