# JavaScript Embedded Analytics

Website · Documentation · Live Demo

AG Studio is a JavaScript Embedded Analytics component for creating dashboards. It's built on top of AG Grid and AG Charts, and comes with support for React, Angular and Vue.

## Overview AG Studio is an embedded analytics component that lets analysts build interactive dashboards on top of your data. Add a single component to your application, configure your data source and get drag-and-drop report building with advanced cross-filtering, powered by a built-in data engine. ### How it Works Your application owns the surrounding shell: routing, authentication, data fetching, persistence, whilst AG Studio handles everything inside the component boundary: the canvas, widgets, drag-and-drop, and filtering, all powered by a built-in data engine that runs entirely in the browser. Once configured, analysts can use the drag-and-drop UI to create self-serve reports, and end users can then interact with those reports to interrogate their data with cross-filters and page-level filters. You can ship pre-built reports in code so users see a finished dashboard on first load, or let analysts create reports from scratch using the drag-and-drop editor. The entire dashboard state is a single JSON object, so you can save and restore it later. ### Features | Feature | Description | | --------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | [Drag & Drop Report Builder](https://ag-grid.com/studio/javascript/modes-layout/) | Bar charts, line charts, pie charts, grids, KPI tiles, text, and images on a drag-and-drop canvas. Design in **edit mode**, then switch to **view mode** to lock the layout while keeping the dashboard fully interactive. | | [Data Engine](https://ag-grid.com/studio/javascript/data/) | Provide one or more data sources and the data engine automatically manages joins across tables via relationships, aggregation, filtering, and calculated fields through an expression language. No query layer required. | | [Advanced Filtering](https://ag-grid.com/studio/javascript/filters/) | Page-level filters, widget-level filters, and cross-filtering between widgets are all built in. Users can filter from the filters panel, from on-canvas filter widgets (list, button, and date), or by clicking data points in charts to cross-filter the rest of the page. | | [Theming](https://ag-grid.com/studio/javascript/theming/) | Full customisation via the Theming API. Override colours, fonts, spacing, and borders across the Studio UI, grid widgets, and chart widgets independently. Light and dark modes are supported out of the box. | | [State Management](https://ag-grid.com/studio/javascript/state/) | The entire dashboard state (pages, widgets, layout, and filters) is captured in a single serialisable JSON object. Save and restore state to persist reports, and let users switch between saved reports. | ## Quick Start To configure AG Studio, simply provide your data and render the component. Read on for vanilla JavaScript instructions, or refer to our framework-specific guides for React, Angular and Vue. ### Installation ```sh npm install ag-studio ``` ### Setup **1. Provide a Container** Add a container element to your HTML. AG Studio fills the size of its parent, so ensure it has a height and width: ```html

``` **2. Define Your Data** Studio works with arrays of plain objects, where each array becomes a data source: ```js const data = { sources: [ { id: 'products', data: [ { product_name: 'Printer', category: 'Printing & Imaging', brand: 'CleanSlate Office', list_price: 109.09, unit_cost: 92.26, }, { product_name: 'Notebook', category: 'Paper & Notebooks', brand: 'PaperLine', list_price: 24.7, unit_cost: 14.19, }, { product_name: 'Highlighters', category: 'Writing Instruments', brand: 'PaperLine', list_price: 10.34, unit_cost: 5.03, }, // ... more rows ], }, ], }; ``` **3. Create the Studio** Import `createStudio` and initialise it, passing the `data` object and setting the `mode` to `'edit'`: ```js import { createStudio } from 'ag-studio'; const studioApi = createStudio(document.getElementById('myStudio'), { data, mode: 'edit', }); ``` That's it — users can now build reports using the drag-and-drop editor. > **Note:** For more information on building dashboards with AG Studio, refer to our [Quick Start](https://ag-grid.com/studio/javascript/quick-start/) guide or step through the full [Tutorial](https://ag-grid.com/studio/javascript/tutorial/). ## User Guides Our [User Guides documentation](https://ag-grid.com/studio/javascript/user-interface/) contains comprehensive guides to help users understand how to use AG Studio. ## Support AG Studio customers have access to dedicated support via [ZenDesk](https://ag-grid.zendesk.com/hc/en-us), which is monitored by our engineering teams. ## License `ag-studio` has a **Commercial** license. See the [LICENSE file](https://www.ag-grid.com/studio/licenses/ag-studio/LICENSE.html) for more info. [Request a free 45-day enterprise trial](https://ag-grid.com/studio/license-pricing/?tab=trial) to explore the full enterprise capabilities of AG Studio with no restrictions or watermarks.

AG Grid

AG Studio is built on top of [AG Grid](https://www.ag-grid.com/) — the best JavaScript Data Grid in the world. If you need a standalone data grid with sorting, filtering, grouping, pivoting, and more, check out [AG Grid Repo](https://github.com/ag-grid/ag-grid).

AG Charts

AG Studio is built on top of [AG Charts](https://www.ag-grid.com/charts/) — the best JavaScript Charting library in the world. If you need standalone charts with bar, line, pie, scatter, treemap, and more, check out [AG Charts Repo](https://github.com/ag-grid/ag-charts).

Follow us to keep up to date with all the latest news from AG Grid: