Dojo2D charts in XPages Part2

In one of my previous posts I had posted about the creation of a simple dojo chart in XPages. Well Here is a more enhanced collection of charts to which that one belonged. Following are screen shots of dojo charts that I have developed using dojo in XPages.

Step1: Create a button to invoke each of the following functions on an xpage.

Step2: Create div tags with the ids as mentioned in the forth coming javascript function

Step3: 150/350 px would be a correct height/width ratio

Step 4: Put the following code in a script library and call them on to the XPage.


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

makeSimpleAreaChart = 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.addPlot("default", {type: "Areas"});
chart1.render();        
};

makeSimpleStackedAreaGraph = function(){
var chart1 = new dojox.charting.Chart2D("simpleStackAreaChart");
    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.addPlot("default", {type: "StackedAreas", lines: true, areas: true, 
        markers: true});
chart1.render();        
};

makeSimpleStackedLinesChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleStackedLinesChart");
    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.addPlot("default", {type: "StackedLines",tension:3, 
        shadows: {dx: 2, dy: 2, dw: 2}});
chart1.render();        
};
        
/*********************/
makeSimpleBarChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleBarChart");
    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.addPlot("default", {type: "Bars", gap: 5});
chart1.render();        
};

makeSimpleBarChart_2 = function(){ var chart1 = new dojox.charting.Chart2D("simpleBarChart_2");
    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.addPlot("default", {type: "Bars", hAxis: "cool x", 
        vAxis: "super y"});
    chart1.render();        
};

makeSimplePieChart = function(){
var chart1 = new dojox.charting.Chart2D("simplePieChart");
    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.addPlot(defaultParams: { labels: true,ticks: false, fixed: true, precision: 1,labelOffset: 20, labelStyle: "default",  htmlLabels: true}, optionalParams: {font: "", fontColor: "", radius: 0});
chart1.render();        
};

makeSimpleGridChart = function(){ var chart1 = new dojox.charting.Chart2D("simpleGridChart");
    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.addPlot("default", {type: "Grid",
        hMajorLines: true, 
        hMinorLines: false,
        vMajorLines: true,
        vMinorLines: false});
chart1.render();        
};

makeSimpleLinesChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleLinesChart");
    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.addPlot("default", {type: "Lines", markers: true, 
        tension:3, shadows: {dx: 2, dy: 2, dw: 2}});
chart1.render();        
};

makeSimpleCombinedChart = function(){
var chart1 = new dojox.charting.Chart2D("simpleCombinedChart");
chart1.addPlot("default", {type: "Lines"});
chart1.addPlot("other", {type: "Areas"});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.addSeries("Series 2", [1, 1, 4, 2, 1, 6, 4, 3], 
        {plot: "other", stroke: {color:"blue"}, fill: "lightblue"});
chart1.render();        
};

Hope this helps :)