Developed by: CZ.NIC

OGRA library

Example: Chart with various options

Last parameter of method Ogra.graph represents graph options. Options can modify appearance and behavior of your chart. Please visit API Documentation to learn more about possible options.

HTML:

Import OGRA and create element for future chart.

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

<div id="my_chart"></div>

Javascript:

Prepare your data and create chart with various options.

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", data, "column", "high", {width: 600, height: 400, title: "You can change title in chart options.", colors: ['#ff0','#222'], vAxis: {title: "I can be also changed."}, hAxis: {title: "You can also change me.", textStyle: {color: 'red', fontSize: 18}}} );

Result:

Edit in jsFiddle

More examples