Distribution of population by sex and age group

Age pyramid for one or two populations. Available by state and district, residence (urban/rural), population type (all/castes/tribes). By default, a single population is displayed. An option is provided to add the contour of a second population, to allow comparison of the age and sex distribution of two populations.

Loading...

Chart source code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.6.0/echarts-en.common.js">      
      </script>
      <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    
    <style>

.footer-bar{
        background: gainsboro;
        padding: 5px;
    }

* {
   box-sizing: border-box;
   font-family: "Arial"
 }
 .pageLoader {
   position: fixed;
   width: 100%;
   height: 100%;
   background: rgba(0, 0, 0, 0.3);
   left: 0;
   top: 0;
   display: flex;
   align-items: center;
   justify-content: center;
 }
 .pageLoader.hide {
   display: none;
 }
 .chart-block {
   border: 1px solid #eaeaea;
   padding: 30px;
   margin: 0 auto;
 }
 .chart-filter {
   /*width: 100%;*/
   float: left;
   overflow: hidden;
   clear: both;
 }
 .percent-normal-filter {
   padding: 0;
   list-style-type: none;
   display: flex;
   float: right;
   margin: 0;
 }
 .percent-normal-filter li {
   font-size: 14px;
   padding: 6px 10px;
   border: 1px solid #333333;
   margin-left: 10px;
   font-family: "Arial";
   line-height: 14px;
   cursor: pointer;
 }
 .percent-normal-filter li:hover, .percent-normal-filter li.active {
   background: #333333;
   color: #ffffff;
 }
 #chart-panel {
   clear: both;
   width: 700px;
   height: 600px;
   margin: 0 auto;
 }
 .main-filter {
   display: flex;
   justify-content: space-between;
   margin-bottom: 20px;
 }
 .filter-field .main-label {
   font-size: 16px;
 }
 .field-label {
   font-size: 14px;
   cursor: pointer;
   margin-right: 15px;
 }
 .radio-field {
   padding-top: 5px;
 }
 .radio-label input {
   opacity: 0;
   position: absolute;
 }
 .radio-label span {
   position: relative;
   padding-left: 20px;
 }
 .radio-label span:before {
   content: "";
   position: absolute;
   width: 10px;
   height: 10px;
   border: 1px solid #4d4d4d;
   border-radius: 50%;
   left: 0;
   top: 2px;
 }
 .radio-label input:checked+span:before {
   background: #4d4d4d;
 }
 /*------- main filter -------*/

.main-top-filter {
   display: flex;
   width: 100%;
   flex-wrap: wrap;
   margin-top: 10px;
   margin-bottom: 10px;
   padding: 20px;
   border: 1px solid #eaeaea;
 }
 .main-top-filter .filter-field {
   display: flex;
   align-items: center;
   margin-right: 0;
   flex-wrap: wrap;
   padding-right: 12px;
   width: 21%;
 }
 .main-top-filter .filter-field:last-child {
   margin-right: 0;
 }
 .main-top-filter .filter-field.radio-field {
   width: calc( 37% - 20px);
   margin-right: 20px;
   padding-left: 12px;
   border-left: 1px solid #eaeaea;
   border-right: 1px solid #eaeaea;
 }
 .main-top-filter .input-select select {
   background: #ffffff;
   height: 30px;
   margin-left: 0;
   padding: 5px;
   min-width: 130px;
 }
 .filter-row {
   display: flex;
   padding-bottom: 15px;
   margin-bottom: 15px;
   width: 100%;
   justify-content: space-between;
   border-bottom: 1px solid #ededed;
   position: relative;
 }
 .filter-row:last-child {
   border: none !important;
   padding-bottom: 0px;
   margin-bottom: 0px;
 }
 .filter-row .filter-field>label:not(.radio-label) {
   width: 100%;
   font-size: 14px;
   margin-bottom: 5px;
 }
 .filter-row .radio-field {
   padding-top: 20px;
 }
 .input-wrap {
   width: 100%;
 }
 .input-wrap select, .input-wrap input {
   width: 100%;
 }
 .addmore-filter-row {
   display: none;
 }
 .more-filter-added .addmore-filter-row {
   display: flex;
 }
 .chart-block:not(.more-filter-added) .filter-row {
   border: none;
   padding-bottom: 0;
   margin-bottom: 0;
 }
 .more-filter-added .filter-row:first-child .radio-field {
   border-right: none !important;
 }
 /***----- more filter ----****/

