Charting in Xpages

HCL Domino Domino Forum
1

I’m trying to create chart in xpage by using dojox.charting.Chart2D class. The xpage-source is below:<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp=“http://www.ibm.com/xsp/core” dojoTheme=“true” dojoParseOnLoad=“true”>

xp:this.resources

<xp:dojoModule name=“dojox.charting.Chart2D”></xp:dojoModule>

</xp:this.resources>

xp:panel

<div dojoType="dojox.charting.Chart2D" style="width: 250px; height: 150px;" 
  id="simplechart">

<xp:button value=“Start” id=“button1”>

<xp:eventHandler event="onclick" submit="false">

	<xp:this.script><![CDATA[ 

                     var chart1 = new dojox.charting.Chart2D("simplechart");

    chart1.addPlot("default", {type: "Lines"});

    chart1.addAxis("x");

    chart1.addAxis("y", {vertical: true});

    chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);

    chart1.render();

                          ]]></xp:this.script>

</xp:eventHandler></xp:button>

</xp:panel>

</xp:view>

Am I trying something that’s not possible yet because i can’t see anything happening when clicking on button?

Or is this proper way to use dojox-modules?

2

Subject: Try dojox.charting.widget.Chart2D

Try dojoType = “dojox.charting.widget.Chart2D” instead of “dojox.charting.Chart2D” in the div and also for the name of the resource - i.e. <xp:dojoModule name=“dojox.charting.widget.Chart2D”…

That seems to have worked for me for charts.

3

Subject: And leave out dojoType in the

I was having trouble with Firefox positioning the axes far above the plot when the div had a dojoType. With just a plain

, everything looked ok. Here is the source code on a test XPage:

<?xml version="1.0" encoding="UTF-8"?>

<xp:view xmlns:xp=“http://www.ibm.com/xsp/core”

xmlns:xc="http://www.ibm.com/xsp/custom" dojoParseOnLoad="true"

dojoTheme="true" styleClass="tundra">

xp:this.resources

<xp:dojoModule name=“dojox.charting.widget.Chart2D”></xp:dojoModule>

<xp:styleSheet href=“/custom.css”></xp:styleSheet>

</xp:this.resources>

<xp:button value=“Start” id=“button1”>

<xp:eventHandler event=“onclick” submit=“false”>

xp:this.script

</xp:this.script>

</xp:eventHandler>

</xp:button>

</xp:view>