| {"version":3,"sources":["webpack:///./src/pages/docs/Creating Charts and Dashboards/index.mdx"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","parentName","src","isMDXComponent"],"mappings":"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","file":"component---src-pages-docs-creating-charts-and-dashboards-index-mdx-63ecc368f5a898f852ec.js","sourcesContent":["import * as React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\n\nimport DefaultLayout from \"/home/runner/work/superset/superset/docs/node_modules/gatsby-theme-docz/src/base/Layout.js\";\nexport const _frontmatter = {};\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return <MDXLayout {...layoutProps} {...props} components={components} mdxType=\"MDXLayout\">\n\n\n <h2 {...{\n \"id\": \"creating-your-first-dashboard\"\n }}>{`Creating Your First Dashboard`}</h2>\n <p>{`This section is focused on documentation for end-users who will be using Superset\nfor the data analysis and exploration workflow\n(data analysts, business analysts, data\nscientists, etc). In addition to this site, `}<a parentName=\"p\" {...{\n \"href\": \"http://preset.io/\"\n }}>{`Preset.io`}</a>{` maintains an updated set of end-user\ndocumentation at `}<a parentName=\"p\" {...{\n \"href\": \"https://docs.preset.io/\"\n }}>{`docs.preset.io`}</a>{`.`}</p>\n <p>{`This tutorial targets someone who wants to create charts and dashboards in Superset. We’ll show you\nhow to connect Superset to a new database and configure a table in that database for analysis.\nYou’ll also explore the data you’ve exposed and add a visualization to a dashboard so that you get a\nfeel for the end-to-end user experience.`}</p>\n <h3 {...{\n \"id\": \"connecting-to-a-new-database\"\n }}>{`Connecting to a new database`}</h3>\n <p>{`Superset itself doesn't have a storage layer to store your data but instead pairs with\nyour existing SQL-speaking database or data store.`}</p>\n <p>{`First things first, we need to add the connection credentials to your database to be able\nto query and visualize data from it. If you're using Superset locally via\n`}<a parentName=\"p\" {...{\n \"href\": \"/docs/installation/installing-superset-using-docker-compose\"\n }}>{`Docker compose`}</a>{`, you can\nskip this step because a Postgres database, named `}<strong parentName=\"p\">{`examples`}</strong>{`, is included and\npre-configured in Superset for you.`}</p>\n <p>{`Under the `}<strong parentName=\"p\">{`Data`}</strong>{` menu, select the `}<em parentName=\"p\">{`Databases`}</em>{` option:`}</p>\n <img src=\"/images/tutorial_01_sources_database.png\" />{' '} <br /><br />\n <p>{`Next, click the green `}<strong parentName=\"p\">{`+ Database`}</strong>{` button in the top right corner:`}</p>\n <img src=\"/images/tutorial_02_add_database.png\" />{' '} <br /><br />\n <p>{`You can configure a number of advanced options in this window, but for this walkthrough you only\nneed to specify two things (the database name and SQLAlchemy URI):`}</p>\n <img src=\"/images/tutorial_03_database_name.png\" />\n <p>{`As noted in the text below\nthe URI, you should refer to the SQLAlchemy documentation on\n`}<a parentName=\"p\" {...{\n \"href\": \"https://docs.sqlalchemy.org/en/12/core/engines.html#database-urls\"\n }}>{`creating new connection URIs`}</a>{`\nfor your target database.`}</p>\n <p>{`Click the `}<strong parentName=\"p\">{`Test Connection`}</strong>{` button to confirm things work end to end. If the connection looks good, save the configuration\nby clicking the `}<strong parentName=\"p\">{`Add`}</strong>{` button in the bottom right corner of the modal window:`}</p>\n <img src=\"/images/tutorial_04_add_button.png\" />\n <p>{`Congratulations, you've just added a new data source in Superset!`}</p>\n <h3 {...{\n \"id\": \"registering-a-new-table\"\n }}>{`Registering a new table`}</h3>\n <p>{`Now that you’ve configured a data source, you can select specific tables (called `}<strong parentName=\"p\">{`Datasets`}</strong>{` in Superset)\nthat you want exposed in Superset for querying.`}</p>\n <p>{`Navigate to `}<strong parentName=\"p\">{`Data ‣ Datasets`}</strong>{` and select the `}<strong parentName=\"p\">{`+ Dataset`}</strong>{` button in the top right corner.`}</p>\n <img src=\"/images/tutorial_08_sources_tables.png\" />\n <p>{`A modal window should pop up in front of you. Select your `}<strong parentName=\"p\">{`Database`}</strong>{`,\n`}<strong parentName=\"p\">{`Schema`}</strong>{`, and `}<strong parentName=\"p\">{`Table`}</strong>{` using the drop downs that appear. In the following example,\nwe register the `}<strong parentName=\"p\">{`cleaned_sales_data`}</strong>{` table from the `}<strong parentName=\"p\">{`examples`}</strong>{` database.`}</p>\n <img src=\"/images/tutorial_09_add_new_table.png\" />\n <p>{`To finish, click the `}<strong parentName=\"p\">{`Add`}</strong>{` button in the bottom right corner. You should now see your dataset in the list of datasets.`}</p>\n <h3 {...{\n \"id\": \"customizing-column-properties\"\n }}>{`Customizing column properties`}</h3>\n <p>{`Now that you've registered your dataset, you can configure column properties\nfor how the column should be treated in the Explore workflow:`}</p>\n <ul>\n <li parentName=\"ul\">{`Is the column temporal? (should it be used for slicing & dicing in time series charts?)`}</li>\n <li parentName=\"ul\">{`Should the column be filterable?`}</li>\n <li parentName=\"ul\">{`Is the column dimensional?`}</li>\n <li parentName=\"ul\">{`If it's a datetime column, how should Superset parse\nthe datetime format? (using the `}<a parentName=\"li\" {...{\n \"href\": \"https://en.wikipedia.org/wiki/ISO_8601\"\n }}>{`ISO-8601 string pattern`}</a>{`)`}</li>\n </ul>\n <img src=\"/images/tutorial_column_properties.png\" />\n <h3 {...{\n \"id\": \"superset-semantic-layer\"\n }}>{`Superset semantic layer`}</h3>\n <p>{`Superset has a thin semantic layer that adds many quality of life improvements for analysts.\nThe Superset semantic layer can store 2 types of computed data:`}</p>\n <ol>\n <li parentName=\"ol\">{`Virtual metrics: you can write SQL queries that aggregate values\nfrom multiple column (e.g. `}<inlineCode parentName=\"li\">{`SUM(recovered) / SUM(confirmed)`}</inlineCode>{`) and make them\navailable as columns for (e.g. `}<inlineCode parentName=\"li\">{`recovery_rate`}</inlineCode>{`) visualization in Explore.\nAgggregate functions are allowed and encouraged for metrics.`}</li>\n </ol>\n <img src=\"/images/tutorial_sql_metric.png\" />\n <p>{`You can also certify metrics if you'd like for your team in this view.`}</p>\n <ol {...{\n \"start\": 2\n }}>\n <li parentName=\"ol\">{`Virtual calculated columns: you can write SQL queries that\ncustomize the appearance and behavior\nof a specific column (e.g. `}<inlineCode parentName=\"li\">{`CAST(recovery_rate) as float`}</inlineCode>{`).\nAggregate functions aren't allowed in calculated columns.`}</li>\n </ol>\n <img src=\"/images/tutorial_calculated_column.png\" />\n <h3 {...{\n \"id\": \"creating-charts-in-explore-view\"\n }}>{`Creating charts in Explore view`}</h3>\n <p>{`Superset has 2 main interfaces for exploring data:`}</p>\n <ul>\n <li parentName=\"ul\"><strong parentName=\"li\">{`Explore`}</strong>{`: no-code viz builder. Select your dataset, select the chart,\ncustomize the appearance, and publish.`}</li>\n <li parentName=\"ul\"><strong parentName=\"li\">{`SQL Lab`}</strong>{`: SQL IDE for cleaning, joining, and preparing data for Explore workflow`}</li>\n </ul>\n <p>{`We'll focus on the Explore view for creating charts right now.\nTo start the Explore workflow from the `}<strong parentName=\"p\">{`Datasets`}</strong>{` tab, start by clicking the name\nof the dataset that will be powering your chart.`}</p>\n <img src=\"/images/tutorial_launch_explore.png\" /><br /><br />\n <p>{`You're now presented with a powerful workflow for exploring data and iterating on charts.`}</p>\n <ul>\n <li parentName=\"ul\">{`The `}<strong parentName=\"li\">{`Dataset`}</strong>{` view on the left-hand side has a list of columns and metrics,\nscoped to the current dataset you selected.`}</li>\n <li parentName=\"ul\">{`The `}<strong parentName=\"li\">{`Data`}</strong>{` preview below the chart area also gives you helpful data context.`}</li>\n <li parentName=\"ul\">{`Using the `}<strong parentName=\"li\">{`Data`}</strong>{` tab and `}<strong parentName=\"li\">{`Customize`}</strong>{` tabs, you can change the visualization type,\nselect the temporal column, select the metric to group by, and customize\nthe aesthetics of the chart.`}</li>\n </ul>\n <p>{`As you customize your chart using drop-down menus, make sure to click the `}<strong parentName=\"p\">{`Run`}</strong>{` button\nto get visual feedback.`}</p>\n <img src=\"/images/tutorial_explore_run.jpg\" />\n <p>{`In the following screenshot, we craft a grouped Time-series Bar Chart to visualize\nour quarterly sales data by product line just be clicking options in drop-down menus.`}</p>\n <img src=\"/images/tutorial_explore_settings.jpg\" />\n <h3 {...{\n \"id\": \"creating-a-slice-and-dashboard\"\n }}>{`Creating a slice and dashboard`}</h3>\n <p>{`To save your chart, first click the `}<strong parentName=\"p\">{`Save`}</strong>{` button. You can either:`}</p>\n <ul>\n <li parentName=\"ul\">{`Save your chart and add it to an existing dashboard`}</li>\n <li parentName=\"ul\">{`Save your chart and add it to a new dashboard`}</li>\n </ul>\n <p>{`In the following screenshot, we save the chart to a new \"Superset Duper Sales Dashboard\":`}</p>\n <img src=\"/images/tutorial_save_slice.png\" />\n <p>{`To publish, click `}<strong parentName=\"p\">{`Save and goto Dashboard`}</strong>{`.`}</p>\n <p>{`Behind the scenes, Superset will create a slice and store all the information needed\nto create your chart in its thin data layer\n(the query, chart type, options selected, name, etc).`}</p>\n <img src=\"/images/tutorial_first_dashboard.png\" />\n <p>{` To resize the chart, start by clicking the pencil button in the top right corner.`}</p>\n <img src=\"/images/tutorial_pencil_edit.png\" />\n <p>{`Then, click and drag the bottom right corner of the chart until the chart layout snaps\ninto a position you like onto the underlying grid.`}</p>\n <img src=\"/images/tutorial_chart_resize.png\" />\n <p>{` Click `}<strong parentName=\"p\">{`Save`}</strong>{` to persist the changes.`}</p>\n <p>{`Congrats! You’ve successfully linked, analyzed, and visualized data in Superset. There are a wealth\nof other table configuration and visualization options, so please start exploring and creating\nslices and dashboards of your own`}</p>\n <p>{`ֿ`}</p>\n <h3 {...{\n \"id\": \"manage-access-to-dashboards\"\n }}>{`Manage access to Dashboards`}</h3>\n <p>{`Access to dashboards is managed via owners (users that have edit permissions to the dashboard)`}</p>\n <p>{`Non-owner users access can be managed two different ways:`}</p>\n <ol>\n <li parentName=\"ol\">{`Dataset permissions - if you add to the relevant role permissions to datasets it automatically grants implict access to all dashboards that uses those permitted datasets`}</li>\n <li parentName=\"ol\">{`Dashboard roles - if you enable `}<strong parentName=\"li\">{`DASHBOARD_RBAC`}</strong>{` feature flag then you be able to manage which roles can access the dashboard`}</li>\n </ol>\n <ul>\n <li parentName=\"ul\">{`Having dashboard access implicitly grants read access to the associated datasets, therefore\nall charts will load their data even if feature flag is turned on and no roles assigned\nto roles the access will fallback to `}<strong parentName=\"li\">{`Dataset permissions`}</strong></li>\n </ul>\n <img src=\"/images/tutorial_dashboard_access.png\" />\n\n </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""} |