.addmore-filter {
   width: 100%;
   /* float: left; */
   display: flex;
   justify-content: flex-end;
 }
 .addmore-btn {
   cursor: pointer;
 }
 
 .filter-row .addmore-btn {
   cursor: pointer;
   position: absolute;
   right: -6px;
   top: 50%;
   background: url("http://census.ihsn.org/sites/default/files/2020-05/add-filter.png") no-repeat center transparent;
   width: 19px;
   height: 18px;
   display: block;
   font-size: 0;
 }
 .more-filter-added .filter-row .addmore-btn {
   background-image: url("http://census.ihsn.org/sites/default/files/2020-05/remove_filter.png");
 }
 .more-filter-added .filter-row .addmore-btn, .addmore-filter-row .addmore-btn {
   display: none;
 }
 .more-filter-added .filter-row.addmore-filter-row .addmore-btn {
   display: block;
 }
    </style>  
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/1.2.1/lodash.min.js">
    </script>
    <script crossorigin="anonymous" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" src="https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

function dataFetch(dataurl) {
  var loadData;
  $.ajax({
    url: dataurl,
    async: false,
    success: function(data) {
      loadData = data;
    }
  });
  return loadData;
}

function roundUp(num, precision) {
  num = parseFloat(num);
  if (!precision) return num.toLocaleString();
  return (Math.ceil(num / precision) * precision);
};

function findSum(data) {
  var dataItemSum = 0;
  _.forEach(data, function(value, key) {
    dataItemSum = dataItemSum + value.value;
  });
  return dataItemSum;
}

function selectOptions(data, id) {
  var template = [];
  for (var i = 0; i < data.length; i++) {
    template.push("<option value='" + data[i] + "'>" + data[i] + "</option>");
  }
  $(id).html(template.join(' '));
}

function jsonUrlCreate(level) {
  var levelParameters = "geo_level=" + level;
  levelParameters = level == 1 ? levelParameters + "&state=" + selectedStateMain : levelParameters;
  levelParameters = level == 2 ? levelParameters + "&state=" + selectedStateMain + "&district=" + selectedDistrictMain : levelParameters;
  var newjsonUrl = baseDataUrl(selectedYearMain) + "?" + levelParameters + "&urbrur=" + SelectedUrburMain + urlLabels;
  return newjsonUrl;
}

function jsonUrlCreateNew(level) {
  var levelParameters = "geo_level=" + level;
  levelParameters = level == 1 ? levelParameters + "&state=" + selectedStateContour : levelParameters;
  levelParameters = level == 2 ? levelParameters + "&state=" + selectedStateContour + "&district=" + selectedDistrictContour : levelParameters;
  var newjsonUrl = baseDataUrl(selectedYearContour) + "?" + levelParameters + "&urbrur=" + SelectedUrburContour + urlLabels;
  return newjsonUrl;
}

function baseDataUrl(year) {
  var newUrl = "http://digital-library.census.ihsn.org/index.php/api/tables/data/" + year + "/pc11_c14/3570";
  return newUrl;
}
// var baseDataUrl = "http://digital-library.census.ihsn.org/index.php/api/tables/data/2011/pc11_c14/3570";
var fixedUrlLabels = "&sex=1,2&age_group=0-80&scst=0";
var urlLabels = fixedUrlLabels + "&labels=scst,sex,state,district,urbrur";
var jsonData = [];
var allGenders = [];
var moreFilter = false;
var filterMainUrl, filterMainData = [];
var filterMainParameters, filterContourParameters;
var filterContourUrl, filterContourData = [];
var selectedYearMain, selectedStateMain, selectedDistrictMain, SelectedUrburMain;
var selectedYearContour, selectedStateContour, selectedDistrictContour, SelectedUrburContour;
var statesCodes, states = [];
var districtCodes, districts = [];
var allStateUrl = "http://digital-library.census.ihsn.org/index.php/api/tables/data/2011/pc11_c14/3570?sex=1,2&age_group=0-80&geo_level=1&urbrur=0&scst=0&labels=scst,sex,state,district,urbrur";

