Businesses of all sizes are integrating data analytics into various systems and processes, including their public-facing websites. Data visualizations can strengthen a website’s marketing potential and increase company credibility.
Many organizations leverage a business intelligence (BI) software vendor to meet their analytics needs, but with the rise of low-code and no-code software applications, teams can create data visualizations without needing a complicated backend data infrastructure or expensive frontend BI application.
For users of the content management system (CMS) Wordpress, it’s possible to embed no-code reports within your website. Wordpress is an open source web development platform that allows users to create websites, blogs, and online stores.
Given that many businesses leverage websites to display key figures, highlight marketing data, and improve SEO—embedding data visualizations within Wordpress allows teams to incorporate real-time insights without needing to manually update static copy.
Here are a few common use cases for embedding charts and data in Wordpress:
This article will discuss how to:
Before adding data visualizations to your website, brainstorm the types of metrics that will strengthen a website or article's story. Significant amounts of text can overwhelm viewers, while data visualizations can help a user quickly interpret the value of a service or offering.
For example, a company may have industry-focused website pages that discuss why their product meets the needs of organizations in a particular vertical. In this scenario, a data visualization can supplement text by quickly and clearly showcasing a count of customers or total users served in a particular industry.
While this is a simple example, there are countless ways in which data visualizations can be used to augment a website and online content. Even news publications leverage embedded charts and graphs to showcase key figures that bolster an online article’s thesis.
While reports will vary by team and industry, some use cases include:
With the rise of low-code and no-code software, there are numerous ways to organize critical business data using simple, no-code databases. Even if your organization has a sophisticated data pipeline and data engineering team, a no-code database enables teams to create their own reports without depending on technical engineering teams.
Popular no-code database options include:
While notion is known primarily as a robust documentation and team collaboration tool, Notion can also be used as a database. To do so, simply create a new page and select one of the options in the database section. We recommend using a table, which provides a spreadsheet-like structure to manually enter or import data.
Pros:
Cons:
At its core, Airtable was designed to allow organizations to create databases within a low-code/no-code architecture. Unlike Notion—a content management system that has some database capabilities—Airtable was designed to provide a user-friendly alternative to traditional spreadsheets and backend databases.
Pros:
Cons:
Google Sheets can also be used as a no-code database. For anyone that’s used Microsoft Excel, the platform has a very shallow learning curve. Like Airtable and Notion, Google Sheets takes traditional spreadsheets online and allows for real-time collaboration between teammates.
Pros:
Cons:
After brainstorming key metrics and selecting a database provider, it’s important to consider a logical order in which to present your reports. This is the foundation of data analytics dashboard design. What’s the clearest way to order reports on a dashboard? What visualization types work best for each report? Thinking about these questions helps to create an organized layout that tells your team’s story.
To design a clear and consistent analytics dashboard consider:
While mockups can be intricately designed in front-end user-interface (UI) applications, they can also be as simple as drafting your dashboard design with pen and paper. Start with a lightweight rendering of the types of reports you want on your dashboard and think about the logical order in which they should appear. You can draft and change a mockup as many times as you need. This is simply a starting point to help determine the general layout of your performance dashboard, as well as the types of visualizations that are needed.
Each data visualization type has a purpose and some can be better suited to display certain information over others. Consider the following as a general guide:
A single-value metric should showcase a KPI that is a single, standalone value. These should typically be formatted at the top of a performance dashboard and provide a quick gauge on how the team is progressing. This number is often a percentage (e.g. % toward goal) or a total (e.g. 55 total opportunities). Additionally, color coding these metrics can help users quickly understand team performance. If a single-value metric contains a red value, this universally signifies that a metric is performing below a predetermined expectation. Green, on the other hand, can indicate the team is on track.
Comparison visuals can consist of bar/column charts, pie/donut charts, area charts, ribbon charts, and shape maps. These visualization types make it easy to compare the differences and similarities between values. For example, a column chart that showcases revenue by sales rep can quickly highlight which rep is leading in sales for a designated time period.
If Google Sheets is serving as your database, the service is an obvious (and free) choice for data visualizations as well. Additionally, Notion has a preconfigured embed block for Google Drive, making it easy to copy a report’s share-URL and embed the data within Notion.
The downside: Google Sheets doesn’t offer the sleekest visualization options. It can take a significant amount of time to format reports and there are limited design options. Charts are only a small portion of Google Sheets’ functionality, so the experience of creating visualizations can be inferior and time-consuming compared to more robust data visualization tools.
Tableau is an extremely robust data visualization tool and the sky's the limit for the types of reports and dashboards that can be configured in the application. Tableau is masterful at processing large amounts of data and dashboards can be customized to meet the look and feel of any organization’s branding.
The downside: A Tableau subscription is expensive and has a steep learning curve for non-technical users. It can certainly be overwhelming, making it inaccessible to many business users, especially in the no code community. There are also compatibility issues with low-code/no-code services; for example, it’s often necessary to use a supported third-party embed block like CodePen to ensure tableau dashboards render properly in Notion.
Superchart is a new data visualization tool that was designed to be embedded in no-code tools like Wordpress. The application integrates with Airtable and Google Sheets to easily import business data. Superchart’s data visualization options include modern, customizable elements that look professional, follow design best practices, and have a fresh appeal. Additionally, changes in base data or chart design update automatically between Superchart and Wordpress.
The downside: This new product has limited visualization types and database integrations. Their visualization types currently only include tables, pivot tables, bar charts, line charts, area charts, KPIs, and column charts. And their database integrations currently only include Airtable and Google Sheets.
At this point, let's assume you have created a dashboard mockup, you have the data available in a no code database, and you've created your data visualizations in a no code charting tool.
Now comes the fun and easy part.
To embed a visualization in Wordpress, click the + Block Inserter by clicking the plus sign, and select ‘Custom HTML’.
This will place an HTML block on the page, where custom code can be pasted. All you have to do is copy and paste the embed code from your visualization into this embed element.
After adding your code, you can preview the embedded chart directly within Wordpress. For a full list of all HTML tags supported by the Custom HTML block, visit this page.
If you're looking to arrange multiple charts and KPIs on a single page to display a dashboard, we recommend using layout grids. Grids are helpful to control the horizontal and vertical dashboard layout, while also optimizing for responsiveness across different devices. With grids, it's easy to arrange multiple embed elements together to create a dashboard.
In the example used here, we use a layout grid that contains embed elements inside of each column. This gives us optimal control to decide how large each column should be, how much padding or offset to apply, what size of gutters to use, and how all the visualizations should be arranged together most effectively.
Once your data visualizations have been embedded into a Wordpress page, you’ll want to publish your work. Before sharing broadly, it’s important to audit the dashboard and verify that the data is accurate. It may even be worthwhile to create internal processes by which the data is reviewed, or assign an analyst to provide quality assurance (QA) on the dashboard before it’s released publicly.
If your newly created analytics dashboard contains internal information or data that should only be visible by select users, Wordpress also provides the ability to password-protect specific pages of your website.
With so many businesses launching new products, websites, and online content, it's hard to capture attention and stand out from the crowd. The best way to do this is by adding more value, not noise.
Embedding charts, KPIs, and other data visualizations on your website, in your product or service, and in your online content, is a surefire way to help your brand stick out.
Build trust, boost engagement, and deliver value. Get started by trying out Superchart today!
