Requirements

• jQuery
• jQuery Cycle Plugin
• loading.gif (for loading indicator, you can create from http://ajaxload.info/)
• your images

Step 1

Load all needed libraries inside your HTML head tag:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>

Step 2

Create HTML tags for your slideshow:

<!-- For loading indicator -->
<img id="loading-indicator" src="loading.gif" alt="loading" style="display:none;" />

<!-- Your slideshow -->
<div id="myslides">
 <img src="banner1.jpg" alt="banner1" />
 <img src="banner2.jpg" alt="banner2" />
 <img src="banner3.jpg" alt="banner3" />
 <img src="banner4.jpg" alt="banner4" />
</div>

Step 3

Put below JavaSript codes at HTML head and don’t forget to read the code comment:

<script type="text/javascript">
 jQuery(document).ready(function(){
  // Get the slide show container first
  var objSlideshow = jQuery('#myslides');

  // Get slide show container position
  var objPosistion = objSlideshow.position();

  // Create loading interface, to wait the preload
  var objLoading = jQuery('<div></div>').css({
    position: 'absolute',
    top: objPosistion.top,
    left: objPosistion.left,
    width: objSlideshow.width(),
    height: objSlideshow.height(),
    background: 'url("' + jQuery('#loading-indicator').attr('src') + '") center no-repeat'
  }).appendTo(objSlideshow.parent());

  // Hide the slide show container first, to wait the preload finish
  objSlideshow.css('visibility', 'hidden');

  // Do preload, after all images loaded, start the cycle
  var imagesSlideshow = jQuery('img', objSlideshow);
  var totalImages = imagesSlideshow.length;
  var iTotalImage = 0;

  imagesSlideshow.each(function(){
    jQuery('<img />').attr('src', jQuery(this).attr('src')).load(function(){
      iTotalImage++;

      if (totalImages == iTotalImage) {
        // Destroy the loading object
        objLoading.remove();

       // Start the cycle
       objSlideshow.css('visibility', 'visible').cycle({
         fx: 'fade',
         speed: 1000,
         timeout: 4000
      });
    }
  });
});
</script>

Thanks for reading! ^_^

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 style="clear:both;"></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",
    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.