Get Help
leafleafleafMan illustrationFlower illustration
Updated on July 19, 2022

How to use

Estimated reading: 2 minutes 408 views

How to Use Graphina-Firebase(Addon)

  • Step 1

Create a page and click on edit with Elementor

  • Step 2

Select or drag any chart widget from Elementor Graphina Chart panel 

  • Step 2
  • Step 3

after adding the widget on your page, click on the  chart and click on ‘Chart Data Options’

  • Step 3

From Chart Data options select Firebase options.

  • Step 4

After selecting Firebase a tab named “Firebase Database Configuration” will get enabled

Download the sample json for chart from(Click here to download sample JSON file)

Upload configuration file of firebase and enter database url

  • Step 5

Click on https://console.firebase.google.com/ and create a project

Project overview (left click on settings icon)

click on it and click on users and permission.

After page opens click on service Accounts .

Click on the ‘Generate Private Key‘

A pop up will come click on Generate Key a file will be downloaded .

Upload the generate key json file in upload configuration file(step 4)

  • Step 6

Click on realtime database(left panel)

after the database is created as we have downloaded the sample file(step 4) we need to import that json sample file so click on the hamburger sign(3 dots right end )

Click on import json browse and upload the download json  sample file

After successfully import data copy the url and paste it in Database url (step 4)

  • Step 7

Now update  and and refresh page to successfull connect with Firebase 

Realtime update data from Firebase with Ajax reload features

  • Step 1

Click on Chart data option

Enabled ajax reload and set Interval time(sec)

Chart data will get update with ajax call 

Graphina-Firebase (Add-on) Demo video

Done!!

Pervious
Next

Leave a Comment

Share this Doc

How to use

Or copy link

CONTENTS