Developed by: CZ.NIC

OGRA library

Example: The same data displayed with multiple chart types

Line or column chart? Why not both?

HTML:

Import OGRA and create elements for future charts.

<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>
<div id="my_chart_5"></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, "column", "google", {} );
Ogra.graph("my_chart_2", data, "line", "google", {} );
Ogra.graph("my_chart_3", data, "pie", "google", {} );
Ogra.graph("my_chart_4", data, "bar", "google", {} );
Ogra.graph("my_chart_5", data, "table", "google", {} );

Result:

Edit in jsFiddle

More examples