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 the Chart Toolbar Button

The fastest way to create a chart from your results:

1. Select Data

   • Highlight desired columns or rows by clicking and dragging in the Results Pane

2. Create Chart

   • Click the Chart icon in the toolbar (or press Ctrl+G / Cmd+G)
   • A chart is created instantly using your last-used chart type (defaults to grouped column)

3. Change Chart Type

   • Click the dropdown arrow next to the chart icon to choose from all available chart types (Column, Bar, Pie, Line, Area, Scatter, Polar, Statistical, Hierarchical, Specialized, Funnel, and Combination)
   • Your selection is remembered for next time

4. 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 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 → Use tabs to customize

Method 3: 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

Charting Multi-Series Data

A common scenario is charting data that has a category column (like a platform or region) alongside a date and a metric. For example:

SELECT
  date_trunc('week', date) AS week,
  platform,
  SUM(value) AS metric
FROM events
GROUP BY 1, 2
ORDER BY 1, 2;

This produces “long format” data where each row has a date, a category, and a value:

To chart this with each category as a separate colored series, you have two options:

Option 1: Reshape in SQL (Wide Format)

Rewrite the query so each category becomes its own column:

SELECT
  date_trunc('week', date) AS week,
  SUM(value) FILTER (WHERE platform = 'ABC') AS "ABC",
  SUM(value) FILTER (WHERE platform = 'EFG') AS "EFG"
FROM events
GROUP BY 1
ORDER BY 1;

Then select all columns and use Chart Range or the Chart toolbar button. Each numeric column automatically becomes a separate series.

Option 2: Use Pivot Mode

Keep the original long-format query and use pivot mode to reshape the data visually:

1. Open the Columns tab and enable Pivot Mode
2. Drag week into Row Groups
3. Drag platform into Column Labels
4. Drag metric into Values (set aggregation to Sum)
5. Right-click the pivot grid and choose Pivot Chart to select a chart type

Chart Customization Options

Style and Appearance

Supported Chart Types

• Column/Bar Charts: Compare data across categories (grouped, stacked, 100% stacked)
• Line Charts: Analyze trends over time (line, stacked, 100% stacked)
• Pie/Donut Charts: Display proportions of a whole
• Area Charts: Represent cumulative data trends (area, stacked, 100% stacked)
• X Y (Scatter) Charts: Highlight relationships between variables (scatter, bubble)
• Polar Charts: Radar line, radar area, nightingale, radial column, radial bar
• Statistical Charts: Box plot, histogram, range bar, range area
• Hierarchical Charts: Treemap and sunburst visualizations
• Specialized Charts: Heatmap and waterfall
• Funnel Charts: Funnel, cone funnel, and pyramid
• Combination Charts: Mix column & line or area & column in a single chart

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.