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.                         }
  65.                     }
  66.                                
  67.                     finalJson.child=[{text: "primary("+results[nextVal].PrimarySalesValue+")",y: results[nextVal].PrimarySalesValue,child:primaryval},{text: "secondary("+results[nextVal].SecondarySalesValue+")",y: results[nextVal].SecondarySalesValue,child:secondaryval}];
  68.                     storeJson.push(finalJson);
  69.                     pieChart.updateSeries("Series A",storeJson);
  70.                     pieChart.render();
  71.                     legend.refresh();
  72.                     // alert(JSON.stringify(storeJson));
  73.                     //alert("json created");
  74.                 });    
  75.    
  76.     ready(function(){
  77.         titleStack[0] = "Drill Down Pie Chart";
  78.         //var temp = dijit.byId("headerId");
  79.         //.set("label", "titleStack[0]");
  80.        
  81.         //document.getElementById("headerId").setAttribute('label','yes')  ;
  82.         parser.parse();
  83.         pieChart = new Chart("pieChart");
  84.         pieChart.setTheme(Tom).addPlot("default", {
  85.             type: "Pie",
  86.             font: "normal normal 10pt Tahoma",
  87.             fontColor: "#ccc",
  88.             labelWiring: "#ccc",
  89.             radius: 150,
  90.             labelStyle: "columns",
  91.             htmlLabels: true,
  92.             startAngle: -10
  93.         }).addSeries("Series A", storeJson);
  94.        
  95.         //Logic to handle Item Clicked on the Pie Chart for Drilling down to the Next Level
  96.         var h = pieChart.connectToPlot("default", function(o){
  97.             if(o.type == "onclick"){
  98.                 var test1 = storeJson;
  99.                 var childItem = o.run.data[o.index].child;
  100.                 if(childItem != undefined)
  101.                 {
  102.                     var str = (o.chart.series[0].data[o.index].text);
  103.                     titleStack[titleStack.length] = str;
  104.                     var temp = dijit.byId("headerId");
  105.                     temp.set("label", str);
  106.                     document.getElementById("backButtonId").style.display="";
  107.                     ++objCount;
  108.                     gObj[objCount] = childItem;
  109.                     drillDown(childItem);
  110.                     //document.getElementById("headerId").setAttribute('label', "str")  ;
  111.                    
  112.                 }
  113.               }
  114. });
  115.         gObj[0] = storeJson;
  116.         var anim_c = new Tooltip(pieChart, "default");
  117.         pieChart.render();
  118.         legend = new Legend({
  119.             chart: pieChart,
  120.             horizontal:true}, "legend");
  121.     });
  122. });
  125. // Logic to Move Back to previous Level of Stack
  126. function backFired()
  127. {
  128.     //alert(storeJson);
  129.     if(objCount==1){
  130.         document.getElementById("backButtonId").style.display="none";
  131.     }
  132.     if(objCount >= 0)
  133.     {
  134.          titleStack.pop();
  135.          str = titleStack[titleStack.length - 1];
  136.          var temp = dijit.byId("headerId");
  137.          temp.set("label", str);
  138.                    
  139.         gObj[objCount] = null;
  140.         --objCount;
  141.         var childItem = gObj[objCount];
  142.         drillDown(childItem);
  143.     }
  144. }
  146. //logic to Drill down on Click of the Item in a pie Chart
  147. function drillDown(item)
  148. {
  149.     pieChart.updateSeries("Series A",item);
  150.     pieChart.render();
  151.     legend.refresh();
  152. }


Posted by at 04:40
Labels: , ,

3 comments:

  1. Mark Watts30 August 2012 at 10:30

    Can I get a copy of the .csv file? The demo site doesn't respond and I'm not sure the format of the data to create the chart.

    Thanks,
    Mark

    ReplyDelete
  2. شهاب ربيع13 January 2013 at 05:49

    Thanks A lot fot his efforts :)
    Mark, This is the CSV

    ReplyDelete
  3. kiran15 January 2013 at 23:39

    Hi Mark, please find the CSV file in the below link

    http://kiranatious.gofreeserve.com.0lx.org/dojo/drilldown/salesdata_distributor.csv

    ReplyDelete

Subscribe to: Post Comments (Atom)