This step-by-step tutorial will quickly get you started with Recline basics, including creating a dataset from local data and setting up a grid, graph, map and timeline to display it.
Views display Recline datasets in different ways. This page covers the interesting built-in views. For a full list of views including extensions outside of the Recline.js core, see the list of currently available views.
Preparing your page
Before writing any code with Recline, you need to do the following preparation steps on your page:
Include the relevant CSS in the head section of your document (for view-specific CSS files, see below):
You’re now ready to start working with Recline.
Creating a Dataset
Here’s some example data we are going to work with:
containing keys and values (note that all values here are ‘simple’ but there is
no reason you cannot have objects as values allowing you to nest data.
We can now create a recline Dataset object (and memory backend) from this raw data:
Setting up the Grid
The source code along with all dependencies for the grid part of the tutorial can be found at this GitHub repository. See it in action via GitHub Pages.
Although it's not demonstrated here, you can also use the simpler Grid view without SlickGrid. Source code along with all dependencies for that can be found at this GitHub repository. Demo on GitHub Pages.
Let’s create a data grid view to display the dataset we have just created. We’re going to use the SlickGrid-based grid so we need the following CSS and JS dependencies in addition to those above:
Now, let’s create an HTML element to for the Grid:
Let’s create a graph view to display a line graph for this dataset.
First, add the additional dependencies for this view. These are the Flot
library and the Recline Flot Graph view:
Next, create a new div for the graph:
Now let’s create the graph, we will use the same dataset we had earlier, and we will need to set the view ‘state’ in order to configure the graph with the column to use for the x-axis (“group”) and the columns to use for the series to show (“series”).
State: The concept of a state is a common feature of Recline views being an object
which stores information about the state and configuration of a given view. You
can read more about it in the general Views
documentation as well as the documentation of individual views such as the
For the axis date formatting to work, it is crucial that the date type is set for that field as shown in the code concerning the dataset above. The result is the following graph: