RazorFlow PHP Quick Start

RazorFlow PHP is a PHP Framework that you can use to build interactive data-driven dashboards which works across PCs, Macs, Tablets and Smartphones. You write a PHP Script using a simple PHP API to configure your dashboard, and RazorFlow PHP will use that script to build a cross-device dashboard using HTML5.

Installation

You can download RazorFlow PHP at razorflow.com/download/

You will need to have an Apache/MySQL/PHP installed. RazorFlow highly recommends XAMPP which is a free download for Windows, Mac OSX, and Linux.

  1. Unzip the downloaded razorflow-php ZIP file to get the rf directory. Copy this directory to your website root (Usually a folder called htdocs or www).
  2. Open install.php in your browser with the correct path to the rf folder in your website root (usually http://localhost/rf/install.php <http://localhost/rf/install.php>)
  3. Follow the instructions in install.php, and run the installation.
  4. Open /rf/demos/index.php in your browser (usually localhost/rf/demos/index.php ) and click on any of the demos.

If you are able to view the demos, RazorFlow PHP is installed correctly. If not, please see the detailed Installing RazorFlow PHP

Zero to Dashboard in 30 minutes

Now that you have RazorFlow PHP installed, it’s time to rock! You will build your first real-world dashboard that works across PCs, Macs, tablets and smartphones. We will build this dashboard for Steve, who’s the CEO of RazorTunes, a popular (fictitious) online music store. He wants to be on top of the following key metrics for his e-commerce store:

  • Top 10 selling genres
  • Top 10 selling artists
  • Top 10 artists in each genre
  • Sales records with ability to filter and sort
  • Key Performance Indicators to track overall store sales, and artist sales

Since Steve is mostly on the move, he wants to be able to view the dashboards on his smartphone as well. So we will build a dashboard for Steve that works on his PC, Mac, tablets and smartphones. Sounds like it can be easily done with two good weeks of work!

“One more thing!”, Steve says with a slight smile, “I need this by tomorrow”. He notices the slight look of worry on your face. He thinks you’re worried about the deadline. While in reality, you’re just worried about how to spend the rest of your day.

Because you’re only going to need 15 minutes.

Step 1: Create a new dashboard file

Creating a file called razortunes.php, with the following code:

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

Dashboard::Render();

Now, open razortunes.php in your browser. You should see a blank screen.

Hint

This tutorial is divided into several steps. After every step (like the one below), there is a screenshot of the dashboard, and the entire code required to build it.

Empty RazorFlow Dashboard

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

Dashboard::Render();

Step 2: Create a DataSource

RazorFlow PHP can show data directly from a database. In this example, we will be using a SQLite database. SQLite is a database with a syntax similar to MySQL but the entire database is stored as a file. The entire SQLite database for this example is already included as part of your RazorFlow PHP Download.

In order for components to work with a database, you need to create a DataSource, which contains information about your Database and Tables. You can learn how to connect to your own databases by reading RazorFlow DataSource.

But for this tutorial, you can get a pre-configured ready to use sample DataSource. To use this, add this code to the file

require "../razorflow.php";

$dataSource = RFUtil::getSampleDataSource();

This creates a variable called $dataSource, which is an object that contains information about how to access the database, and what Tables to read data from, etc.

Create a DataSource

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

$dataSource = RFUtil::getSampleDataSource();

Dashboard::Render();

Step 3: Add a Chart

The first component that we will add to the dashboard is a chart showing the top 5 selling genres. To add a chart component to the dashboard, you use the following code:

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
Dashboard::addComponent($genreSales);

So what’s happening here?

  • First, you’re creating an object called $genreSales, of the class ChartComponent.
  • Next, you’re using the function setCaption setting a caption of the component as “Genre Sales”. The caption is the title of the component which is displayed on the dashboard.
  • Next, you’re using the function setDataSource with the DataSource object $dataSource that you defined earlier in the previous step. This tells the component where to get the chart’s data from.
  • Finally, you call Dashboard::addComponent, and pass the the $genreSales object to the function. This adds the component to the dashboard. If you do not call this function, then your component will not be displayed on the dashboard.

Now, reload your page in the browser. It should show a component, with the caption. But instead of a chart, there’s a note saying “No data to display”! You’ve told the component where to get the data from, but haven’t told it what data to display yet. Let’s do that now.

Add a genre sales chart

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
Dashboard::addComponent($genreSales);

Dashboard::Render();

Step 4: Configure the chart

Now comes the fun part! You will now Configure the chart. You can configure a component by calling functions of the chart component object $genreSales that you just created. So in your case, you will be calling functions on the $genreSales object. Add the following code, right after calling setDataSource and before calling addComponent (those functions are left inside the code sample for reference)

$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

Now let’s take a closer look at what’s happening here.

  • You used the setLabelExpression function to set the Label Expression - which is simply a SQL expression (even a column name is a SQL Expression) which is used to determine the labels. (The Labels in a chart are the names on the X-Axis used to identify the different data points)

    The label expression you set is genre.Name which corresponds to the Name column in the genre table.

  • Then, you use the addSeries function to add a new series to the chart.

    1. The first argument is the name of the series, which is “Sales”.

    2. The second argument is a SQL Expression track.UnitPrice * invoiceline.Quantity. This is an expression that will be used to determine the value.

      It is similar to writing the SQL Query SELECT SUM(track.UnitPrice * invoiceline.Quantity) AS amount ...

    3. The third argument is an array. This array is called Options in RazorFlow. You use options everywhere but right now, don’t worry about them. Options are covered in great detail later on.

  • Now, you use a function called setOption to set the limit option, which controls the number of labels (here - the number of genres) to display in the chart. You’re only interested in the top 10, so you can set the limit option to 10.

Now reload the page, and you should see your first chart showing the data. This chart has aggregated sales data by all the genres and shown you the top 10 Genres. Congratulations! You successfully created your first functional RazorFlow dashboard.

Configure the genre sales chart

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

Dashboard::Render();

Step 5: Create a second chart

Steve also wanted to see what artists are doing best on RazorTunes. So you decide it’s best to show it with another chart.

Just like last time, you create a new ChartComponent object called $artistSales and set the caption and DataSource with setCaption and setDataSource

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
Dashboard::addComponent($artistSales);

Now, reload the page, and you should see the new chart, but it will still say “No Data”. You will configure this chart in the next step.

Create a second chart

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
Dashboard::addComponent($artistSales);

Dashboard::Render();

Step 6: Configure the artist chart

Steve wants to see the top few best selling artists. So we configure it exactly like the previous chart. Except instead of using the Genre Name, we will be using the Artist Name to determine the labels

$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);

