Getting started with RazorFlow

What is a dashboard?

A dashboard is an easy-to-read collection of visual data showing current metrics, and other relevant information often used to make decisions.

Parts of a dashboard

In RazorFlow, you build dashboards that are comprised of multiple components.

This is a component
This is a component
This is a component
This is a component
This is a component

Each component has a specific type of data and is used to show some specific information. Here are a few examples of components that you can include using this framework:

Form Component

Table Component

Chart Component

and, many more...


Components are laid out in a grid layout and RazorFlow automatically adjusts the layout based on the device. You can also take full control if you need it.

Installing and creating your first dashboard
Step 1:

Visit https://www.razorflow.com/download to download RazorFlow Framework files to your computer. It is a free, fully-functional version.

Step 2:

Extract this file, and open the directory that got extracted. You will find the following files.

Note: There are many ways to create a dashboard, but when you're getting started, we recommend you use the dashboard_quickstart folder, which is described here. All other techniques are described in detail in the documentation.

Step 4:

Copy dashboard_quickstart to your PHP Webserver, like XAMPP, and open dashboard_quickstart/index.php in your browser.

Step 4: Explanation of dashboard_app.js

Copy dashboard_quickstart folder to some other folder in your computer. You can also rename it if you want. Open dashboard_quickstart > js > dashboard_app.js

Step 5:

The buildDashboard function sets up a dashboard which takes up the entire page, and is fully optimized. This inherits from StandaloneDashboard and $this is called the main dashboard Object which is used to add components to dashboards or perform other high-level operations.

Now, add component and component attributes.


  public function buildDashboard(){
    // Add your components here
  }

public function buildDashboard(){
  $chart = new ChartComponent();
  $this->addComponent ($chart);
}

$chart = new ChartComponent ();

This creates a variable called $chart , which is a Component Object. This object is used to control the parameters, behaviour and interactivity of a single chart component on the dashboard.


public function buildDashboard(){
  $chart = new ChartComponent();
  $chart->setCaption("Sales");
  $chart->setDimensions (6, 6); 
  $chart->setLabels (array("2013", "2014", "2015"));
  $chart->addSeries (array(3151, 1121, 4982));
}

$chart->setCaption ("Sales"); $chart->setLabels (array("2013", "2014", "2015")); $chart->addSeries (array(3151, 1121, 4982));

These three lines call 3 different functions on the $chart variable (which is the component object).

This does things like setting caption, and chart labels and data. Don't worry about the specifics we'll go into detail in a later article.

With the above few lines of code, you will create a Column Chart component like shown in the figure here:

Customizing with parameters

public function buildDashboard(){
  $chart = new ChartComponent();
  $chart->setCaption("Sales");
  $chart->setDimensions (6, 6); 
  $chart->setLabels (array("2013", "2014", "2015"));
  $chart->addSeries (array(3151, 1121, 4982), array(
    'numberPrefix' => "$",
    'seriesDisplayType' => "line"
  ));
}

You're passing a separate parameter to the addSeries function. This is a regular PHP Array. A lot of functions in RazorFlow take a parameter like this, and it's called the Options Object.

That's because it allows you to fine-tune some aspects of the component which are optional, and helps the dashboard work better and make more sense.


public function buildDashboard(){
  $chart = new ChartComponent();
  $chart->setCaption("Sales");
  $chart->setDimensions (6, 6); 
  $chart->setLabels (array("2013", "2014", "2015"));
  $chart->addSeries (array(3151, 1121, 4982), array(
    'numberPrefix' => "$",
    'seriesDisplayType' => "line"
  ));
}

Here, we're setting the numberPrefix to $ , this means that every number will have a $ before it indicating that it's currency. Also, the chart will be display as a line chart allowing the user to better spot trends in the data changing.

With the above few lines of code, you will create a
Line Chart component like shown in the figure here:

Recap of core concepts


public function buildDashboard(){
  $chart = new ChartComponent();
  $chart->setCaption("Sales");
  $chart->setDimensions (6, 6); 
  $chart->setLabels (array("2013", "2014", "2015"));
  $chart->addSeries (array(3151, 1121, 4982), array(
    'numberPrefix' => "$",
    'seriesDisplayType' => "line"
  ));
}

Lastly, let’s summarize the concepts that we learnt so far: