{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" /> 	
<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.5.1.css">
<style>
svg{
  width: 100% !important
}

</style>
 {/literal}

<section class="content_area clearfix">
  <h2>Overall Objective Graph</h2>
  <span class="date">Date : {$actionReturn.data.seqdate}, Sequence No : {$actionReturn.data.seqnum}
    &nbsp;&nbsp;
  <a id="printme" onclick="printDiv('printableArea')" title="print the graph!"><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">
  <div class="tree_structure">    
{if $obj->currentAction  ==  "Listing"}
   {foreach from=$actionReturn.data.indicators key=ik item=iv  }
   <div>{$iv}</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}{literal},
      data: {/literal}{$v}{literal},     
      barGap : 10, 
      xLabelMargin: 10,        
      xkey: 'y',
      ykeys: ['baseline', 'target'],
      labels: ['Baseline', 'Target'],
      hideHover: 'auto'           
    }); 
    /*
       $("#morris-bar-chart1").labels.forEach(function(label, i){
		   alert(label);
		var legendItem = $('<span></span>').text(label).css('color', chart.options.lineColors[i])
		$('#legend').append(legendItem)
		})*/ 
     {/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="dashboard/js/plugins/morris/raphael.min.js"></script>
<script src="dashboard/js/plugins/morris/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>-->
<!--<script src="http://cdn.oesmith.co.uk/morris-0.5.1.min.js"></script>-->
<script src="js/morris/raphael.min.js"></script>
<script src="js/morris/morris.min.js"></script>


{call_footer}