{call_header}
{assign var="actionReturn" value=$obj->actionReturn}
{literal}
 <link rel="stylesheet" href="{/literal}{$smarty.const.CONST_SITE_ADDRESS}{literal}library/jstree/themes/default/style.min.css" />
 <style>
ul.legend_graph{
  display: inline-block;
    list-style: none outside none;
    margin: 10px 30px 0;
}
ul.legend_graph li{
  float: left;
    margin: 0 30px 0 0;
}
ul.legend_graph li span{bottom: -6px; display: inline-block; height: 22px; margin-right: 5px; position: relative; width: 22px;}
ul.legend_graph li.first span{ background: #0b62a4;}
ul.legend_graph li.second span{ background: #7a92a3;}
ul.legend_graph li.third span{ background: #4da74d;}

</style>
 {/literal}

<section class="content_area clearfix">
  <h2>Budget Graph</h2>
<span class="date"><a id="printme" onclick="printDiv('printableArea')" title="print"><img src="{$smarty.const.CONST_SITE_ADDRESS}images/printer-icon.png" /></a></span>
<div class="left_sidebar">
<ul class="menu">
   <li><a href="monitor_evaluate.php" title="Click to see M&E documents">M & E data</a></li>
   <!--{foreach key=num item=item from=$actionReturn.files}
         {if !( $num == 0  || $num == 1 ) }
    <li id="{$num}"><a style="cursor:pointer;" id="{$actionReturn.sqn}">{$item}</a></li>
    {/if}
  {/foreach}-->
   <li><a href="budget.php" title="Click to see Budget details">Budget</a></li>
      <li><a href="graph.php" title="Click to see Overall objective graph">Overall Objective Graph</a></li>
            <li><a href="graph_program_purpose.php" title="Click to see Project Purpose graph">Project Purpose Graph</a></li> 
             <li><a href="graph_budget.php" title="Click to see Budget graph">Budget Graph</a></li> 
      
   <li><a href="smmeforms.php" title="Click to see SMMEs Forms">SMMEs and business service performance</a></li>
    </ul>
</div>

<div class="right_cntnt_sdebr" id="printableArea">
  <ul class="legend_graph">
    <li class="first"><span></span>Budget Expenditure</li>
    <li class="second"><span></span>Actual Expenditure</li>
        
    <li class="third"><span></span>Committed Expenditure</li>
  </ul>
  <div class="tree_structure">    
{if $obj->currentAction  ==  "Listing"}
   {foreach from=$actionReturn.data.indicators key=ik item=iv  }


   <div>{$iv['activities']}</div>
            <div id="morris-bar-chart{$ik}"></div>       

  {/foreach}
{/if}
</div>

{literal}
  <!-- 4 include the jQuery library -->
  <script src="{/literal}{$smarty.const.CONST_SITE_ADDRESS}{literal}library/jstree/libs/jquery.js"></script>
  <!-- 5 include the minified jstree source -->
 
  <script>
  $(function () {
    {/literal}{if $actionReturn.data.chart}{literal} 
    {/literal}{foreach from=$actionReturn.data.chart key=k item=v}{literal}  
    Morris.Bar({
      element: 'morris-bar-chart'+{/literal}{$k + 'test'}{literal},
      data: {/literal}{$v}{literal},      
      xkey: 'y',
      ykeys: ['baseline', 'target','commited'],
      labels: ['Budget', 'Actual Expenditure','Commited Budget'],
      barGap : 10, 
      xLabelMargin: 10,  
      hideHover: 'auto',
      resize: true
    });  
     {/literal}{/foreach}{literal} 
     {/literal}{/if}{literal}   
      $('ul.menu li').click(function() {       
       var id = this.id;
       var sheet_id = $('#'+id+' a').attr('id');
       var uid = $('#'+id+' a').text();       
       //alert(uid); exit;
       window.open("{/literal}{$smarty.const.CONST_SITE_ADDRESS}{literal}display_excel2.php?uid="+uid+"&sqn="+sheet_id);
       
    }); 
  });
  </script>
  <script type="text/javascript">
    function printDiv(divName) {
     var printContents = document.getElementById(divName).innerHTML;
     var originalContents = document.body.innerHTML;

     document.body.innerHTML = printContents;

     window.print();

     document.body.innerHTML = originalContents;
} 
    </script>   
  {/literal}
  </div>
</div>
</section>
</div>
  <!-- Morris Charts JavaScript -->
<script src="js/morris/raphael.min.js"></script>
<script src="js/morris/morris.min.js"></script>
{call_footer}