Grafer med Dojo

20659789_sMed Dojo kan du nemt laver grafer på din XPage. Dvs. det har dog voldt mig nogle problemer i det mange af de eksempler jeg fandt på nettet ikke umiddelbart virkede i XPages. Så hermed et simpelt lille eksempel med ‘hardcodet’ data som der virker – og nederst et par links til en god Dojo graf guide.

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" dojoParseOnLoad="true" dojoTheme="true">
	<xp:this.resources>
		<xp:dojoModule name="dojox.charting.Chart2D"></xp:dojoModule>
		<xp:dojoModule name="dojox.charting.themes.Claro"></xp:dojoModule>
	</xp:this.resources>
	<h1>Nice graph</h1>
	<xp:scriptBlock>
		<xp:this.value>
		var chartData = [
			{y: 1978, text: "Blue Widget"},
			{y: 1669, text: "Brown Widget"},
			{y: 2017, text: "Green Widget"},
			{y: 1545, text: "Purple Widget"},
			{y: 339, text: "Red Widget"},
			{y: 1067, text:	"Yellow Widget"}
		];
		drawChart = function() {
			var chart = new dojox.charting.Chart2D("#{id:chartNode}");
			chart.setTheme(dojox.charting.themes.Claro);
			chart.addPlot( "default", {
				type: "Pie",
				radius:200,
				fontColor:"black",
				labelOffset: -20
			});
			chart.addSeries("Number of Orders", chartData);
			chart.render();
		};

		XSP.addOnLoad(drawChart);
		</xp:this.value>
	</xp:scriptBlock>
	<div id="chartNode" style="width: 900px; height: 450px; " ></div>
</xp:view>

Links

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *

*