Lotus Domino – Dojo Pie Chart Legend Color Hack Tips On Zero Value

Dojo Toolkit is a best free JavaScript library currently exist, which had a lot of ready to use widget for web application UI. One of the widget that we can use is the Dojo Chart Widget.

This is quite a common issue when we are using the Dojo Pie Chart Widget with Legend and if some of our data are had zero values then the color at the pie slice is different with the needed legend. In here i came up with a simple solution using XHTML JavaScript manipulation to show the right legends color.

Now we start from the beginning of implementing the Dojo Pie Chart.

Before we go through to the code implementation, we should think about the JSON data format. What do i know is we have to create this below JSON format for Dojo Pie Chart:

[
{text:"Lhokga Plant (BU)",stroke:"black",color:"#5D8AA8",y:7},
{text:"Lhoknga Project",stroke:"black",color:"#F0F8FF",y:3},
{text:"Lhoknga Terminal",stroke:"black",color:"#E32636",y:0},
{text:"Belawan Terminal",stroke:"black",color:"#E52B50",y:2},
{text:"Dumai Terminal",stroke:"black",color:"#CD2682",y:0},
{text:"Lhokseumawe Terminal",stroke:"black",color:"#9F2B68",y:0},
{text:"Batam Terminal",stroke:"black",color:"#ED3CCA",y:0}
]

Let me explain a little bit about the above format.

“text” => is the label for pie slice
“stroke” => is the pie slice stroke color
“color” => is the pie slice color
“y” => is the pie slice data number

Then we have to prepare an LotusScript Agent to create an JSON data output, let’s create a simple one.

Sub Initialize
Print |Content-Type: text/plain|
Print |[|
Print |{text:"Lhokga Plant  (BU)",stroke:"black",color:"#5D8AA8",y:7},|
Print |{text:"Lhoknga  Project",stroke:"black",color:"#F0F8FF",y:3},|
Print |{text:"Lhoknga  Terminal",stroke:"black",color:"#E32636",y:0},|
Print |{text:"Belawan  Terminal",stroke:"black",color:"#E52B50",y:2},|
Print |{text:"Dumai  Terminal",stroke:"black",color:"#CD2682",y:0},|
Print |{text:"Lhokseumawe  Terminal",stroke:"black",color:"#9F2B68",y:0},|
Print |{text:"Batam  Terminal",stroke:"black",color:"#ED3CCA",y:0}|
Print |]|
End Sub

Then you have to place needed HTML code container on your HTML page

<div id="chart_data" style="width: 800px; height: 200px;"></div>
<div class="legend_list right">
<div class="legend_example">
<div class="left">&nbsp;</div>
<label class="legend_text left"></label>
<div class="clear"></div>
</div>
</div>

Then we put the JavaScript code

dojo.addOnLoad(function() {
dojo.addClass(dojo.body(), "soria");

dojo.xhrPost({
url:  "http://domain.com/database.nsf/dataAgent?OpenAgent&ur=" + new Date().getMilliseconds(),
handleAs: "json",
content: {
keywords: qry_keywords
},
error: function(response, ioArgs){
if (ioArgs.xhr.status != 200) {
console.error("HTTP status code: ", ioArgs.xhr.status);
}
},
load: function(response, ioArgs){
if (response.length > 0) {
dojo.require("dojox.charting.plot2d.Pie");
dojo.require("dojox.charting.themes.MiamiNice");

var chart = new dojox.charting.Chart2D("chart_data");
chart.setTheme(dojox.charting.themes.MiamiNice).addPlot("default", {
type: "Pie",
radius: 150,
precision: 0
}).addSeries("Series A", response);
chart.render();

var i_item = 0;
var item = {};
for(i_item in response) {
item = dojo.clone(dojo.query(".legend_example"));
item.removeClass("legend_example");
item.addClass("legend");
item.removeClass("hidden");
item.query("div.left").style({backgroundColor: response[i_item].color});
item.query(".legend_text").addContent(response[i_item].text + " <strong>(" + response[i_item].y + ")</strong>");
dojo.place(item[0], dojo.byId("legend_list"), "last");
}

delete i_item;
delete item;
delete chart;
}
}
});
});

Hope this tips will be very helpfull for Lotus Domino Developer who want to integrate the Dojo Toolkit especially for the Pie Chart.

*Before running any of those above code, please replace all the double quote with your own.

Category: Lotus Domino / Tips