Developed by: CZ.NIC

OGRA library

Initialization of OGRA library

First step in using OGRA is to include it into your page by inserting the following code to the head of your HTML:

<script type="text/javascript" src="https://gitlab.labs.nic.cz/labs/ogra/raw/master/ogra.js"></script>

OGRA will automatically import all required third party javascript libraries (e.g.: Google Charts, High Charts, jQuery...) in case it is required for your chart.

OGRA data format

For drawing charts you need to have data in format compatible with OGRA. OGRA uses the Google Charts DataTable format, so if you already have data in this format, you do not need to change anything. Even when you use a graphic library not compatible with DataTable format, you do not have to convert your data - OGRA will do it for you automatically.

For easy generation of data in DataTable format on the server side, we would recommend to use gviz_api.py

Example of data in DataTable format:

<script type="text/javascript">

var data = {"cols":[{"label":"Year", "type":"string"},{"label":"Sales", "type":"number"},
                    {"label":"Expenses", "type":"number"}],
            "rows":[{"c":[{"v":"2004"},{"v":1000},{"v":400}]},
                    {"c":[{"v":"2005"},{"v":1170},{"v":460}]},
                    {"c":[{"v":"2006"},{"v":660},{"v":1120}]},
                    {"c":[{"v":"2007"},{"v":1030},{"v":540}]}]};

</script>

This data will be used in the example below…

Drawing a chart

For drawing a chart you need to call the Ogra.graph method.

1. Initialization of OGRA:

<script type="text/javascript" src="https://gitlab.labs.nic.cz/labs/ogra/raw/master/ogra.js"></script>

2. Create element for future chart:

<div id="elem_id" style="width: 500px; height: 300px;"></div>

3. Create chart:

<script type="text/javascript">

Ogra.graph("elem_id", data, "column", "google", {title: "My chart"});

</script>

Try this example.

Syntax

Ogra.graph(element_id, data, chart_type, used_library, options);

element_id: String: Id of HTML element, where you want to draw a chart.
data: Object (data in DataTable format) / String (URL): Input data for given chart, data can be given as a JS object in DataTable format, or as URL. In case that URL is used, OGRA will try to obtain data from the given URL using AJAX.
chart_type: String: Chart type (example.: "pie", "column", ...) Table of supported types for each graphical library is listed below.
used_library: String: Graphic library which should be used for drawing of chart (example.: "google", "high", ...).
options: Object: Optional parameter for additional setting of the chart. (example.: {title: "Title of chart"} ). Possible options are descriped in chapter below.

Configuration options

List of supported additional parameters.

Take a look at an example of a chart with various options.

Callback and chart reference:

callback: Function: Callback method is called after drawing of chart is complete. First parameter for callback method is reference to the chart that has been just created. Example of usage.
callback_args: Array: Optional list of additional parameters for callback method.

Most often used parameters:

title: String: Title of the chart.
width: Number: Width of the chart element.
height: Number: Height of the chart element.
colors: Array: List of colors, which are used for series.
isStacked: Boolean: By default is set to False. Setting parameter to True causes column chart will display with stacked columns.

For the full list of possible options please visit Google Chart API reference.

Highcharts additional parameters (other libraries will ignore these setting):

lang: Object: Please read more about this parameter at Highcharts API reference.
animation_duration: Number: Duration of startup animation (0 = disabled animations).
credits_text: String: Text displayed on the right bottom corner.
credits_href: String (URL): URL link bound on click to credits_text.

Table of supported chart types for each graphic library

Type of chart:	Google Chart "google"	Highcharts JS "high"	DyGraphs "dygraphs"	Flot "flot"
Line	YES	YES	YES	YES
Column	YES	YES	NO	YES
Bar	YES	YES	NO	NO
Pie	YES	YES	NO	YES
Table	YES	NO	NO	NO
Area	NO	YES	NO	NO

Offline charts

To use OGRA in offline mode, you have to download all required third party libraries import them before initializing OGRA. OGRA is checking the namespaces of required libraries during its initialization. If required names are not defined, OGRA will try to download all required libraries from preset URLs.

You can also overrite these preset URLs. Take a look at an example.

Exceptions

In case of failure during creation of chart, the error message will be displayed on the position of planned chart. Error message contains short problem description.

Take a look at an example with error message.