Graphina Documentation

How to Use Graphina-Firebase (Addon)

🚀 Step-by-Step Guide to Integrating Firebase with Graphina

Step 1: Create a Page in Elementor

  • Open your WordPress dashboard.
  • Create a new page and click “Edit with Elementor.”

Step 2: Add a Chart Widget

  • Select or drag any chart widget from the Graphina Chart panel in Elementor.

Step 3: Configure Chart Data Options

  • Click on the chart widget on your page.
  • Navigate to ‘Chart Data Options’ in the settings panel.

Step 4: Enable Firebase Configuration

  • Select Firebase under Chart Data Options.
  • A new tab called “Firebase Database Configuration” will appear.
  • 📥 Download the Sample JSON File for reference.
  • Upload the Firebase Configuration File and enter your Database URL.

Step 5: Set Up Firebase in Google Console

  1. Open Firebase Console and create a new project.
  2. Click the ⚙️ Settings Icon > Users and Permissions in the Project Overview.
  3. Go to Service Accounts > Generate Private Key.
  4. Click Generate Key to download the JSON file.
  5. Upload this JSON file in the Firebase Configuration step.

Step 6: Import Sample Data into Firebase

  1. Open Realtime Database in Firebase (Left Panel).
  2. Click the menu icon (⋮) on the right and select Import JSON.
  3. Browse and upload the sample JSON file downloaded in Step 4.
  4. Copy the Database URL and paste it into the Firebase Configuration settings in Elementor.

Step 7: Finalize & Sync Data

  • Click Update in Elementor.
  • Refresh the page to successfully connect Graphina with Firebase.

Enable Realtime Data Updates via Ajax

📌 Step 1:

  • Go to Chart Data Options and enable Ajax Reload.

📌 Step 2:

  • Set the interval time (in seconds) for automatic updates.

Now, your chart will update in real time using Firebase! 🎉

🎥 Graphina-Firebase Demo Video: Watch Now

✅ Done! You’ve successfully connected Graphina with Firebase. 🚀