While calling setLabelExpression, you set the Label Expression as artist.Name, ensuring that the sales are aggregated for each artist. Afterwards, you’re adding a series to calculate the series, which are sorted from higher to lower (descending order).

Thereafter, you call setOption to set the limit option to 10. Ensuring only the top 10 items are shown.

Configure the artist chart

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);
Dashboard::addComponent($artistSales);

Dashboard::Render();

Step 8: Add a table

Now, you are going to add a table containing all the sales records. Adding a Table Component to a RazorFlow dashboard lets your users dynamically sort on any column, and apply simple but powerful filters right on the table.

To add a table component to your dashboard, add this code:

// Create a table component to show each sale.
$saleTable = new TableComponent();
$saleTable->setCaption("Sales Table");
$saleTable->setWidth(3);
$saleTable->setDataSource($dataSource);
Dashboard::addComponent($saleTable);

Here, you’re creating an object of TableComponent called $saleTable. Similar to the charts that you added earlier, setCaption and setDataSource sets the caption and the data source for this component. There’s a new function here called setWidth, that sets the width to 3 units of RazorFlow width, which is roughly 3/4th of the screen. Using dimensions will be covered in great detail later on.

Add a table

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);
Dashboard::addComponent($artistSales);

// Link the artist chart to artist sales
$genreSales->autoLink($artistSales);

// Create a table component to show each sale.
$saleTable = new TableComponent();
$saleTable->setCaption("Sales Table");
$saleTable->setWidth(3);
$saleTable->setDataSource($dataSource);
Dashboard::addComponent($saleTable);

Dashboard::Render();

Reload the page. You should see a table but it doesn’t have any data. That’s because you still need to tell the table what data to display. Let’s do that now.

Step 9: Configure the table

You will now configure the table to display the sales data. After calling setDataSource, you can add data. To display data, you need to add columns. The rows of data will be determined automatically from your DataSource.

First, add a column for the name of the track

$saleTable->addColumn("Track", "track.Name");

This is fairly straightforward. You’re adding a column which corresponds to a SQL Column. The first parameter to addColumn is the name of the column. The second parameter is the SQL Column name - track.Name.

Similarly, add two more columns, to show the Album name and Sale Date

$saleTable->addColumn("Album", "album.Title");
$saleTable->addColumn("Sale Date", "invoice.InvoiceDate", array(
    'width'=>50
));