function initialLoad(data) {
  var currentdata = data.data;
  allGenders = findcodes(data, "sex");
  statesCodes = findcodes(data, "state");
  for (var i = 0; i < statesCodes.length; i++) {
    states.push(statesCodes[i].areaname)
  }
  statesCodes = customSort(statesCodes, 'areaname');
  states = states.sort();
  selectFilterOptions(statesCodes, "#state", ["state", "areaname"]);
  selectFilterOptions(statesCodes, "#state-contour", ["state", "areaname"]);
  dataFilter();
}

<body>
  <div class="chart-block">
      <div class="main-filter">
        <div class="filter-wrap">
          <div class="filter-field axis-position radio-field">
            <label class="main-label">
              Age axis position :
            </label>
            <label class="field-label radio-label">
              <input checked="" name="yaxis" type="radio" value="left"/>
              <span>
                Left
              </span>
            </label>
            <label class="field-label radio-label">
              <input name="yaxis" type="radio" value="left-right"/>
              <span>
                Left and Right
              </span>
            </label>
          </div>
        </div>
        <div class="chart-filter">
          <ul class="percent-normal-filter">
            <li class="percent-filter chart-type" data-show="percent">
              Percentage
            </li>
            <li class="normal-filter chart-type" data-show="number">
              Count
            </li>
          </ul>
        </div>
      </div>
      
      <div class="main-top-filter">
        <div class="filter-wrap">
          
          <div class="filter-row">
            <span class="addmore-btn" title="Select second population">
              Add
            </span>
            <div class="filter-field">
              <label>
                Census year
              </label>
              <div class="input-wrap input-select select-census-year">
                <select id="census-year">
                  <option value="2011">
                    2011
                  </option>
                </select>
              </div>
            </div>
            <div class="filter-field">
              <label>
                State/UT
              </label>
              <div class="input-wrap input-select select-state">
                <select id="state">
                  <option value="All">
                    All
                  </option>
                </select>
              </div>
            </div>
            <div class="filter-field">
              <label>
                District
              </label>
              <div class="input-wrap input-select select-district">
                <select id="district">
                  <option value="All">
                    All
                  </option>
                </select>
              </div>
            </div>
            <div class="filter-field select-urbur radio-field">
              <label class="field-label radio-label">
                <input checked="" data-values="Total" name="urbur" type="radio" value="0"/>
                <span>
                  Total
                </span>
              </label>
              <label class="field-label radio-label">
                <input data-values="Rural" name="urbur" type="radio" value="1"/>
                <span>
                  Rural
                </span>
              </label>
              <label class="field-label radio-label">
                <input data-values="Urban" name="urbur" type="radio" value="2"/>
                <span>
                  Urban
                </span>
              </label>
            </div>
          </div>
          
          
          <div class="filter-row addmore-filter-row">
            <span class="addmore-btn" title="Remove second population">
              Add
            </span>
            <div class="filter-field">
              <label>
                Census year
              </label>
              <div class="input-wrap input-select select-census-year">
                <select id="census-year-contour">
                  <option value="2011">
                    2011
                  </option>
                </select>
              </div>
            </div>
            <div class="filter-field">
              <label>
                State/UT
              </label>
              <div class="input-wrap input-select select-state">
                <select id="state-contour">
                  <option value="All">
                    All
                  </option>
                </select>
              </div>
            </div>
            <div class="filter-field">
              <label>
                District
              </label>
              <div class="input-wrap input-select select-district">
                <select id="district-contour">
                  <option value="All">
                    All
                  </option>
                </select>
              </div>
            </div>
            <div class="filter-field select-urbur-contour radio-field">
              <label class="field-label radio-label">
                <input checked="" data-values="Total" name="urbur-contour" type="radio" value="0"/>
                <span>
                  Total
                </span>
              </label>
              <label class="field-label radio-label">
                <input data-values="Rural" name="urbur-contour" type="radio" value="1"/>
                <span>
                  Rural
                </span>
              </label>
              <label class="field-label radio-label">
                <input data-values="Urban" name="urbur-contour" type="radio" value="2"/>
                <span>
                  Urban
                </span>
              </label>
            </div>
          </div>
          
        </div>
      </div>
      
      <div class="chart-wrapper">
      </div>
    </div>
    <div class="pageLoader">
      <?xml version="1.0" encoding="UTF-8" standalone="no"?>
      <svg height="64px" version="1.0" viewbox="0 0 128 128" width="64px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <rect fill="transparent" height="100%" width="100%" x="0" y="0">
        </rect>
        <g>
          <path d="M64 0a7 7 0 1 1-7 7 7 7 0 0 1 7-7zm29.86 12.2a2.8 2.8 0 1 1-3.83 1.02 2.8 2.8 0 0 1 3.83-1.02zm22.16 21.68a3.15 3.15 0 1 1-4.3-1.15 3.15 3.15 0 0 1 4.3 1.15zm.87 60.53a4.2 4.2 0 1 1-1.57-5.7 4.2 4.2 0 0 1 1.54 5.73zm7.8-30.5a3.85 3.85 0 1 1-3.85-3.85 3.85 3.85 0 0 1 3.85 3.84zm-30 53.2a4.55 4.55 0 1 1 1.66-6.23 4.55 4.55 0 0 1-1.67 6.22zM64 125.9a4.9 4.9 0 1 1 4.9-4.9 4.9 4.9 0 0 1-4.9 4.9zm-31.06-8.22a5.25 5.25 0 1 1 7.17-1.93 5.25 5.25 0 0 1-7.14 1.93zM9.9 95.1a5.6 5.6 0 1 1 7.65 2.06A5.6 5.6 0 0 1 9.9 95.1zM1.18 63.9a5.95 5.95 0 1 1 5.95 5.94 5.95 5.95 0 0 1-5.96-5.94zm8.1-31.6a6.3 6.3 0 1 1 2.32 8.6 6.3 6.3 0 0 1-2.3-8.6zM32.25 8.87a6.65 6.65 0 1 1-2.44 9.1 6.65 6.65 0 0 1 2.46-9.1z" fill="#ffffff" fill-opacity="1">
          </path>
          <animatetransform attributename="transform" calcmode="discrete" dur="1080ms" repeatcount="indefinite" type="rotate" values="0 64 64;30 64 64;60 64 64;90 64 64;120 64 64;150 64 64;180 64 64;210 64 64;240 64 64;270 64 64;300 64 64;330 64 64">
          </animatetransform>
        </g>
      </svg>
    </div>

<button class="btn-chart-options btn xbtn-outline-primary btn-sm text-secondary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        <svg class="bi bi-gear" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" d="M8.837 1.626c-.246-.835-1.428-.835-1.674 0l-.094.319A1.873 1.873 0 014.377 3.06l-.292-.16c-.764-.415-1.6.42-1.184 1.185l.159.292a1.873 1.873 0 01-1.115 2.692l-.319.094c-.835.246-.835 1.428 0 1.674l.319.094a1.873 1.873 0 011.115 2.693l-.16.291c-.415.764.42 1.6 1.185 1.184l.292-.159a1.873 1.873 0 012.692 1.116l.094.318c.246.835 1.428.835 1.674 0l.094-.319a1.873 1.873 0 012.693-1.115l.291.16c.764.415 1.6-.42 1.184-1.185l-.159-.291a1.873 1.873 0 011.116-2.693l.318-.094c.835-.246.835-1.428 0-1.674l-.319-.094a1.873 1.873 0 01-1.115-2.692l.16-.292c.415-.764-.42-1.6-1.185-1.184l-.291.159A1.873 1.873 0 018.93 1.945l-.094-.319zm-2.633-.283c.527-1.79 3.065-1.79 3.592 0l.094.319a.873.873 0 001.255.52l.292-.16c1.64-.892 3.434.901 2.54 2.541l-.159.292a.873.873 0 00.52 1.255l.319.094c1.79.527 1.79 3.065 0 3.592l-.319.094a.873.873 0 00-.52 1.255l.16.292c.893 1.64-.902 3.434-2.541 2.54l-.292-.159a.873.873 0 00-1.255.52l-.094.319c-.527 1.79-3.065 1.79-3.592 0l-.094-.319a.873.873 0 00-1.255-.52l-.292.16c-1.64.893-3.433-.902-2.54-2.541l.159-.292a.873.873 0 00-.52-1.255l-.319-.094c-1.79-.527-1.79-3.065 0-3.592l.319-.094a.873.873 0 00.52-1.255l-.16-.292c-.892-1.64.902-3.433 2.541-2.54l.292.159a.873.873 0 001.255-.52l.094-.319z" clip-rule="evenodd"/>
            <path fill-rule="evenodd" d="M8 5.754a2.246 2.246 0 100 4.492 2.246 2.246 0 000-4.492zM4.754 8a3.246 3.246 0 116.492 0 3.246 3.246 0 01-6.492 0z" clip-rule="evenodd"/>
        </svg>
        Embed this chart
    </button>
        
  </div>

