Untitled

<!DOCTYPE html>
<html>
<head>

<title>District Health Profiles</title>

<!-- Import ext js/css and plugin js -->


<link href="//fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="//dhis2-cdn.org/v217/ext/resources/css/ext-plugin-gray.css" />
<script src="//dhis2-cdn.org/v217/ext/ext-all.js"></script>
<script src="//dhis2-cdn.org/v217/plugin/table.js"></script>
<script src="http://dhis2-cdn.org/v215/plugin/chart.js"></script>
<script src="http://dhis2-cdn.org/v215/openlayers/OpenLayers.js"></script>
<script src="http://dhis2-cdn.org/v215/plugin/map.js"></script>
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style type="text/css">
#districtmap {
    width: 1000px; height: 1000px; /* or whatever the dimensions are */
    }
</style>


<!-- Login and initialize plugins -->

<script>
var base = 'http://172.16.45.72:8080/dhis/';
//var base = 'http://localhost:8080/dhis/';
 var district = 'fSyvbMUZWqJ';
// var district = $( "#orgunit option:selected" ).val();
// var district = $('select[name=orgunit]').val();
// var district = $('#orgunit option:selected').val()
// var districtname = $('#orgunit').find(":selected").text();
var districtname = 'Gasabo District';
// var districtname = $('#orgunit option:selected').text();


Ext.onReady( function() {
  Ext.Ajax.request({
    url: base + "dhis-web-commons-security/login.action?authOnly=true",
    method: 'POST',
    params: { j_username: "jmutali", j_password: "PBF2030@" },
	crossDomain:true,
    success: setLinks
  });
});

function setLinks() {

// OPD per capita chart
DHIS.getChart({
  "type": "column",
  "columns": [
    {
      "dimension": "dx",
      "items": [
        {
          "id": "KmuCgGrwpVl"
        }
      ]
    }
  ],
  "rows": [
    {
      "dimension": "ou",
      "items": [
        {
          "id": "LEVEL-6"
        },
        {
          "id": district
        }
      ]
    }
  ],
  "filters": [
    {
      "dimension": "pe",
      "items": [
        {
          "id": "LAST_YEAR"
        }
      ]
    }
  ],
  "hideEmptyRows": true,
  "rangeAxisDecimals": 1,
  "title": "OPD Vists per capita by Facility last Year",
	width: 500,
	height: 400,
 // "url": "http://localhost:8080/dhis",
  "url": "http://172.16.45.72:8080/dhis/",
  "el": "chart2"
});
//start of districts selection
  //get a reference to the select element
  var $select = $('#orgunit');
  //request the JSON data and parse into the select element
$.ajax({
  url: ' http://172.16.45.72:8080/dhis/api/organisationUnits.json?paging=false&level=3',
 // url: ' http://localhost:8080/dhis/api/organisationUnits.json?paging=false&level=3',
  dataType:'JSON',
  success:function(data){
    //clear the current content of the select
    $select.html('');
    //iterate over the data and append a select option
    $.each(data.organisationUnits, function(key, val){
      $select.append('<option id="' + val.id + '">' + val.name + '</option>');

    })
  },
  error:function(){
    //if there is an error append a 'none available' option
    $select.html('<option id="-1">none available</option>');
	             }
//  $('select[name=orgunit]').change(function() { alert($(this).val()); });
});
//end of districts selection
}


</script>

</head>

<body align='center'>
 <header>
  <h1>District Health Profile</h1>
   <select id="orgunit" name="orgunit"></select>
  <h1>
<script type="text/javascript">

  document.write(districtname);
  </script>
  </h1>
</header>


<section>

<h3>District Facility Map</h3>

<img id=districtmap />
<script>

$('#districtmap').css('visibility', 'visible').attr('src', "images/"+districtname + '.jpg');

</script>

<!--  <img src="images/Gasabo.jpg" WIDTH=1000 HEIGHT=1000> !-->


<h3>OPD visits per capita</h3>

<div id="chart2" align='center'></div>

</section>

</body>
</html>