Dojo 2D charts in XPages

I am interested in creation of dashboards and report generation tools. And as a matter of fact that is what I do the best. I have used various tools like plotr, now over rided by flotr, a canvas API that helps u generate charts, intelliprint etc. Since XPages come with Dojo, I got curious on creating Dojo Charts which can be displayed in XPages. Accordingly I explored for sources on the internet and with their help, I finally figured out on how to create charts using Dojo in XPages. Though my charts are not so great, It still gives you an idea of how to create them in XPages.

Following is the procedure that will give you a basic simple line graph shown similar to the following image.

Step 1: Enable the following properties for the xpage dojoParseOnLoad="true" dojoTheme="true"

Step 2: Put the following code into a script library and include the same on to the XPage

dojo.require("dojox.charting.Chart2D");

var makeSimpleLineChart = function(){

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();        

};

Step 3: Create a button control and add the following code to it.
makeSimpleLineChart();

Step 4: Add a div tag with height and width of your choice to the page in the following manner

<div id="simplechart" style="width: 350px; height: 150px;"> </div>

Hope this is helps:)