diff --git a/docs/tutorial-views.markdown b/docs/tutorial-views.markdown
index 108e9f92..f4c17857 100644
--- a/docs/tutorial-views.markdown
+++ b/docs/tutorial-views.markdown
@@ -37,7 +37,7 @@ Before writing any code with Recline, you need to do the following preparation s
{% endhighlight %}
@@ -62,11 +62,16 @@ We can now create a recline Dataset object (and memory backend) from this raw da
var dataset = new recline.Model.Dataset({
records: data
});
-{% endhighlight %}
+//Depending on the view, it may be important to set the date type
+dataset.fields.models[1].attributes.type = 'date';
+{% endhighlight %}
### Setting up the Grid
+
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:
@@ -81,7 +86,7 @@ Let's create a data grid view to display the dataset we have just created. We'r
-
+
{% endhighlight %}
@@ -123,6 +128,10 @@ grid.render();
### Creating a Graph
+
+
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
@@ -140,6 +149,8 @@ library and the Recline Flot Graph view:
+
+
{% endhighlight %}
@@ -164,8 +175,9 @@ var $el = $('#mygraph');
var graph = new recline.View.Graph({
model: dataset,
state: {
+ graphType: "lines-and-points",
group: "date",
- series: ["x", "z"]
+ series: ["y", "z"]
}
});
$el.append(graph.el);
@@ -173,17 +185,18 @@ graph.render();
graph.redraw();
{% endhighlight %}
-The result is the following graph:
+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: