Integrate Chartbrew with Strapi

These integration guides are not official documentation and the Strapi Support Team will not provide assistance with them.

What Is Chartbrew?

Chartbrew is a powerful, open-source business intelligence tool designed for data teams to create, visualize, and share data insights in real time. Chartbrew connects seamlessly to multiple data sources, including databases and APIs, enabling users to build custom dashboards, generate reports, and track key metrics with ease.

Chartbrew’s user-friendly interface allows both technical and non-technical teams to collaborate on data analysis. This tool empowers businesses to make informed decisions by transforming raw data into actionable insights, ensuring everyone in the organization has access to the information they need for strategic planning and growth.

Why Integrate Chartbrew with Strapi?

Integrating Chartbrew with Strapi allows you to transform your headless CMS into a powerful visualization tool without the complexity. The raw data in your Strapi CMS serves as the foundation, but actionable insights are what drive decisions.

The official plugin seamlessly integrates visualization tools within your Strapi admin panel. Track content performance, monitor engagement, and analyze results all in one place without switching between different platforms. This integration keeps you focused and productive.

Chartbrew turns your Strapi content into visual stories with charts, dashboards, and reports. See complex data relationships that simple database tables can't reveal, whether you're tracking content metrics, user engagement, or API usage patterns. Choose from a variety of chart types and customize them to meet your needs.

Support for multiple dashboards enables you to create tailored views directly in Strapi. You can organize them by project, client, or data type, which are ideal for managing multiple Strapi projects or presenting focused metrics to stakeholders.

Access your data in two ways: use the API editor for simple data collection or the SQL editor for more complex queries. Depending on your project needs, choose the right API strategy. Understanding the differences between REST and GraphQL can help you make the best decision for your project. Start with simple analytics and evolve to more sophisticated insights as your project grows.

How to Integrate Chartbrew with Strapi

This process connects Chartbrew with your Strapi instance. We'll add visualization tools directly to your Strapi admin panel, enabling you to integrate Strapi with Chartbrew seamlessly.

Prerequisites

Make sure your versions match:

• Strapi v5 with Chartbrew v4 requires Plugin v3+
• Strapi v5 with Chartbrew v3 requires Plugin v2.x.x
• Strapi v4 requires Plugin v1.x.x

You'll also need:

• A running Strapi instance
• Node.js and npm/yarn
• A Chartbrew account or self-hosted instance
• Admin access to your Strapi panel

Your Strapi instance must be accessible from the internet if using Chartbrew's cloud service—either deployed or tunneled.

Step 1: Prepare the Strapi Project

Check that your Strapi instance runs and the admin panel loads. Note your base URL for later.

Step 2: Set Up Chartbrew

Choose your approach:

Managed Service: Sign up at Chartbrew's cloud platform for quick setup.

Self-Hosting: Chartbrew is open-source and runs on Docker, Heroku, or Vercel. Self-hosting gives you data control and custom options.

Alternatively, you can also look into Strapi Cloud for hosting. When deciding on hosting, consider Strapi hosting options to find the best fit for your project.

Step 3: Install the Chartbrew Plugin to Integrate Chartbrew with Strapi

Install the official plugin:

npm install @chartbrew/plugin-strapi

Add it to your config/plugins.js:

module.exports = {
  'chartbrew': {
    enabled: true,
  },
};

Restart Strapi. Chartbrew will appear in your admin sidebar, completing the integration of Chartbrew with Strapi.

For more ways to enhance your Strapi setup, consider exploring essential Strapi plugins.

Step 4: Configure API Authentication in Strapi

Go to Settings → API Tokens → Create new API Token.

Understanding Strapi user roles helps you to assign appropriate permissions and maintain security when integrating with external tools like Chartbrew.

Pick your permission level:

Read-only (Recommended): Prevents data changes and works for most visualizations.

Custom: Needed for user data or specific collections. Give permissions only for collections Chartbrew needs to see.

Set duration to "Unlimited" to avoid expiration issues. Copy the token right away; you won't see it again.

For more detailed guidance, refer to this beginner's guide to authentication in Strapi.

Step 5: Connect Strapi to Chartbrew

In Chartbrew, create a new project and add a Strapi data source:

• Strapi API URL: Your base URL + /api (e.g., https://your-strapi-instance.com/api)
• API Token: The token from Step 4

Test the connection for a "200 OK" status. All communication must use HTTPS—Strapi requires it for security.

Step 6: Build Your First Dashboard

Create your first visualization:

1. Select your Strapi connection as the data source
2. Choose which collection to visualize
3. Pick your chart type (line, bar, pie, etc.)
4. Customize colors, labels, and display options
5. Set automatic refresh intervals

The plugin lets you create dashboards from collection types and switch between multiple dashboards within Strapi. For complex data needs, use Chartbrew's SQL editor to write custom queries that combine information from multiple collections.

Project Example

Let's walk through a practical implementation of a Strapi-Chartbrew integration that creates a content performance dashboard.

First, install the Chartbrew plugin in your Strapi project:

// From your Strapi project root
npm install strapi-plugin-chartbrew

// In your config/plugins.js file
module.exports = {
  // ... other plugins
  chartbrew: {
    enabled: true,
    config: {
      apiUrl: process.env.CHARTBREW_API_URL || 'http://localhost:3210',
      datastoreToken: process.env.CHARTBREW_DATASTORE_TOKEN,
      // Optional custom routes to expose
      routes: [
        {
          method: 'GET',
          path: '/content-analytics',
          handler: 'chartbrew.getContentAnalytics',
          config: { auth: false }
        }
      ]
    }
  }
};

Then, create a custom analytics endpoint in your Strapi project:

// Path: src/extensions/chartbrew/controllers/custom.js
module.exports = {
  async getContentAnalytics(ctx) {
    // Fetch articles with view counts
    const articles = await strapi.db.query('api::article.article').findMany({
      select: ['id', 'title', 'createdAt', 'views', 'likes'],
      orderBy: { createdAt: 'DESC' },
      limit: 50,
    });
    
    // Transform data for visualization
    const formattedData = articles.map(article => ({
      title: article.title,
      views: article.views || 0,
      likes: article.likes || 0,
      engagement: article.views > 0 ? (article.likes / article.views) * 100 : 0,
      date: article.createdAt
    }));
    
    return formattedData;
  }
};

This implementation enables you to track content performance metrics across your Strapi content types. The custom endpoint aggregates view and engagement data, which Chartbrew can query to create visualizations.

The repository includes examples for tracking user growth, content creation velocity, and API usage patterns. What sets this approach apart is its flexibility; you can extend data collection to track any metrics that are crucial to your specific use case.

For instance, by modifying the controller, you can track category performance, author productivity, or seasonal content trends. The repository also provides example Chartbrew configuration files, including bar charts for top-performing content, line charts for engagement over time, and heatmaps showing peak publishing periods.

When integrating this into your project, consider the key performance indicators (KPIs) that are most important for your content strategy. The modular design allows you to start with basic metrics and progressively implement more advanced analytics as your needs grow.

Strapi Open Office Hours

If you have any questions about Strapi 5 or just would like to stop by and say hi, you can join us at Strapi's Discord Open Office Hours, Monday through Friday, from 12:30 pm to 1:30 pm CST: Strapi Discord Open Office Hours.

For more details, visit the Strapi documentation and the Chartbrew documentation.