knight/datahub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[tutorial/views][s]: bring the tutorial up to date and switch to slickgrid for the grid.

Browse Source
This commit is contained in:
Rufus Pollock 2012-06-29 20:29:10 +01:00
parent d3c9f30e74
commit 19f14c9507
1 changed files with 50 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
docs/tutorial-views.markdown
View File

@ -40,10 +40,6 @@ Before writing any code with Recline, you need to do the following preparation s
-->
<script type="text/javascript" src="dist/recline.js"></script>{% endhighlight %}
4. Create a div to hold the Recline view(s):
{% highlight html %}
<div id="mygrid"></div>{% endhighlight %}
You're now ready to start working with Recline.
### Creating a Dataset
@ -61,37 +57,62 @@ 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:
{% highlight javascript %}
var dataset = recline.Backend.Memory.createDataset(data);
var dataset = new recline.Model.Dataset({
records: data
});
{% endhighlight %}
Note that behind the scenes Recline will create a Memory backend for this dataset as in Recline every dataset object must have a backend from which it can push and pull data. In the case of in-memory data this is a little artificial since all the data is available locally but this makes more sense for situations where one is connecting to a remote data source (and one which may contain a lot of data).
### Setting up the Grid
Let's create a data grid view to display the dataset we have just created, binding the view to the `<div id="mygrid"></div>` we created earlier:
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:
{% highlight html %}
<link rel="stylesheet" href="css/slickgrid.css">
<!-- vendor -->
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/jquery.event.drag-2.0.min.js"></script>
<script type="text/javascript" src="{{page.root}}vendor/slickgrid/2.0.1/slick.grid.min.js"></script>
<!-- Recline -->
<script type="text/javascript" src="src/view.slickgrid.js"></script>
{% endhighlight %}
Now, let's create an HTML element to for the Grid:
{% highlight html %}
<div id="mygrid" style="height: 400px"></div>
{% endhighlight %}
Now let's set up the Grid:
{% highlight javascript %}
var $el = $('#mygrid');
var grid = new recline.View.Grid({
model: dataset
var grid = new recline.View.SlickGrid({
model: dataset,
el: $el
});
$el.append(grid.el);
grid.visible = true;
grid.render();
{% endhighlight %}
And hey presto:
<div id="mygrid" class="recline-read-only" style="margin-bottom: 30px; margin-top: -20px;">&nbsp;</div>
<div id="mygrid" class="recline-read-only" style="margin-bottom: 30px; height: 200px;">&nbsp;</div>
<script type="text/javascript">
{% include data.js %}
var dataset = recline.Backend.Memory.createDataset(data);
var $el = $('#mygrid');
var grid = new recline.View.Grid({
model: dataset,
var dataset = new recline.Model.Dataset({
records: data
});
$el.append(grid.el);
var $el = $('#mygrid');
var grid = new recline.View.SlickGrid({
model: dataset,
el: $el
});
grid.visible = true;
grid.render();
</script>
@ -107,7 +128,7 @@ library and the Recline Graph view:
<!-- javascript -->
<script type="text/javascript" src="vendor/jquery.flot/0.7/jquery.flot.js"></script>
<script type="text/javascript" src="src/view-graph.js"></script>
<script type="text/javascript" src="src/view.graph.js"></script>
{% endhighlight %}
Next, create a new div for the graph:
@ -116,35 +137,15 @@ Next, create a new div for the graph:
<div id="mygraph"></div>
{% endhighlight %}
Now let's create the graph, we will use the same dataset we had earlier:
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").
{% highlight javascript %}
var $el = $('#mygraph');
var graph = new recline.View.Graph({
model: dataset
});
$el.append(grid.el);
graph.render();
{% endhighlight %}
And ... we have a graph view -- with instructions on how to use the controls to
create a graph -- but no graph. Go ahead and play around with the controls to
create a graph of your choosing:
<div id="mygraph" style="margin-bottom: 30px;">&nbsp;</div>
<script type="text/javascript">
var $el = $('#mygraph');
var graph = new recline.View.Graph({
model: dataset
});
$el.append(graph.el);
graph.render();
</script>
But suppose you wanted to create a graph not a graph editor. This is
straightforward to do -- all we need to do is set the 'state' of the graph
view:
<div class="alert alert-info">
<strong>State</strong>: 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 <a href="../docs/views.html">Views
documentation</a> as well as the documentation of individual views such as the
<a href="../docs/src/view.graph.html">Graph View</a>.
</div>
{% highlight javascript %}
var $el = $('#mygraph');
@ -159,12 +160,12 @@ $el.append(graph.el);
graph.redraw();
{% endhighlight %}
We would get this rendered graph:
The result is the following graph:
<div id="mygraph2" style="margin-bottom: 30px;">&nbsp;</div>
<div id="mygraph" style="margin-bottom: 30px;">&nbsp;</div>
<script type="text/javascript">
var $el = $('#mygraph2');
var $el = $('#mygraph');
var graph = new recline.View.Graph({
model: dataset,
state: {
@ -177,14 +178,6 @@ $el.append(graph.el);
graph.redraw();
</script>
<div class="alert alert-info">
<strong>State</strong>: 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 <a href="../docs/view.html">Views
documentation</a> as well as the documentation of individual views such as the
<a href="../docs/view-graph.html">Graph View</a>.
</div>
### Creating a Map
Now, let's create a map of this dataset using the lon/lat information which is