{"id":375,"date":"2025-03-17T04:19:57","date_gmt":"2025-03-17T04:19:57","guid":{"rendered":"https:\/\/documentation.iqonic.design\/graphina\/?p=375"},"modified":"2025-03-17T04:44:58","modified_gmt":"2025-03-17T04:44:58","slug":"graphina-firebase-how-to-use","status":"publish","type":"post","link":"https:\/\/documentation.iqonic.design\/graphina\/graphina-firebase-how-to-use\/","title":{"rendered":"How to Use Graphina-Firebase (Addon)"},"content":{"rendered":"<div class=\"nolwrap\">\n<p><\/p>\n\n\n\n<p>\ud83d\ude80 <strong>Step-by-Step Guide to Integrating Firebase with Graphina<\/strong><\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 1: Create a Page in Elementor<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Open your WordPress dashboard.<\/li>\n\n\n\n<li>Create a new page and click <strong>&#8220;Edit with Elementor.&#8221;<\/strong><\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 2: Add a Chart Widget<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select or drag any <strong>chart widget<\/strong> from the <strong>Graphina Chart panel<\/strong> in Elementor.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"562\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/03\/image-15.png\" alt=\"\" class=\"wp-image-391\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 3: Configure Chart Data Options<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click on the <strong>chart widget<\/strong> on your page.<\/li>\n\n\n\n<li>Navigate to <strong>\u2018Chart Data Options\u2019<\/strong> in the settings panel.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"301\" height=\"539\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/03\/image-17.png\" alt=\"\" class=\"wp-image-393\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 4: Enable Firebase Configuration<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Select <strong>Firebase<\/strong> under <strong>Chart Data Options.<\/strong><\/li>\n\n\n\n<li>A new tab called <strong>&#8220;Firebase Database Configuration&#8221;<\/strong> will appear.<\/li>\n\n\n\n<li>\ud83d\udce5 <strong><a href=\"https:\/\/chatgpt.com\/c\/67d26809-80ac-8009-9b4a-6bd87391a4da#\" target=\"_blank\" rel=\"noopener\">Download the Sample JSON File<\/a><\/strong> for reference.<\/li>\n\n\n\n<li>Upload the <strong>Firebase Configuration File<\/strong> and enter your <strong>Database URL.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"304\" height=\"540\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/03\/image-18.png\" alt=\"\" class=\"wp-image-394\" style=\"width:364px;height:auto\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 5: Set Up Firebase in Google Console<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open <strong><a href=\"https:\/\/console.firebase.google.com\/\" target=\"_blank\" rel=\"noopener\">Firebase Console<\/a><\/strong> and create a new project.<\/li>\n\n\n\n<li><span style=\"margin: 0px;padding: 0px\">Click the \u2699\ufe0f\u00a0<strong>Settings Icon<\/strong>\u00a0&gt;\u00a0<strong>Users and Permissions in the Project Overview<\/strong><\/span><strong>.<\/strong><\/li>\n\n\n\n<li>Go to <strong>Service Accounts<\/strong> &gt; <strong>Generate Private Key.<\/strong><\/li>\n\n\n\n<li>Click <strong>Generate Key<\/strong> to download the JSON file.<\/li>\n\n\n\n<li>Upload this JSON file in the <strong>Firebase Configuration<\/strong> step.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1366\" height=\"768\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/03\/image-19.png\" alt=\"\" class=\"wp-image-395\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 6: Import Sample Data into Firebase<\/strong><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open <strong>Realtime Database<\/strong> in Firebase (Left Panel).<\/li>\n\n\n\n<li>Click the <strong>menu icon (\u22ee) on the right<\/strong> and select <strong>Import JSON.<\/strong><\/li>\n\n\n\n<li>Browse and upload the <strong>sample JSON file<\/strong> downloaded in <strong>Step 4.<\/strong><\/li>\n\n\n\n<li>Copy the <strong>Database URL<\/strong> and paste it into the <strong>Firebase Configuration settings<\/strong> in Elementor.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1100\" height=\"576\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/03\/image-20.png\" alt=\"\" class=\"wp-image-396\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Step 7: Finalize &amp; Sync Data<\/strong><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Click <strong>Update<\/strong> in Elementor.<\/li>\n\n\n\n<li>Refresh the page to successfully connect Graphina with Firebase.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1246\" height=\"623\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/03\/image-21.png\" alt=\"\" class=\"wp-image-397\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\" \/>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Enable Realtime Data Updates via Ajax<\/strong><\/h2>\n\n\n\n<p>\ud83d\udccc <strong>Step 1:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Go to <strong>Chart Data Options<\/strong> and enable <strong>Ajax Reload.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"285\" height=\"273\" src=\"https:\/\/documentation.iqonic.design\/graphina\/wp-content\/uploads\/sites\/3\/2025\/03\/image-22.png\" alt=\"\" class=\"wp-image-398\" style=\"width:289px;height:auto\" \/><\/figure>\n\n\n\n<p>\ud83d\udccc <strong>Step 2:<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Set the <strong>interval time<\/strong> (in seconds) for automatic updates.<\/li>\n<\/ul>\n\n\n\n<p>Now, your chart will update <strong>in real time<\/strong> using Firebase! \ud83c\udf89<\/p>\n\n\n\n<p>\ud83c\udfa5 <strong>Graphina-Firebase Demo Video: <a href=\"https:\/\/chatgpt.com\/c\/67d26809-80ac-8009-9b4a-6bd87391a4da#\" target=\"_blank\" rel=\"noopener\">Watch Now<\/a><\/strong><\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"Graphina Firebase Demo\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/_1Xu7kGb4Ms?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<p>\u2705 <strong>Done!<\/strong> You\u2019ve successfully connected Graphina with Firebase. \ud83d\ude80<\/p>\n\n\n\n<p><\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>\ud83d\ude80 Step-by-Step Guide to Integrating Firebase with Graphina Step 1: Create a Page in Elementor Step 2: Add a Chart Widget Step 3: Configure Chart Data Options Step 4: Enable Firebase Configuration Step 5: Set Up Firebase in Google Console Step 6: Import Sample Data into Firebase Step 7: Finalize &amp; Sync Data Enable Realtime [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":367,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[],"class_list":["post-375","post","type-post","status-publish","format-standard","hentry","category-graphina-firebase"],"featured_image_src":null,"author_info":{"display_name":"Iqonic Design","author_link":"https:\/\/documentation.iqonic.design\/graphina\/author\/dwd3f32kd2r2rf23wf4df\/"},"children":[],"_links":{"self":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/375","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/comments?post=375"}],"version-history":[{"count":2,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/375\/revisions"}],"predecessor-version":[{"id":400,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/375\/revisions\/400"}],"up":[{"embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/posts\/367"}],"wp:attachment":[{"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/media?parent=375"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/categories?post=375"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/documentation.iqonic.design\/graphina\/wp-json\/wp\/v2\/tags?post=375"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}