# Intro

## Visualize any SQL Query

With ChartSQL, any valid SQL script is a ChartSQL visualization

```sql
-- @chart: column
-- @title: Column - Sales by Month
-- @subtitle: An example column chart showing sales by month
-- @formats: currency
SELECT 
	TRUNC(date_closed, 'MONTH') as Month,
	sum(amount) as Sales
FROM sales
GROUP BY TRUNC(date_closed, 'MONTH')
ORDER BY TRUNC(date_closed, 'MONTH') ASC
```

<div align="left"><figure><img src="https://4045370218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB0xzzR5x0BnQ6kHixlzd%2Fuploads%2FYKacjcvOLK3bsWn376eV%2FUntitled.png?alt=media&#x26;token=07b76a05-6def-4f10-9ef0-acb6944408c1" alt=""><figcaption></figcaption></figure></div>

See all [Available Charts](https://docs.chartsql.com/charts/example-charts)

## Key Features

* **What you Query is what You Chart:** We call it "Whikee-Whic" - Convert SQL queries to charts directly with no additional data shaping.
* **Auto-Detection**: ChartSQL determines the optimal chart type for your data.
* **Flexible @directives**: Complete control with @directives to fine-tune chart rendering for complex visual requirements.
* **Collaborative**: Maintain SQL source code and visualization instructions together in one file.
* **Embedding**: Add visualizations to applications with dynamic, auto-updating charts that are easily maintained.

## Get Started with ChartSQL Studio

ChartSQL Studio is a desktop source code editor to create and execute SQL scripts, charts and visualizations using the ChartSQL language.

<figure><img src="https://4045370218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB0xzzR5x0BnQ6kHixlzd%2Fuploads%2F3WN4W8wdbcB4aYaS1tkh%2Fchart_sql_studio.png?alt=media&#x26;token=7bae9853-4a9f-4dfc-ae96-a6e582c3d8c3" alt=""><figcaption><p>ChartSQL Studio Desktop Editor</p></figcaption></figure>

[See Installation Instructions](https://docs.chartsql.com/chartsql-studio/installing-studio-desktop)

## Visualizations

ChartSQL supports many chart and visualizations:

* [Column](https://docs.chartsql.com/charts/column)
* [Bar](https://docs.chartsql.com/charts/bar)
* [Pie](https://docs.chartsql.com/charts/pie)
* [Line](https://docs.chartsql.com/charts/line)
* [Scatter](https://docs.chartsql.com/charts/scatter)
* [Bubble](https://docs.chartsql.com/charts/bubble)
* [Heatmap](https://docs.chartsql.com/charts/heatmap)
* [Combo Chart](https://docs.chartsql.com/charts/combo)
* [Stacked Charts](https://docs.chartsql.com/charts/formatting-and-rendering/stacked-charts)
* [Area](https://docs.chartsql.com/charts/area)
* [Gauge](https://docs.chartsql.com/charts/gauge)
* [Radar](https://docs.chartsql.com/charts/radar)

## Practical Uses

From rapidly prototyping dashboards to delivering in-depth reports, ChartSQL serves a broad range of scenarios. See use cases on how developers, data teams and agencies use ChartSQL to visualize data.

<table data-card-size="large" data-view="cards"><thead><tr><th data-card-target data-type="content-ref"></th><th data-hidden></th><th data-hidden></th><th data-hidden></th></tr></thead><tbody><tr><td><a href="../product-and-community/use-cases/for-sql-developers">for-sql-developers</a></td><td></td><td>For SQL <br>Developers</td><td></td></tr><tr><td><a href="../product-and-community/use-cases/for-application-developers">for-application-developers</a></td><td></td><td>For Application Developers</td><td></td></tr><tr><td><a href="../product-and-community/use-cases/for-agencies">for-agencies</a></td><td></td><td></td><td></td></tr><tr><td><a href="../product-and-community/use-cases/for-data-science-teams">for-data-science-teams</a></td><td></td><td></td><td></td></tr></tbody></table>

## Ways to use ChartSQL

* [**ChartSQL Studio**](https://docs.chartsql.com/chartsql-studio/overview)**:** Desktop SQL and chart editor (Available Now) for designing and presenting visualizations.
* **ChartSQL Cloud:** Online editor and chart dashboards (In Development)
* **ChartSQL.js:** Client side rendering for embedding in web applications (In Development)

### ChartSQL Studio

ChartSQL Studio is a free editor for creating SQL charts. You can write and execute SQL queries, customize chart settings, and preview the results. With ChartSQL Studio, you have full control over your data and SQL source code.

<div><img src="https://4045370218-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FB0xzzR5x0BnQ6kHixlzd%2Fuploads%2F3WN4W8wdbcB4aYaS1tkh%2Fchart_sql_studio.png?alt=media&#x26;token=7bae9853-4a9f-4dfc-ae96-a6e582c3d8c3" alt="ChartSQL Studio screenshot"> <figure><img src="https://www.notion.so/itr8studios/Intro-448b016d878e425d8feca1ab0727dfa5?pvs=4#c7622a3834154ecdb8d25f198e95fa01" alt=""><figcaption></figcaption></figure></div>

### ChartSQL Cloud (coming soon)

Host your ChartSQL scripts With ChartSQL Clou&#x64;*.* Our hosted editor and dashboard tools allow for professional collaboration.

* **Automatic Dashboard Sync**: When your SQL source updates, so does any dashboard using your charts.
* **Multi-Tenant Functionality**: Easily clone and customize dashboards across different clients and datasets without changing any code or manually rebuilding.
* **Chart Library**: Empower teams to create personalized dashboards that stay up to date with your source code. You write the available visualizations in SQL, but they can choose charts from your package libraries to customize their dashboards.

### ChartSQL .js

ChartSQL JS is a front-end library that enables you to render SQL-based  charts (or table like data) seamlessly within any web application. Quickly add visualizations using ChartSQL embedded directives.

See [ChartSQL.js](https://docs.chartsql.com/chartsql-js)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.chartsql.com/basics/readme.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.