- Added tutorial section about odometer charts

5 files changed, 100 insertions, 0 deletions

diff --git a/docs/img/tutorial_custom_odometer_chart.svg.png b/docs/img/tutorial_custom_odometer_chart.svg.png
new file mode 100644
index 0000000..4549689
--- /dev/null
+++ b/docs/img/tutorial_custom_odometer_chart.svg.png
diff --git a/docs/img/tutorial_odometer_chart.svg.png b/docs/img/tutorial_odometer_chart.svg.png
new file mode 100644
index 0000000..17120c6
--- /dev/null
+++ b/docs/img/tutorial_odometer_chart.svg.png
diff --git a/docs/tutorial.txt b/docs/tutorial.txt
index c1e28fa..2e25d15 100644
--- a/docs/tutorial.txt
+++ b/docs/tutorial.txt
@@ -290,6 +290,54 @@ The resulting radar chart shows how minor steps on the rotation axis are drawn
 as grayed out axis and major steps as regular axis. It also obvious that all
 types of data sets can be drawn using radar charts.
 
+Odometer charts
+---------------
+
+Odometer charts can display values on one bar with a gradient using markers, to
+offer a nice way for the viewer to detect where a value is in a defined
+bounding.
+
+.. include:: tutorial/tutorial_odometer_chart.php
+   :literal:
+
+As you can see from the example, the odometer basically behaves like other
+chart types. First we create an object of the class ezcGraphOdometerChart, then
+a title and a dataset is assigned, like always. Similar to pie charts, a
+odometer only accepts one dataset. A legend does not exist for odometers - and
+you may of course assign an array data set, which only contains one element.
+
+.. image:: img/tutorial_odometer_chart.svg.png
+   :alt:   Simple odometer
+
+The result is a bar, filled with some default gradient, and markers as
+indicators for the values on the bar. The axis span is automatically calculated
+for the provided values - you may modify them as usual, but take a look at the
+next example for this.
+
+Custom odometer chart
+~~~~~~~~~~~~~~~~~~~~~
+
+When only using one value in an odometer you may want to configure the span on
+the axis by yourself. You can do so like on any other axis.
+
+.. include:: tutorial/tutorial_custom_odometer_chart.php
+   :literal:
+
+In this example we only assign one value, so we only get one marker in the
+odometer. The we start using the configure options for odometers, defined in
+the ezcGraphOdometerChartOptions class.
+
+The start and end color define the colors used for the background gradient. The
+border options define the border, which is drawn around the chart gradient.
+After this you may configure the width of the markers, and the space, which is
+used for the actual odometer.
+
+Because of the single value we configure the min and max values for the axis,
+which should be used, and a label for the axis.
+
+.. image:: img/tutorial_custom_odometer_chart.svg.png
+   :alt:   Customly configured odometer 
+
 Palettes
 ========
 
diff --git a/docs/tutorial/tutorial_custom_odometer_chart.php b/docs/tutorial/tutorial_custom_odometer_chart.php
new file mode 100644
index 0000000..cb0a654
--- /dev/null
+++ b/docs/tutorial/tutorial_custom_odometer_chart.php
@@ -0,0 +1,36 @@
+<?php
+
+require_once 'tutorial_autoload.php';
+
+$graph = new ezcGraphOdometerChart();
+$graph->title = 'Custom odometer';
+
+$graph->data['data'] = new ezcGraphArrayDataSet(
+    array( 87 )
+);
+
+// Set the marker color
+$graph->data['data']->color[0]  = '#A0000055';
+
+// Set colors for the background gradient
+$graph->options->startColor     = '#2E3436';
+$graph->options->endColor       = '#EEEEEC';
+
+// Define a border for the odometer
+$graph->options->borderWidth    = 2;
+$graph->options->borderColor    = '#BABDB6';
+
+// Set marker width
+$graph->options->markerWidth    = 5;
+
+// Set space, which the odometer may consume
+$graph->options->odometerHeight = .7;
+
+// Set axis span and label
+$graph->axis->min               = 0;
+$graph->axis->max               = 100;
+$graph->axis->label             = 'Coverage  ';
+
+$graph->render( 400, 150, 'tutorial_custom_odometer_chart.svg' );
+
+?>
diff --git a/docs/tutorial/tutorial_odometer_chart.php b/docs/tutorial/tutorial_odometer_chart.php
new file mode 100644
index 0000000..c127811
--- /dev/null
+++ b/docs/tutorial/tutorial_odometer_chart.php
@@ -0,0 +1,16 @@
+<?php
+
+require_once 'tutorial_autoload.php';
+
+$graph = new ezcGraphOdometerChart();
+$graph->title = 'Sample odometer';
+
+$graph->options->font->maxFontSize = 12;
+
+$graph->data['data'] = new ezcGraphArrayDataSet(
+    array( 1, 3, 9 )
+);
+
+$graph->render( 400, 150, 'tutorial_odometer_chart.svg' );
+
+?>