# SQL Scripts & Charts

ChartSQL visualizes plain SQL. Your SQL scripts live in folders on your file system (or in ChartSQL Studio Cloud) in what we call a **Folder**. Typically, you will have your SQL scripts in source control like git.

Each chart is a self contained SQL file and set of `@directives` (we say 'at directives' or 'directives'). Directives define how you want your chart to display. Any SQL file can be a visualization if it has appropriate columns that can be used for categories and series.

```sql
-- @chart: column
-- @category: product
-- @series: units_sold
SELECT 'Shoes' AS product, 120 AS units_sold
UNION ALL
SELECT 'T-Shirts', 200
UNION ALL
SELECT 'Jeans', 80
UNION ALL
SELECT 'Sunglasses', 150
UNION ALL
SELECT 'Hats', 90;
```

You can manage your charts for the currently open Folder from the file list

<div align="left"><figure><img src="https://4045370218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB0xzzR5x0BnQ6kHixlzd%2Fuploads%2FRd1yVgLtJ5HStOSHOWFp%2Ffilelist_snapshot.png?alt=media&#x26;token=0929c670-995f-4b8c-a41f-76a6633b7a31" alt=""><figcaption></figcaption></figure></div>

## Filtering

Typing into the “Filtering Folder Charts…” input will begin searching from your package files. You can also begin filtering with ctrl + f. You can exit filtering by hitting ESC.

{% hint style="info" %}
If you are already filtering, hitting ctrl + f again will bring up the browser’s default find.
{% endhint %}

You can filter on the following content:

* The name of the physical sql file
* The [@title](https://docs.chartsql.com/reference/directives/title) directive of the SQL script&#x20;
* Tags defined in the script using [@tags](https://docs.chartsql.com/reference/directives/overlay-series-1) directive

## Previewing & Opening

Clicking on any file in the list will open it in your editor. Only one file is open in Preview at a time, if you click a different file it will take the first file’s place. When you start editing the file it will convert to being an open file.

<figure><img src="https://4045370218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB0xzzR5x0BnQ6kHixlzd%2Fuploads%2F39CLDjklIdNP5qlV4wu2%2Fpreview_and_opening_screenshot.jpg?alt=media&#x26;token=e85d071a-bb56-4aa6-8495-5943122d3638" alt=""><figcaption><p>An open SQL script and chart preview</p></figcaption></figure>