Adding the Album column is fairly straightforward. You add the column from the album.Title column in your DataSource. On the other hand, invoice.InvoiceDate is a SQL DATETIME column. But RazorFlow automatically formats the date (and the formatting can be changed of course). You also pass an option array in the third column, and the width option is the width of the column in pixels. Since we know that a date will not be too long, we can safely set the width as 50 pixels.

The last column that you’re going to add is the Amount Column. This column does not get data from a specific column in the database, but instead calculates the result of a SQL expression and displays the data

$saleTable->addColumn("Amount", "track.UnitPrice * invoiceLine.Quantity", array(
    'width'=>50,
    'textAlign'=>'right',
    'numberPrefix'=> '$'
));

Now, for each row in the sales table, the amount is calculated by multiplying the track’s unit price with the quantity of purchases. You’re also passing a few other options:

  1. The width, being set to 50 pixels. This ensures the column is exactly 50 pixels wide, ensuring that the data is always seen and the column is not abnormally long when the screen is large.
  2. The textAlign being set to 'right', which aligns the text to the right side of the column, which is appropriate for any currency to be displayed in a table.
  3. The numberPrefix being set to '$'. Since this is supposed to show monetary value, this will display a ‘$’ before each value.

Configure the table

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);
Dashboard::addComponent($artistSales);

// Link the artist chart to artist sales
$genreSales->autoLink($artistSales);

// Create a table component to show each sale.
$saleTable = new TableComponent();
$saleTable->setCaption("Sales Table");
$saleTable->setWidth(3);
$saleTable->setDataSource($dataSource);
$saleTable->addColumn("Track", "track.Name");
$saleTable->addColumn("Album", "album.Title");
$saleTable->addColumn("Sale Date", "invoice.InvoiceDate", array(
    'width'=>50
));
$saleTable->addColumn("Amount", "track.UnitPrice * invoiceLine.Quantity", array(
    'width'=>50,
    'textAlign'=>'right',
    'numberPrefix'=> '$'
));
Dashboard::addComponent($saleTable);

Dashboard::Render();

Step 11: Add a KPI Component

The next component you’ll add to the dashboard is a Key Performance Indicator, also known as a KPI. KPI Component shows a single but important metric, which needs to be monitored.

The metric we’re going to be measuring is the overall sales of the entire RazorTunes store over the last month! First, create the KPI Component object, an object of the KPIComponent class

// Create a Key Performance Indicators to measure the total sales last month
$saleKPI = new KPIComponent();
$saleKPI->setCaption("Last Month's sales");
$saleKPI->setDataSource($dataSource);
Dashboard::addComponent($saleKPI);

Here, you are setting a caption using setCaption, setting the datasource with setDataSource, and adding it to the dashboard using Dashboard::setComponent.

Add a KPI Component

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);
Dashboard::addComponent($artistSales);

// Link the artist chart to artist sales
$genreSales->autoLink($artistSales);

// Create a table component to show each sale.
$saleTable = new TableComponent();
$saleTable->setCaption("Sales Table");
$saleTable->setWidth(3);
$saleTable->setDataSource($dataSource);
$saleTable->addColumn("Track", "track.Name");
$saleTable->addColumn("Album", "album.Title");
$saleTable->addColumn("Sale Date", "invoice.InvoiceDate", array(
    'width'=>50
));
$saleTable->addColumn("Amount", "track.UnitPrice * invoiceLine.Quantity", array(
    'width'=>50,
    'textAlign'=>'right',
    'numberPrefix'=> '$'
));
Dashboard::addComponent($saleTable);

// Link the artist chart to the sales table
$artistSales->autoLink($saleTable);

// Create a Key Performance Indicators to measure the total sales last month
$saleKPI = new KPIComponent();
$saleKPI->setCaption("Last Month's sales");
$saleKPI->setDataSource($dataSource);
Dashboard::addComponent($saleKPI);

Dashboard::Render();

Once you reload the page, you’ll see that there’s a new component, but instead of any number, the KPI component says “unset”. We’ll set the value in the next step.

Step 12: Configure the KPI Component

The RazorTunes database has a list of individual sales records as rows in a database. Each sales record has information like time, sales amounts etc. You are interested in showing the sum of sale for current month.

Configuring a KPI Component right now requires two things:

  1. A Value Expression - an expression which is used to determine the value of a single sales record
  2. A Timestamp Expression - an expression used to determine the timestamp of the sales record

Set the Value Expression using setValueExpression the Timestamp Expression using setTimestampExpression

$saleKPI->setValueExpression("track.UnitPrice * invoiceLine.Quantity", array(
    'aggregate' => true,
    'aggregateFunction' => "SUM",
    'numberPrefix' => '$'
));
$saleKPI->setTimestampExpression("invoice.InvoiceDate", array(
    'timeUnit' =>'month'
));

