Sunday, 29 April 2012

Dojo Back Button Header On Click event handler

Dojo Back Button Header (Navigation Button) by Default has MoveTo or Href as the possible attributes which we can set.

If we need to add a EventListner to Back Button of the Header panel its not possible so easily...

The Simplest Work around to capture the Events fired by back button in the Header is as given below.

The Highlighted text in Green is the Container tags for Back button with respective Classes for Back button.

The Script below is the function which will be called once the Back button is clicked.


<h1 data-dojo-type="dojox.mobile.Heading" label="Header Title Goes Here....">
                 <div id="backButtonId" class="mblArrowButton" style="width: 67px;"     onclick="customClickHandler()">
                      <div class="mblArrowButtonHead"></div>
                      <div class="mblArrowButtonBody mblArrowButtonText">Back</div>
                   </div>
</h1>



<script>
function customClickHandler()
{
       alert("Back Button Clicked");
}
</script>



Thursday, 26 April 2012

Dojo Drill Down Pie Chart, External CSV file

In this Sample Demo tutorial, you will be looking at How to Create a Drill Down Pie Chart in DOJO.
It uses a CSV file exported from a excel sheet and Read pro grammatically from DOJO code.
It is then Parsed to JSON so as to feed it to the Pie Chart.
It also cracks the Code of finding the item Clicked (Slice) in a pie chart to drill down to next level of data.

 Source: copythe link below and open in new Window
kiranatious.gofreeserve.com.0lx.org/dojo/drilldown/pieChart.zip


Index.html  (which contains basic div for Mobile View and Charts)

  1. <!DOCTYPE HTML>
  2. <html lang="en">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>Pie Chart Smart Labels</title>
  6.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.2/dojo/dojo.js" data-dojo-config="async: true"></script>
  7.         <script type="text/javascript" src="src.js"></script>
  8.         <style>
  9.             @import "../../dojo/resources/dojo.css";
  10.             @import "../../dijit/themes/dijit.css";
  11.             @import "../../dojox/charting/resources/Legend.css";
  12.            
  13.             body {
  14.                 background: #181818;
  15.             }
  16.            
  17.             .dojoxLegendNode {
  18.                 background-color:#181818;
  19.                 border:1px solid #CCCCCC;
  20.                 margin:0;
  21.                 padding:0; 
  22.             }
  23.            
  24.             .dojoxLegendText {
  25.                 color: rgb(204, 204, 204);
  26.             }
  27.            
  28.             h1, p {
  29.                 color: rgb(204, 204, 204);
  30.             }
  31.         </style>
  32.     </head>
  33.     <body class="claro">
  34.        
  35.         <div id="view1" data-dojo-type="dojox.mobile.View" >
  36.           <h1 id="headerId" data-dojo-type="dojox.mobile.Heading" label="Drill Down Pie Chart">
  37.             <div id="backButtonId" class="mblArrowButton" style="width: 67px;display: none" onclick="backFired()">
  38.                 <div class="mblArrowButtonHead"></div>
  39.                 <div class="mblArrowButtonBody mblArrowButtonText">Back</div>
  40.             </div>
  41.           </h1>
  42.          
  43.           <div style="width: 100%; height: 100%" align="center">
  44.             <div id="pieChart" style="width: 550px; height: 550px; text-align: center" >
  45.             </div>
  46.             <div id="legend">
  47.             </div>
  48.           </div>
  49.          
  50.         </div>
  51.     </body>
  52. </html>


