Developed by: CZ.NIC

Latest version: OGRA Git repository

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=""></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

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"}],


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=""></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"});


Try this example.


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"

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.


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.


© 2013 CZ.NIC