The value expression is a product of the price of the track (track.UnitPrice) and the quantity of the track purchased (invoiceLine.Quantity). You are also setting some additional options in the Options Array:

  1. 'aggregate'=>true - Which ensures that the KPI is aggregated
  2. 'aggregateFunction'=>"SUM" - While aggregating the items, add them together (you can also use “AVG” to get the average value of a sales record)
  3. 'numberPrefix'=>'$' - since this value is a monetary value, prefix the value with '$'

While setting the Timestamp Expression, the first parameter is the column of the timestamp, and the second parameter is an options array which sets the time unit. The timeUnit option is the length of the time period in which to aggregate. It can be month, year, day, minute, etc.

Now reload the dashboard in the browser, and you should see the sales for the last month!

Configure the KPI component

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);
Dashboard::addComponent($artistSales);

// Link the artist chart to artist sales
$genreSales->autoLink($artistSales);

// Create a table component to show each sale.
$saleTable = new TableComponent();
$saleTable->setCaption("Sales Table");
$saleTable->setWidth(3);
$saleTable->setDataSource($dataSource);
$saleTable->addColumn("Track", "track.Name");
$saleTable->addColumn("Album", "album.Title");
$saleTable->addColumn("Sale Date", "invoice.InvoiceDate", array(
    'width'=>50
));
$saleTable->addColumn("Amount", "track.UnitPrice * invoiceLine.Quantity", array(
    'width'=>50,
    'textAlign'=>'right',
    'numberPrefix'=> '$'
));
Dashboard::addComponent($saleTable);

// Link the artist chart to the sales table
$artistSales->autoLink($saleTable);

// Create a Key Performance Indicators to measure the total sales last month
$saleKPI = new KPIComponent();
$saleKPI->setCaption("Last Month's sales");
$saleKPI->setDataSource($dataSource);
$saleKPI->setValueExpression("track.UnitPrice * invoiceLine.Quantity", array(
    'aggregate' => true,
    'aggregateFunction' => "SUM",
    'numberPrefix' => '$'
));
$saleKPI->setTimestampExpression("invoice.InvoiceDate", array(
    'timeUnit' =>'month'
));
Dashboard::addComponent($saleKPI);

Dashboard::Render();

Step 14: Add a Gauge Component

Now, you’ll add a gauge component to show the number of songs an artist has sold in this year

$yearlySalesGauge = new GaugeComponent();
$yearlySalesGauge->setCaption("This Year's sales");
$yearlySalesGauge->setPlaceholder("Please select an artist");
$yearlySalesGauge->setDataSource($dataSource);
Dashboard::addComponent($yearlySalesGauge);

Just like before, use setCaption, setDataSource to set the caption and the DataSource of the component. We also use Dashboard::addComponent to add this component to the dashboard.

However, there’s a new function, setPlaceholder, which is known as the Placeholder Message. This is the message that will be displayed for a component which needs an interaction to make it work.

For example, in this case, It’s yearly sales for a specific artist. However, when no artist is selected, it will not display any data. It will display the placeholder message instead.

The next step is to configure this component.

Add a guage component

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);
Dashboard::addComponent($artistSales);

// Link the artist chart to artist sales
$genreSales->autoLink($artistSales);

// Create a table component to show each sale.
$saleTable = new TableComponent();
$saleTable->setCaption("Sales Table");
$saleTable->setWidth(3);
$saleTable->setDataSource($dataSource);
$saleTable->addColumn("Track", "track.Name");
$saleTable->addColumn("Album", "album.Title");
$saleTable->addColumn("Sale Date", "invoice.InvoiceDate", array(
    'width'=>50
));
$saleTable->addColumn("Amount", "track.UnitPrice * invoiceLine.Quantity", array(
    'width'=>50,
    'textAlign'=>'right',
    'numberPrefix'=> '$'
));
Dashboard::addComponent($saleTable);

// Link the artist chart to the sales table
$artistSales->autoLink($saleTable);

// Create a Key Performance Indicators to measure the total sales last month
$saleKPI = new KPIComponent();
$saleKPI->setCaption("Last Month's sales");
$saleKPI->setDataSource($dataSource);
$saleKPI->setValueExpression("track.UnitPrice * invoiceLine.Quantity", array(
    'aggregate' => true,
    'aggregateFunction' => "SUM",
    'numberPrefix' => '$'
));
$saleKPI->setTimestampExpression("invoice.InvoiceDate", array(
    'timeUnit' =>'month'
));
Dashboard::addComponent($saleKPI);