Src.js file
  1. var pieChart;
  2. var legend = null;
  3. var gObj = [];
  4. var objCount =0;
  5. var storeJson =[];          
  6. var titleStack = [];
  7. require(["dojox/charting/Chart", "dojox/charting/plot2d/Pie",
  8.          "dojox/charting/action2d/Tooltip",
  9.          "dojox/charting/themes/Tom",
  10.          "dojox/charting/widget/Legend", "dojo/ready","dojox/mobile/parser",
  11.          "dojox/mobile/View", "dojox/mobile/Heading","dojox/mobile/deviceTheme",
  12.          "dojox/mobile/Button","dojox/data/CsvStore","dojo/store/DataStore"],
  13.     function(Chart, Pie, Tooltip, Tom, Legend, ready, parser){
  14.            
  15.              //programmatically reading CSV from external file
  16.              var personStoreForGrid = new dojox.data.CsvStore({
  17.                     url:"salesdata_distributor.csv"
  18.                 });
  19.                
  20.                
  21.                 //storing to DataStore
  22.                 var objectStore = dojo.store.DataStore({
  23.                     store: personStoreForGrid
  24.                 });
  25.                
  26.                
  27.                 //On relustant Data load  & Parsing CSV data into Json Format which can be fed into Pie chart
  28.                 objectStore.query().then(function(results){
  29.                     //alert(results.length);
  30.                    
  31.                     var parentrow=results[0].RowLabels;
  32.                     var primaryval = [];
  33.                     var secondaryval = [];
  34.                     var finalJson ;
  35.                     var nextVal=0;
  36.                     //var primaryjson;
  37.                     //var secondaryjson;
  38.                     //parseInt(a)+parseInt(b);
  39.                    
  40.                    
  41.                    
  42.                     var aggrsum = parseInt(results[0].SecondarySalesValue)+parseInt(results[0].PrimarySalesValue);
  43.                     finalJson={text: parentrow+'('+aggrsum+')',y: results[0].SecondarySalesValue};
  44.                     //alert("First Time Parent Row = "+parentrow)
  45.                     for(var i = 1; i < results.length; ++i) {
  46.                         if(results[i].RowLabels!==undefined && results[i].RowLabels!==parentrow){
  47.                             finalJson.child=[{text: "primary("+results[nextVal].PrimarySalesValue+")",y: results[nextVal].PrimarySalesValue,child:primaryval},{text: "secondary("+results[0].SecondarySalesValue+")",y: results[nextVal].SecondarySalesValue,child:secondaryval}];
  48.                             storeJson.push(finalJson);
  49.                             parentrow = results[i].RowLabels;
  50.                             //alert("Subsequently Parent Row = "+parentrow)
  51.                             finalJson=null;
  52.                             nextVal=i;
  53.                             var aggrsum = parseInt(results[i].SecondarySalesValue)+parseInt(results[i].PrimarySalesValue);
  54.                             finalJson={text: parentrow+'('+aggrsum+')',y: aggrsum};
  55.                             primaryval = [];
  56.                             secondaryval = [];
  57.                             }
  58.                         else
  59.                         {
  60.                             primaryval.push({text: results[i].ChildRowLabels+"("+results[i].PrimarySalesValue+")",y: results[i].PrimarySalesValue});
  61.                             secondaryval.push({text: results[i].ChildRowLabels+"("+results[i].SecondarySalesValue+")",y: results[i].SecondarySalesValue});
  62.                            
  63.                         }
  64.                     }
  65.                                
  66.                     finalJson.child=[{text: "primary("+results[nextVal].PrimarySalesValue+")",y: results[nextVal].PrimarySalesValue,child:primaryval},{text: "secondary("+results[nextVal].SecondarySalesValue+")",y: results[nextVal].SecondarySalesValue,child:secondaryval}];
  67.                     storeJson.push(finalJson);
  68.                     pieChart.updateSeries("Series A",storeJson);
  69.                     pieChart.render();
  70.                     legend.refresh();
  71.                     // alert(JSON.stringify(storeJson));
  72.                     //alert("json created");
  73.                 });    
  74.    
  75.     ready(function(){
  76.         titleStack[0] = "Drill Down Pie Chart";
  77.         //var temp = dijit.byId("headerId");
  78.         //.set("label", "titleStack[0]");
  79.        
  80.         //document.getElementById("headerId").setAttribute('label','yes')  ;
  81.         parser.parse();
  82.         pieChart = new Chart("pieChart");
  83.         pieChart.setTheme(Tom).addPlot("default", {
  84.             type: "Pie",
  85.             font: "normal normal 10pt Tahoma",
  86.             fontColor: "#ccc",
  87.             labelWiring: "#ccc",
  88.             radius: 150,
  89.             labelStyle: "columns",
  90.             htmlLabels: true,
  91.             startAngle: -10
  92.         }).addSeries("Series A", storeJson);
  93.        
  94.         //Logic to handle Item Clicked on the Pie Chart for Drilling down to the Next Level
  95.         var h = pieChart.connectToPlot("default", function(o){
  96.             if(o.type == "onclick"){
  97.                 var test1 = storeJson;
  98.                 var childItem = o.run.data[o.index].child;
  99.                 if(childItem != undefined)
  100.                 {
  101.                     var str = (o.chart.series[0].data[o.index].text);
  102.                     titleStack[titleStack.length] = str;
  103.                     var temp = dijit.byId("headerId");
  104.                     temp.set("label", str);
  105.                     document.getElementById("backButtonId").style.display="";
  106.                     ++objCount;
  107.                     gObj[objCount] = childItem;
  108.                     drillDown(childItem);
  109.                     //document.getElementById("headerId").setAttribute('label', "str")  ;
  110.                    
  111.                 }
  112.               }
  113. });
  114.         gObj[0] = storeJson;
  115.         var anim_c = new Tooltip(pieChart, "default");
  116.         pieChart.render();
  117.         legend = new Legend({
  118.             chart: pieChart,
  119.             horizontal:true}, "legend");
  120.     });
  121. });
  122. // Logic to Move Back to previous Level of Stack
  123. function backFired()
  124. {
  125.     //alert(storeJson);
  126.     if(objCount==1){
  127.         document.getElementById("backButtonId").style.display="none";
  128.     }
  129.     if(objCount >= 0)
  130.     {
  131.          titleStack.pop();
  132.          str = titleStack[titleStack.length - 1];
  133.          var temp = dijit.byId("headerId");
  134.          temp.set("label", str);
  135.                    
  136.         gObj[objCount] = null;
  137.         --objCount;
  138.         var childItem = gObj[objCount];
  139.         drillDown(childItem);
  140.     }
  141. }
  142. //logic to Drill down on Click of the Item in a pie Chart
  143. function drillDown(item)
  144. {
  145.     pieChart.updateSeries("Series A",item);
  146.     pieChart.render();
  147.     legend.refresh();
  148. }