Embedding Self-Service BI in React Apps with Node.js

In today’s data-driven world, integrating dashboards and analytics capabilities directly within SaaS applications is a must. There are many benefits to embedding analytics, including quicker time to market, increased productivity and performance, and growth of profits.  

Embedding analytics into your React applications brings relevant and timely insights right within your user’s workflow, promoting a data-driven culture and encouraging more analytical thinking.  

As an embedded analytics solution, Reveal can help you achieve that.  

Reveal helps you to easily and quickly embed interactive dashboards and reports in your React applications with analytics features like in-context editing, data blending, dashboard linking, calculated fields, and much more. 

In this article, we’ll go through how you can implement Reveal in your React-based apps with Node.js.  

Get Your FREE PDF Copy

Fill out the form to get access.

Sorry, it seems that we have run into an issue with the form. Please try again in a few minutes. If you still experience issues, please contact us at support@revealbi.io to notify us of the issue.

Required

Unfortunately, Google has considered you a bot. Please feel free to contact support@revealbi.io to obtain the asset you were looking for or choose to schedule a demo of our products.

Please accept the form terms to submit successfully.

This email address doesn't appear valid. Please update and try again.

Please use a business email address.

Country

Business Email

First Name

Last Name

I understand and agree to the terms of Infragisitcs' Terms of Use and Privacy Policy

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Use apply.

Download PDF

Your PDF is downloading!

Enjoy reading and learning.

Why Should You Embed BI in Your React Apps?

No matter the purpose of your React app, embedded analytics capabilities will provide you with tremendous opportunities to streamline workflows, manage resources and optimize performance. BI tools such as graphs, charts, and dashboards also have the ability to improve data literacy across an organization. Data literacy, which is the ability to read, understand, create, and communicate data as information further helps users make better and smarter decisions. Data-driven decision-making is very important as it is based on facts rather than guesses and gut feelings. With access to analytics, everyone can make more intelligent decisions confidently and at the moment of impact. 

Embedding Analytics in Your Reveal React Apps with Node.js

Reveal embedded analytics helps you easily embed interactive reports, dashboards, and more into your React apps. With features like machine learning, dashboard linking, statistical functions, calculated fields, rich data analysis, self-service, white-labeling, data blending, and more, Reveal can add a huge value to any React-based application. 

More so, integrating BI into your React apps is very easy with Reveal’s native SDK, allowing you to embed analytics into your applications with no added requirements. Reveal’s flexible architecture and rich APIs give you control of the features in your app, making it a seamless part of the user experience. 

So, let’s go ahead and embed analytics in your React app with the Reveal SDK.  

In this tutorial, we’ll be using a Node.js server.  

*We have a Node.js server already. To learn how to create one for yourself, check out this step-by-step tutorial on how to set up the Reveal SDK server with Node.js.  

1. Add the necessary script references to index.html 

<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet" type="text/css">       

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 
<script src="https://unpkg.com/dayjs@1.8.21/dayjs.min.js"></script> 
<script src="https://cdn.quilljs.com/1.3.6/quill.min.js"></script> 
<script src="https://dl.revealbi.io/reveal/libs/1.3.1/infragistics.reveal.js"></script>

2. Add a <div> in app.tsx which will be used to render the RevealView  

function App() { 

  return ( 

    <div id="revealView" style={{height: "100vh", width: "100%"}}></div> 

  ); 

}

3. Initialize the RevealView object in the app.tsx and load a Dashboard 

useEffect(() => {     

    $.ig.RVDashboard.loadDashboard(dashboardId).then((dashboard: any) => { 

      var revealView = new $.ig.RevealView("#revealView"); 

      revealView.dashboard = dashboard; 

    }); 

  }, [dashboardId]);

In just 3 easy steps, you have the basics of loading a dashboard in Reveal.  For the full tutorial, watch this video with our Sr. VP of Developer Tools, Jason Beres, walk you through step-by-step on loading and retrieving dashboards from a React app.  

Make sure to watch our other videos, on our YouTube channel, for more in-depth information on embedded analytics and business intelligence and the importance of data for businesses. We are covering topics like embedding analytics in Angular, Blazor, and JavaScript HTML apps, how to create an embedded BI dashboard, and more. Don’t forget to subscribe so you don’t miss any future videos from our experts.  

And if you’re trying to embed analytics in your Reveal React apps with Node.js but are facing any issues on your way, get in touch with our product team via our Discord channel.  

You can also learn more about Reveal and how it works by scheduling a free product tour. Alternatively, you can also download our SDK to try it yourself.