| {"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-de5b4a490b3379b4fb31.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\n </MDXLayout>;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""} |