đź“Š
Public Data Visualization Guide
  • Data visualization standards for SF.gov
  • Why do this?
    • Now you try!
  • Thoughtful design
  • Accessibility
    • Some basics
    • Color
    • Formatting Data Visualizations
    • Formatting tables
    • Alt Text
  • Mobile view
  • More resources
  • Analyst checklist
  • Using the Power BI template: A step-by-step guide
  • Data management
  • Webpage content for data pages
  • Publishing Power BI dashboards to SF.gov
  • Resources and links
  • Gallery of dashboard transformations
Powered by GitBook
On this page
  • For SF.gov, size your dashboards to fit properly on the webpage.
  • Publish to a designated public workspace.
  • Know your dashboard dimensions.
  • Confirm page view is "fit to page".
  • Get the embed codes.

Was this helpful?

Export as PDF

Publishing Power BI dashboards to SF.gov

Specific instructions for Power BI users embedding dashboards on SF.gov.

PreviousWebpage content for data pagesNextResources and links

Last updated 1 year ago

Was this helpful?

For SF.gov, size your dashboards to fit properly on the webpage.

For both desktop and mobile, the width of the dashboard is set. The height may vary, but be sure to test your dashboard on the website.

  • Desktop: width must be 700, height 700-1100

  • Mobile - width must be 360, height 700-1200

  • The template has these sizes built in. While the width is set and must remain set (to fit the webpage), you may extend the length within reason (to 1100 for desktop, to 1200 for mobile).

Publish to a designated public workspace.

Publish your dashboard to the specific workspace that houses your public dashboards. Read more about this on DataSF's Power BI Publish to Web Tip Sheet.

Know your dashboard dimensions.

In order to embed on SF.gov, you will need to know your dashboard size.

To re-size the page or confirm the dimensions, go to the report editor (where you’re designing your dashboard). Click outside the dashboard to make sure no visual is selected, then click the page icon with a paint brush and then canvas settings.

Test your final dashboard in the website with different screen sizes to ensure you can see each visual in its entirety on the screen.

Confirm page view is "fit to page".

Ensure that the page view on both tabs of your dashboard are the default “fit to page”.

Get the embed codes.

You will also need to get your embed codes for both the desktop and mobile view.

Within Power BI Online, navigate to your dashboard. Then click File, Embed report, Publish to web (public).

If you do not see this option to embed the report or publish to web, review DataSF's Power BI Publish to Web Tip Sheet. Then contact your IT or administrator to request the necessary account permissions.

You will need to copy the embed link for both your desktop view and your mobile view. Simply change the “default page” to get each link - and confirm the correct view is showing up in the preview window to the right!

You will then enter the URLs and the dashboard dimensions into SF.gov.

Screenshot of Power BI desktop showing how to confirm page view. Go to the view tab (at the top) and then click page view and confirm "fit to page" is selected. Repeat for all tabs.
Screenshot of Power BI online showing an open report. Click file, embed report, and publish to web (public) to get embed codes.
Screenshot from Power BI online showing how to copy the embed code for each page. Change the default page selection to get each embed URL.
Screenshot of Power BI desktop showing how to change page size. Click outside dashboard to ensure no visuals are selected. Then click the visualizations paper icon with a paint brush in front, go to canvas settings, and change the numbers under width and height.
Screenshot of Power BI desktop showing how to change page size. Click outside dashboard to ensure no visuals are selected. Then click the visualizations paper icon with a paint brush in front, go to canvas settings, and change the numbers under width and height.