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 evaluation 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 3:

Open dashboard_quickstart > index.html 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 StandaloneDashboard function sets up a dashboard which takes up the entire page, and is fully optimized. This also gives you a variable called db which is the main dashboard Object which is used to add components to dashboards or perform other high-level operations.

Now, add component and component attributes.


StandaloneDashboard(function(db) {
db.setDashboardTitle ("My Dashboard");

// Configure your dashboard here.
}


StandaloneDashboard(function(db) {
var chart = new ChartComponent("My Dashboard");
db.addComponent (chart);
}

var 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.


StandaloneDashboard(function(db) {
var chart = new ChartComponent("My Dashboard");
chart.setCaption("Sales");
chart.setDimensions (6, 6); 
chart.setLabels (["2013", "2014", "2015"]);
chart.addSeries ([3151, 1121, 4982]);
db.addComponent (chart);
}

chart.setCaption ("Sales"); chart.setLabels (["2013", "2014", "2015"); chart.addSeries ([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

StandaloneDashboard(function(db) {
var chart = new ChartComponent("My Dashboard");
chart.setCaption("Sales");
chart.setDimensions (6, 6); 
chart.setLabels (["2013", "2014", "2015"]);
chart.addSeries ([3151, 1121, 4982]);
db.addComponent (chart);
}

You're passing a separate parameter to the addSeries function. This is a regular JavaScript Object/Dictionary. 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.


StandaloneDashboard(function(db) {
var chart = new ChartComponent("My Dashboard");
chart.setCaption("Sales");
chart.setDimensions (6, 6); 
chart.setLabels (["2013", "2014", "2015"]);
chart.addSeries ([3151, 1121, 4982]);
db.addComponent (chart);
}

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


StandaloneDashboard(function(db) {
var chart = new ChartComponent("My Dashboard");
chart.setCaption("Sales");
chart.setDimensions (6, 6); 
chart.setLabels (["2013", "2014", "2015"]);
chart.addSeries ([3151, 1121, 4982]);
chart.addSeries ([3151, 1121, 4982], {
numberPrefix: "$",
seriesDisplayType: "line"
});
db.addComponent (chart);
}

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

Create an empty dashboard

StandaloneDashboard (function (db) {

Dashboard object

StandaloneDashboard (function (db) {

Component object

var chart = new ChartComponent ();

Component class

var chart = new ChartComponent ();

Component function

chart.setLabels (["2013", "2014", "2015");

Options object

numberPrefix: "$",
seriesDisplayType: "line"

Add a component to the dashboard

db.addComponent (chart);

Next Steps:

Get data from a server

Use different techniques including AJAX to fetch the right data from your server and display it on your dashboard.

Integrate with an existing application

Embed the dashboard and integrate it with your application to make it feel like your existing application.

Interactivity

Make the dashboard interactive and fun for your users to use.