Morris chart with dynamic data in XPages

gistfile1.xml

<?xml version="1.0" encoding="UTF-8"?>
<xp:view
	xmlns:xp="http://www.ibm.com/xsp/core"
	xmlns:unp="http://unplugged.teamstudio.com"
	xmlns:xc="http://www.ibm.com/xsp/custom">
	
	<xp:this.beforePageLoad><![CDATA[#{javascript://generate the data set here: you could loop through a view for example

var chartData = [];
var year = 2006;
var a = 100; 
var b = 90;

for (var i=1; i<=6; i++) {


	chartData.push( {y : year + '', a : a, b : b});
	
	year++;
	a -= 10;
	b -= 10;
}

viewScope.put("chartData", toJson(chartData));
}]]></xp:this.beforePageLoad>

	<xc:commonheader></xc:commonheader>
	
	<div
		id="main"
		class="container bootcards-container">
		<div class="row">
			<div class="bootcards-cards fullheightrow">
			
				<div class="col-xs-6 col-sm-6 col-md-6">
				
					<div id="bar-example"></div>
					
				</div>

			</div>
		</div>
	</div>

	<script
		src="unp/raphael.min.js"
		type="text/javascript">
	</script>
	<script
		src="unp/morris.min.js"
		type="text/javascript">
	</script>
	
	<xp:scriptBlock id="scriptBlock1">
		<xp:this.value><![CDATA[
Morris.Bar({
  element: 'bar-example',
  data: #{viewScope.chartData},
  xkey: 'y',
  ykeys: ['a', 'b'],
  labels: ['Series A', 'Series B']
});]]></xp:this.value>
	</xp:scriptBlock>

	<xc:commonfooter></xc:commonfooter>
</xp:view>