<div class="collapse" id="collapseExample" style="position:absolute;bottom:0px;width:100%;">
  <div class="card-x card-body-x" style="background:gainsboro;padding:15px;">
    <button type="button" class="close float-right" aria-label="Close" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
        <span aria-hidden="true">×</span>
    </button>
        <div class="form-group">
            <label for="default_options">Embed link with default settings</label>
            <div class="input-group mb-2">                    
                <input type="text" class="form-control form-control-sm" id="default_options" placeholder="Default options">
                <div class="input-group-append">
                    <div class="input-group-text" style="cursor:pointer">
                        <svg onclick="copy_textbox('default_options')" class="bi bi-clipboard-data" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z" clip-rule="evenodd"/>
                            <path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3z" clip-rule="evenodd"/>
                            <path d="M4 11a1 1 0 112 0v1a1 1 0 11-2 0v-1zm6-4a1 1 0 112 0v5a1 1 0 11-2 0V7zM7 9a1 1 0 012 0v3a1 1 0 11-2 0V9z"/>
                        </svg>
                    </div>
                </div>                    
            </div>
        </div>

<div class="form-group">
            <label for="default_options">Embed link with current settings</label>
            <div class="input-group mb-2">                    
                <input type="text" class="form-control form-control-sm" id="current_options" placeholder="Default options">
                <div class="input-group-append">
                    <div class="input-group-text" style="cursor:pointer">
                        <svg onclick="copy_textbox('current_options')" class="bi bi-clipboard-data" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M4 1.5H3a2 2 0 00-2 2V14a2 2 0 002 2h10a2 2 0 002-2V3.5a2 2 0 00-2-2h-1v1h1a1 1 0 011 1V14a1 1 0 01-1 1H3a1 1 0 01-1-1V3.5a1 1 0 011-1h1v-1z" clip-rule="evenodd"/>
                            <path fill-rule="evenodd" d="M9.5 1h-3a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h3a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5zm-3-1A1.5 1.5 0 005 1.5v1A1.5 1.5 0 006.5 4h3A1.5 1.5 0 0011 2.5v-1A1.5 1.5 0 009.5 0h-3z" clip-rule="evenodd"/>
                            <path d="M4 11a1 1 0 112 0v1a1 1 0 11-2 0v-1zm6-4a1 1 0 112 0v5a1 1 0 11-2 0V7zM7 9a1 1 0 012 0v3a1 1 0 11-2 0V9z"/>
                        </svg>
                    </div>
                </div>                    
            </div>
        </div>
  </div>
</div>

function copy_textbox(textbox_id) 
        {
            /* Get the text field */
            var copyText = document.getElementById(textbox_id);

/* Select the text field */
            copyText.select();
            copyText.setSelectionRange(0, 99999); /*For mobile devices*/

/* Copy the text inside the text field */
            document.execCommand("copy");

/* Alert the copied text */
            alert("Link copied");
        }

function set_embed_links()
        {
            default_link="<div data-pym-src=\"http://census.ihsn.org/visualizations/embed/98\"></div> <script type=\"text/javascript\" src=\"https://pym.nprapps.org/pym.v1.min.js\">"+"</"+"script>";
            current_link='<div data-pym-src="http://census.ihsn.org/visualizations/embed/98?' + $("#filters_form").serialize() + '"></div> <script type="text/javascript" src="https://pym.nprapps.org/pym.v1.min.js">' + "</" + "script>";

$("#default_options").val(default_link);
            $("#current_options").val(current_link);
        }

$( ".btn-chart-options" ).bind( "click", function() {
            set_embed_links();
        });
    </script>
</body>
</html>

Last Updated: 01-10-2024 17:38:25

No. of Visitors: 979430

Website Developed & Maintained by Office of the Registrar General & Census Commissioner, India