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

  2. View Results

    • Results appear in the Results Pane (SQL Editor) or in the output area of the code cell (Notebook)
    Query Result
    Query results in tabular format, ready for visualization

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
    Edit Chart
    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

  1. Enable Pivot Mode

    • Toggle the Pivot Mode button in the Columns tab of results pane
  2. Configure Pivot Layout

    SectionPurposeExample
    Row GroupsGroup data by categoriesProduct Category, Region
    ValuesDisplay series with aggregationSUM(Sales), COUNT(Orders)
    Column LabelsGroup series across columnsYear, Quarter
    Pivot Mode
    Pivot configuration interface showing drag-and-drop areas
  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

TabFeatureAvailable Options
Chart StyleVisual treatmentPadding, background color
TitlesText elementsChart title, subtitle, axis titles
LegendReference guideEnable/disable, position (top, bottom, left, right)
SeriesData appearanceStyle, tooltips, opacity, labels, shadows
AxesGrid structurePosition, 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.