// Link the artist chart to sales KPI
$artistSales->autoLink($saleKPI);

$yearlySalesGauge = new GaugeComponent();
$yearlySalesGauge->setCaption("This Year's sales");
$yearlySalesGauge->setPlaceholder("Please select an artist");
$yearlySalesGauge->setDataSource($dataSource);
Dashboard::addComponent($yearlySalesGauge);

Dashboard::Render();

Step 15: Configure the Gauge Component

The Gauge Component configuration is similar to the KPI Component configuration. You have to set a Value Expression and a Timestamp Expression

$yearlySalesGauge->setValueExpression("invoiceLine.Quantity", array(
    'aggregate' => true,
    'aggregateFunction' => "SUM"
));
$yearlySalesGauge->setTimestampExpression("invoice.InvoiceDate", array(
    'timeUnit' => 'year'
));

Optionally, you can set the Key Points - these points are marked, and the regions between them are color coded to quickly identify how good the sales are doing

$yearlySalesGauge->setKeyPoints(array(5, 10, 20, 30));

The key points are 5, 10, 20, 30. So there will be ranges from 5-10, 10-20, 20-30).

Since this component has a Placeholder Message, “Please select an artist”, it still won’t display a gauge until an artist is selected. So you need to autoLink the $artistSales component to the $yearlySalesGauge component.

Configure the gauge component

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

$dataSource = RFUtil::getSampleDataSource();

// Create a chart to show aggregated sales by genre
$genreSales = new ChartComponent();
$genreSales->setCaption ("Genre Sales");
$genreSales->setDataSource($dataSource);
$genreSales->setLabelExpression("Genre", "genre.Name");
$genreSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$genreSales->setOption('limit', 10);
Dashboard::addComponent($genreSales);

// Create a chart to show aggregated sales by artist
$artistSales = new ChartComponent();
$artistSales->setCaption("Artist Sales");
$artistSales->setDataSource($dataSource);
$artistSales->setLabelExpression("Artist", "artist.Name");
$artistSales->addSeries("Sales", "track.UnitPrice * invoiceline.Quantity", array(
    'sort' => "DESC"
));
$artistSales->setOption('limit', 10);
Dashboard::addComponent($artistSales);

// Link the artist chart to artist sales
$genreSales->autoLink($artistSales);

// Create a table component to show each sale.
$saleTable = new TableComponent();
$saleTable->setCaption("Sales Table");
$saleTable->setWidth(3);
$saleTable->setDataSource($dataSource);
$saleTable->addColumn("Track", "track.Name");
$saleTable->addColumn("Album", "album.Title");
$saleTable->addColumn("Sale Date", "invoice.InvoiceDate", array(
    'width'=>50
));
$saleTable->addColumn("Amount", "track.UnitPrice * invoiceLine.Quantity", array(
    'width'=>50,
    'textAlign'=>'right',
    'numberPrefix'=> '$'
));
Dashboard::addComponent($saleTable);

// Link the artist chart to the sales table
$artistSales->autoLink($saleTable);

// Create a Key Performance Indicators to measure the total sales last month
$saleKPI = new KPIComponent();
$saleKPI->setCaption("Last Month's sales");
$saleKPI->setDataSource($dataSource);
$saleKPI->setValueExpression("track.UnitPrice * invoiceLine.Quantity", array(
    'aggregate' => true,
    'aggregateFunction' => "SUM",
    'numberPrefix' => '$'
));
$saleKPI->setTimestampExpression("invoice.InvoiceDate", array(
    'timeUnit' =>'month'
));
Dashboard::addComponent($saleKPI);

// Link the artist chart to sales KPI
$artistSales->autoLink($saleKPI);

$yearlySalesGauge = new GaugeComponent();
$yearlySalesGauge->setCaption("This Year's sales");
$yearlySalesGauge->setPlaceholder("Please select an artist");
$yearlySalesGauge->setDataSource($dataSource);
$yearlySalesGauge->setValueExpression("invoiceLine.Quantity", array(
    'aggregate' => true,
    'aggregateFunction' => "SUM"
));
$yearlySalesGauge->setTimestampExpression("invoice.InvoiceDate", array(
    'timeUnit' => 'year'
));
$yearlySalesGauge->setKeyPoints(array(5, 10, 20, 30));
Dashboard::addComponent($yearlySalesGauge);

// Link the artist chart to the yearly sales gauge
$artistSales->autoLink($yearlySalesGauge);

Dashboard::Render();

Finished!

Congratulations! You have successfully built your first dashboard. Try opening it on a mobile device and see how it works!

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