| (window.webpackJsonp=window.webpackJsonp||[]).push([[45],{wllN:function(e,t,a){"use strict";a.r(t),a.d(t,"_frontmatter",(function(){return i})),a.d(t,"default",(function(){return c}));var n=a("k1TG"),o=a("8o2o"),r=(a("q1tI"),a("7ljp")),s=a("hhGP"),i=(a("qKvR"),{});void 0!==i&&i&&i===Object(i)&&Object.isExtensible(i)&&!i.hasOwnProperty("__filemeta")&&Object.defineProperty(i,"__filemeta",{configurable:!0,value:{name:"_frontmatter",filename:"src/pages/docs/Creating Charts and Dashboards/index.mdx"}});var l=s.a;function c(e){var t=e.components,a=Object(o.a)(e,["components"]);return Object(r.b)(l,Object(n.a)({},a,{components:t,mdxType:"MDXLayout"}),Object(r.b)("h2",{id:"creating-your-first-dashboard"},"Creating Your First Dashboard"),Object(r.b)("p",null,"This section is focused on documentation for end-users (data analysts, business analysts, data\nscientists, etc.). In addition to this site, Preset.io maintains an upto-date set of end-user\ndocumentation at ",Object(r.b)("a",{href:"https://docs.preset.io/",parentName:"p"},"docs.preset.io"),"."),Object(r.b)("p",null,"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."),Object(r.b)("h3",{id:"connecting-to-a-new-database"},"Connecting to a new database"),Object(r.b)("p",null,"We assume you already have a database configured and can connect to it from the instance on which\nyou’re running Superset. If you’re just testing Superset and want to explore sample data, you can\nload some sample PostgreSQL datasets into a fresh DB, or configure the\n",Object(r.b)("a",{href:"https://github.com/dylburger/noaa-ghcn-weather-data",parentName:"p"},"example weather data")," we use here."),Object(r.b)("p",null,"Under the ",Object(r.b)("strong",{parentName:"p"},"Sources")," menu, select the ",Object(r.b)("em",{parentName:"p"},"Databases")," option:"),Object(r.b)("p",null,Object(r.b)("img",{src:"/images/tutorial_01_sources_database.png"})," "),Object(r.b)("p",null,"On the resulting page, click on the green plus sign, near the top right:"),Object(r.b)("p",null,Object(r.b)("img",{src:"/images/tutorial_02_add_database.png"})," "),Object(r.b)("p",null,"You can configure a number of advanced options on this page, but for this walkthrough, you’ll only\nneed to do ",Object(r.b)("strong",{parentName:"p"},"two things"),":"),Object(r.b)("ol",null,Object(r.b)("li",{parentName:"ol"},"Name your database connection:")),Object(r.b)("img",{src:"/images/tutorial_03_database_name.png"}),Object(r.b)("p",null,"Provide the SQLAlchemy Connection URI and test the connection:"),Object(r.b)("img",{src:"/images/tutorial_04_sqlalchemy_connection_string.png"}),Object(r.b)("p",null,"This example shows the connection string for our test weather database. As noted in the text below\nthe URI, you should refer to the SQLAlchemy documentation on\n",Object(r.b)("a",{href:"https://docs.sqlalchemy.org/en/12/core/engines.html#database-urls",parentName:"p"},"creating new connection URIs"),"\nfor your target database."),Object(r.b)("p",null,"Click the ",Object(r.b)("strong",{parentName:"p"},"Test Connection")," button to confirm things work end to end. Once Superset can\nsuccessfully connect and authenticate, you should see a popup like this:"),Object(r.b)("img",{src:"/images/tutorial_05_connection_popup.png"}),Object(r.b)("p",null,"Moreover, you should also see the list of tables Superset can read from the schema you’re connected\nto, at the bottom of the page:"),Object(r.b)("img",{src:"/images/tutorial_06_list_of_tables.png"}),Object(r.b)("p",null,"If the connection looks good, save the configuration by clicking the ",Object(r.b)("strong",{parentName:"p"},"Save")," button at the bottom\nof the page:"),Object(r.b)("img",{src:"/images/tutorial_07_save_button.png"}),Object(r.b)("h3",{id:"adding-a-new-table"},"Adding a new table"),Object(r.b)("p",null,"Now that you’ve configured a database, you’ll need to add specific tables to Superset that you’d\nlike to query."),Object(r.b)("p",null,"Under the ",Object(r.b)("strong",{parentName:"p"},"Sources")," menu, select the ",Object(r.b)("em",{parentName:"p"},"Tables")," option:"),Object(r.b)("img",{src:"/images/tutorial_08_sources_tables.png"}),Object(r.b)("p",null,"On the resulting page, click on the green plus sign, near the top left:"),Object(r.b)("img",{src:"/images/tutorial_09_add_new_table.png"}),Object(r.b)("p",null,"You only need a few pieces of information to add a new table to Superset:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"The name of the table")),Object(r.b)("img",{src:"/images/tutorial_10_table_name.png"}),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"The target database from the ",Object(r.b)("strong",{parentName:"li"},"Database")," drop-down menu (i.e. the one you just added above)")),Object(r.b)("img",{src:"/images/tutorial_11_choose_db.png"}),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"Optionally, the database schema. If the table exists in the “default” schema (e.g. the public\nschema in PostgreSQL or Redshift), you can leave the schema field blank.")),Object(r.b)("p",null,"Click on the ",Object(r.b)("strong",{parentName:"p"},"Save")," button to save the configuration:"),Object(r.b)("img",{src:"/images/tutorial_07_save_button.png"}),Object(r.b)("p",null,"When redirected back to the list of tables, you should see a message indicating that your table was\ncreated:"),Object(r.b)("img",{src:"/images/tutorial_12_table_creation_success_msg.png"}),Object(r.b)("p",null,"This message also directs you to edit the table configuration. We’ll edit a limited portion of the\nconfiguration now - just to get you started - and leave the rest for a more advanced tutorial."),Object(r.b)("p",null,"Click on the edit button next to the table you’ve created:"),Object(r.b)("img",{src:"/images/tutorial_13_edit_table_config.png"}),Object(r.b)("p",null,"On the resulting page, click on the ",Object(r.b)("strong",{parentName:"p"},"List Table Column")," tab. Here, you’ll define the way you can\nuse specific columns of your table when exploring your data. We’ll run through these options to\ndescribe their purpose:"),Object(r.b)("p",null,"If you want users to group metrics by a specific field, mark it as ",Object(r.b)("strong",{parentName:"p"},"Groupable"),"."),Object(r.b)("p",null,"If you need to filter on a specific field, mark it as ",Object(r.b)("strong",{parentName:"p"},"Filterable"),"."),Object(r.b)("p",null,"Is this field something you’d like to get the distinct count of? Check the ",Object(r.b)("strong",{parentName:"p"},"Count Distinct")," box."),Object(r.b)("p",null,"Is this a metric you want to sum, or get basic summary statistics for? The ",Object(r.b)("strong",{parentName:"p"},"Sum, Min"),", and ",Object(r.b)("strong",{parentName:"p"},"Max"),"\ncolumns will help."),Object(r.b)("p",null,"The ",Object(r.b)("strong",{parentName:"p"},"is temporal")," field should be checked for any date or time fields. We’ll cover how this\nmanifests itself in analyses in a moment."),Object(r.b)("p",null,"Here’s how we’ve configured fields for the weather data. Even for measures like the weather\nmeasurements (precipitation, snowfall, etc.), it’s ideal to group and filter by these values:"),Object(r.b)("img",{src:"/images/tutorial_14_field_config.png"}),Object(r.b)("p",null,"As with the configurations above, click the ",Object(r.b)("strong",{parentName:"p"},"Save")," button to save these settings."),Object(r.b)("h3",{id:"exploring-your-data"},"Exploring your data"),Object(r.b)("p",null,"To start exploring your data, simply click on the table name you just created in the list of\navailable tables:"),Object(r.b)("img",{src:"/images/tutorial_15_click_table_name.png"}),Object(r.b)("p",null,"By default, you’ll be presented with a Table View:"),Object(r.b)("img",{src:"/images/tutorial_16_datasource_chart_type.png"}),Object(r.b)("p",null,"Let’s walk through a basic query to get the count of all records in our table. First, we’ll need to\nchange the ",Object(r.b)("strong",{parentName:"p"},"Since")," filter to capture the range of our data. You can use simple phrases to apply\nthese filters, like “3 years ago”:"),Object(r.b)("img",{src:"/images/tutorial_17_choose_time_range.png"}),Object(r.b)("p",null,"The upper limit for time, the ",Object(r.b)("strong",{parentName:"p"},"Until")," filter, defaults to “now”, which may or may not be what you\nwant. Look for the Metrics section under the ",Object(r.b)("strong",{parentName:"p"},"GROUP BY")," header, and start typing “Count” - you’ll\nsee a list of metrics matching what you type:"),Object(r.b)("img",{src:"/images/tutorial_18_choose_metric.png"}),Object(r.b)("p",null,"Select the ",Object(r.b)("em",{parentName:"p"},"COUNT(","*",")")," metric, then click the green ",Object(r.b)("strong",{parentName:"p"},"Query")," button near the top of the explore:"),Object(r.b)("img",{src:"/images/tutorial_19_click_query.png"}),Object(r.b)("p",null,"You’ll see your results in the table:"),Object(r.b)("img",{src:"/images/tutorial_20_count_star_result.png"}),Object(r.b)("p",null,"Let’s group this by the weather_description field to get the count of records by the type of weather\nrecorded by adding it to the Group by section:"),Object(r.b)("img",{src:"/images/tutorial_21_group_by.png"}),Object(r.b)("p",null,"and run the query:"),Object(r.b)("img",{src:"/images/tutorial_22_group_by_result.png"}),Object(r.b)("p",null,"Let’s find a more useful data point: the top 10 times and places that recorded the highest\ntemperature in 2015. We replace weather_description with latitude, longitude and measurement_date in\nthe ",Object(r.b)("strong",{parentName:"p"},"Group by")," section:"),Object(r.b)("img",{src:"/images/tutorial_23_group_by_more_dimensions.png"}),Object(r.b)("p",null,"And replace ",Object(r.b)("em",{parentName:"p"},"COUNT(","*",")")," with ",Object(r.b)("em",{parentName:"p"},"max","_","_","measurement_flag"),":"),Object(r.b)("img",{src:"/images/tutorial_24_max_metric.png"}),Object(r.b)("p",null,"The ",Object(r.b)("em",{parentName:"p"},"max","_","_","measurement_flag")," metric was created when we checked the box under ",Object(r.b)("strong",{parentName:"p"},"Max")," and next to\nthe ",Object(r.b)("em",{parentName:"p"},"measurement_flag")," field, indicating that this field was numeric and that we wanted to find its\nmaximum value when grouped by specific fields."),Object(r.b)("p",null,"In our case, ",Object(r.b)("em",{parentName:"p"},"measurement_flag")," is the value of the measurement taken, which clearly depends on the\ntype of measurement (the researchers recorded different values for precipitation and temperature).\nTherefore, we must filter our query only on records where the ",Object(r.b)("em",{parentName:"p"},"weather_description")," is equal to\n“Maximum temperature”, which we do in the ",Object(r.b)("strong",{parentName:"p"},"Filters")," section at the bottom of the explore:"),Object(r.b)("img",{src:"/images/tutorial_25_max_temp_filter.png"}),Object(r.b)("p",null,"Finally, since we only care about the top 10 measurements, we limit our results to 10 records using\nthe Row ",Object(r.b)("em",{parentName:"p"},"limit")," option under the ",Object(r.b)("strong",{parentName:"p"},"Options")," header:"),Object(r.b)("img",{src:"/images/tutorial_26_row_limit.png"}),Object(r.b)("p",null,"We click ",Object(r.b)("strong",{parentName:"p"},"Query")," and get the following results:"),Object(r.b)("img",{src:"/images/tutorial_27_top_10_max_temps.png"}),Object(r.b)("p",null,"In this dataset, the maximum temperature is recorded in tenths of a degree Celsius. The top value of\n1370, measured in the middle of Nevada, is equal to 137 C, or roughly 278 degrees F. It’s unlikely\nthis value was correctly recorded. We’ve already been able to investigate some outliers with\nSuperset, but this just scratches the surface of what we can do."),Object(r.b)("p",null,"You may want to do a couple more things with this measure:"),Object(r.b)("ul",null,Object(r.b)("li",{parentName:"ul"},"The default formatting shows values like 1.37k, which may be difficult for some users to read.\nIt’s likely you may want to see the full, comma-separated value. You can change the formatting of\nany measure by editing its config (",Object(r.b)("strong",{parentName:"li"},"Edit Table Config > List Sql Metric > Edit Metric >\nD3Format"),")")),Object(r.b)("p",null,"= Moreover, you may want to see the temperature measurements in plain degrees C, not tenths of a\ndegree. Or you may want to convert the temperature to degrees Fahrenheit. You can change the SQL\nthat gets executed against the database, baking the logic into the measure itself (",Object(r.b)("strong",{parentName:"p"},"Edit Table\nConfig > List Sql Metric > Edit Metric > SQL Expression"),")."),Object(r.b)("p",null,"For now, though, let’s create a better visualization of these data and add it to a dashboard. We can\nchange the Chart Type to “Distribution - Bar Chart”:"),Object(r.b)("img",{src:"/images/tutorial_28_bar_chart.png"}),Object(r.b)("p",null,"Our filter on Maximum temperature measurements was retained, but the query and formatting options\nare dependent on the chart type, so you’ll have to set the values again:"),Object(r.b)("img",{src:"/images/tutorial_29_bar_chart_series_metrics.png"}),Object(r.b)("p",null,"You should note the extensive formatting options for this chart: the ability to set axis labels,\nmargins, ticks, etc. To make the data presentable to a broad audience, you’ll want to apply many of\nthese to slices that end up in dashboards. For now, though, we run our query and get the following\nchart:"),Object(r.b)("img",{src:"/images/tutorial_30_bar_chart_results.png"}),Object(r.b)("h3",{id:"creating-a-slice-and-dashboard"},"Creating a slice and dashboard"),Object(r.b)("p",null,"This view might be interesting to researchers, so let’s save it. In Superset, a saved query is\ncalled a ",Object(r.b)("strong",{parentName:"p"},"Slice"),"."),Object(r.b)("p",null,"To create a slice, click the ",Object(r.b)("strong",{parentName:"p"},"Save as")," button near the top-left of the explore:"),Object(r.b)("img",{src:"/images/tutorial_19_click_query.png"}),Object(r.b)("p",null,"A popup should appear, asking you to name the slice, and optionally add it to a dashboard. Since we\nhaven’t yet created any dashboards, we can create one and immediately add our slice to it. Let’s do\nit:"),Object(r.b)("img",{src:"/images/tutorial_31_save_slice_to_dashboard.png"}),Object(r.b)("p",null,"Click ",Object(r.b)("strong",{parentName:"p"},"Save"),", which will direct you back to your original query. We see that our slice and\ndashboard were successfully created:"),Object(r.b)("img",{src:"/images/tutorial_32_save_slice_confirmation.png"}),Object(r.b)("p",null,"Let’s check out our new dashboard. We click on the ",Object(r.b)("strong",{parentName:"p"},"Dashboards")," menu:"),Object(r.b)("img",{src:"/images/tutorial_33_dashboard.png"}),Object(r.b)("p",null,"and find the dashboard we just created:"),Object(r.b)("img",{src:"/images/tutorial_34_weather_dashboard.png"}),Object(r.b)("p",null,"Things seemed to have worked - our slice is here!"),Object(r.b)("img",{src:"/images/tutorial_35_slice_on_dashboard.png"}),Object(r.b)("p",null,"But it’s a bit smaller than we might like. Luckily, you can adjust the size of slices in a dashboard\nby clicking, holding and dragging the bottom-right corner to your desired dimensions:"),Object(r.b)("img",{src:"/images/tutorial_36_adjust_dimensions.gif"}),Object(r.b)("p",null,"After adjusting the size, you’ll be asked to click on the icon near the top-right of the dashboard\nto save the new configuration."),Object(r.b)("p",null,"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"))}void 0!==c&&c&&c===Object(c)&&Object.isExtensible(c)&&!c.hasOwnProperty("__filemeta")&&Object.defineProperty(c,"__filemeta",{configurable:!0,value:{name:"MDXContent",filename:"src/pages/docs/Creating Charts and Dashboards/index.mdx"}}),c.isMDXComponent=!0}}]); |
