RazorFlow Basic Concepts

This document will cover the basic concepts of RazorFlow PHP Dashboards:

  1. Creating Dashboard
  2. Adding and Configuring Components

Create a new Dashboard

To create a new Dashboard after Installing RazorFlow PHP:

  1. Create a PHP File inside your server’s website root folder, so it can be opened by a browser.

  2. Add the following code in the file

    <?php
    // Set the path to "razorflow.php" which is installed on
    require "/path/to/razorflow.php";
    
    // TODO: Configure Dashboard Here
    
    Dashboard::Render(); // Required.
    
  3. Save this file, and open it in your browser. You should see a blank page.

  4. You can optionally set a title for the dashboard

    <?php
    // Set the path to "razorflow.php" which is installed on
    require "/path/to/razorflow.php";
    
    Dashboard::setTitle("Dashboard Title Here");
    
    // TODO: Configure Dashboard Here
    
    Dashboard::Render(); // Required.
    

Adding a Component

A Dashboard Component is what is displayed to the user - a visual representation of the data that powers the component.

Adding a component

<?php
require "../razorflow.php";

$chart = new ChartComponent();
Dashboard::addComponent($chart);

Dashboard::Render();

To add a component to the dashboard, you need to first, create the component object

$chart = new ChartComponent();

And add it to the dashboard

Dashboard::addComponent($chart);

The chart will say “No data to display” because there isn’t any data specified yet.

Set the caption

You can set the caption of the component using the Component::setCaption function.

Adding a component

<?php
require "../razorflow.php";

$chart = new ChartComponent();
$chart->setCaption("Chart Component");
Dashboard::addComponent($chart);

Dashboard::Render();

Set the height and width

You can set the height and width of the component using Component::setHeight, Component::setWidth or Component::setDimensions. Please see dimensions.rst for a detailed introduction to dimensions.

Adding a component

<?php
require "../razorflow.php";

$chart = new ChartComponent();
$chart->setCaption("Chart Component");
$chart->setHeight(2);
$chart->setWidth(2);
Dashboard::addComponent($chart);

Dashboard::Render();

Configure the component

In order for the component to show any information, you must configure it. You configure the component by calling functions from the Component Object. The configuration of each component varies depending on the type of the component.

In this example, you will simply add two data points using the functions of ChartComponent. Namely:

A detailed overview of the Chart Component’s functionality is available at /contents/components/chart. Similar guides are available for all components.

Adding a component

<?php
require "../razorflow.php";

$chart = new ChartComponent();
$chart->setCaption("Chart Component");
$chart->setHeight(2);
$chart->setWidth(2);
$chart->setStaticLabels("Labels", array("Hello", "World"));
$chart->addStaticSeries("Series", array(4, 3));
Dashboard::addComponent($chart);

Dashboard::Render();

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