Chartbrew

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.