Embedding a Dashboard using the RazorFlow jQuery Plugin

Introduction: You can use RazorFlow Dashboards like a component inside your existing Web Application to display an interactive Dashboard.

RazorFlow PHP displays your Dashboard in a separate web page by default. However, you may often want to embed this dashboard as part of another web application or a page. This allows you to control the UI around the dashboard as per your requirements, but use RazorFlow to power the dashboard.

You can do this with the RazorFlow jQuery Plugin, and render the entire dashboard within a single div element in your existing page. This avoids using an iframe (see Disadvantages of using an iframe) and provides your users a seamless experience.

You can find razorflow.jquery.js in the rf/ directory (where you extracted RazorFlow PHP)

Quick Start

Here is an example of how to load an existing RazorFlow dashboard (contained in dashboard.php), in your page

<html>
  <head>
    <title>RazorFlow Embedded Dashboard</title>
    <script src="jquery.js" type="text/javascript"></script>
    <script src="razorflow.jquery.js" type="text/javascript"></script>

    <script type='text/javascript'>
      $(document).ready(function(){
        $("#dashboardTarget").razorflow({
          url: '/path/to/your/dashboard.php'
        });
      });
    </script>
  </head>
  <body>
    <h2>Sales Dashboard</h2>
    <div id="dashboardTarget"></div>
  </body>
</html>

We have:

# Included the RazorFlow jQuery plugin - razorflow.jquery.js # Created a div with the id dashboardTarget, which will serve as the container for the dashboard. # Selected the dashboardTarget div using jQuery id Selector and executed the razorflow function on it, and passed the url of your dashboard.

Using of the jQuery plugin

Step 1: Include jQuery on the page where you wish to embed your dashboard (skip this step if you already have jQuery)

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Step 2: Include razorflow.jquery.js. This file is found in the directory where you installed RazorFlow PHP (by default in the rf directory)

<script type="text/javascript" src="/path/to/rf/razorflow.jquery.js"></script>

Step 3: Create a <div> with an id at the location in your page where you want to embed the dashboard (This id can be anything, we’re using dashboardTarget)

<div id='dashboardTarget'></div>

This div’s contents will be cleared so please ensure that it is empty

Step 4: Use the RazorFlow JavaScript plugin, and pass an object containing the URL where the dashboard is available.

$("#dashboardTarget").razorflow({
    url: "/mydashboards/kpi_dashboard.php"
});

Note

Note: Please ensure that the DOM is loaded using a function like jQueryready before using the jQuery plugin.

Configuring dimensions of embedded Dashboard

You can configure the dimensions of the embedded dashboard to suit your web page. You can specify the height and width while the dashboard is being created.

$("#dashboardTarget").razorflow({
    url: "/mydashboards/kpi_dashboard.php",
    height: 800, // 800 pixels
    width: 600 // 600 pixels
});

Adjusting width

If you want to adjust the width of the embedded dashboard after it has been displayed, you can use the setWidth function.

For example, if you want to change the width of the dashboard in the “myDashboardTarget” div. You want to set it to 700 pixels.

$("#myDashboardTarget").data('razorflow').setWidth(700);

Adjusting the height

Similarly, you can use the setHeight function to adjust the height. To change the height of the dashboard to 500 pixels

$("#myDashboardTarget").data('razorflow').setHeight(500);

Cross-domain restrictions

Since RazorFlow uses client-side JavaScript to embed the dashboards, the cross-domain security policies of the browser come into effect. Hence, you can load only dashboards that are present in the same domain and sub-domain. Additionally, RazorFlow must also be installed on the same domain/sub-domain as the page that is embedding the dashboard.

For the sake of explanation, let us assume:

  • Your website root is at C:\htdocs\yourwebsite (On other platforms, it may be /var/www/yourwebsite, etc)
  • You have installed RazorFlow in C:\htdocs\yourwebsite\yourdashboard\rf\
  • You have built a dashboard salesdashboard.php, which is access through your website as yoursite.com/yourdashboard/salesdashboard.php
  • You have an HTML page at C:\htdocs\yourwebsite\yourpage\page.html
  • You access the page from: yoursite.com/yourpage/page.html.

Then, you will be able to embed RazorFlow using the jQuery plugin.

However:

  • If your dashboard is available at d``ashboards.yoursite.com/db/sales_dashboard.php``, then you will not be able to use jQuery plugin to embed your Dashboard (Different sub-domains are treated by your browser at different domains)

Frequently Asked Questions

Why not use an IFrame?

  • It consumes more resources for your user and slows down the page.
  • Filter windows cannot be dragged outside an iframe, which be confusing for your users.

Can I have multiple Dashboards on a single page?

  • Currently, it is not possible to have multiple Dashboards on a single page. This issue will be fixed in the near future.

Start building interactive, mobile-friendly Dashboards in PHP. See DemosDownload