Developed by: CZ.NIC

OGRA library

Example: How to use multiple chart libraries

You can use different graphical library for each chart. Please note that not all chart types are supported by each graphical library. For more informations visit API Documentation and take a look at the table of supported chart types for each graphic library.

For best results we recommend you to use Google charts "google" or Highcharts "high".

HTML:

Import OGRA and create elements for future charts. Please note that you don't have to import any more javascript files with graphical libraries.

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

<div id="my_chart_1"></div>
<div id="my_chart_2"></div>
<div id="my_chart_3"></div>
<div id="my_chart_4"></div>

Javascript:

Prepare your data and create chart.

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}]}]};			

Ogra.graph("my_chart_1", data, "line", "google", {} );
Ogra.graph("my_chart_2", data, "line", "high", {} );
Ogra.graph("my_chart_3", data, "line", "dygraphs", {} );
Ogra.graph("my_chart_4", data, "line", "flot", {} );

Result:

Edit in jsFiddle

More examples