Timeline Visualization of Prime Ministers of India

Timeline Visualization of Prime Ministers of India (Google Interactive API)

Created By : Debasis Das (27-Dec-2014)

Using: Google Interactive Timeline API

Indian_PrimeMinisters

http://knowstack.com/webtech/IndianPMTimeline.html

Indian_PrimeMinisters_hoverInfo

http://knowstack.com/webtech/IndianPMTimeline.html

<!DOCTYPE html>
<html>
<head>
<style>
</style>
<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization',
       'version':'1','packages':['timeline']}]}"></script>
<script type="text/javascript">

google.setOnLoadCallback(drawChart);
function drawChart() {
  var container = document.getElementById('example2.1');
  var chart = new google.visualization.Timeline(container);
  var dataTable = new google.visualization.DataTable();

  dataTable.addColumn({ type: 'string', id: 'Term' });
  dataTable.addColumn({ type: 'string', id: 'Name' });
  dataTable.addColumn({ type: 'date', id: 'Start' });
  dataTable.addColumn({ type: 'date', id: 'End' });

  dataTable.addRows([
    [ '1st - Congress', 'Shri Jawaharlal Nehru', new Date(1947, 8, 15), new Date(1964, 5, 27) ],
    [ '2nd - Congress', 'Shri Gulzari Lal Nanda', new Date(1964, 5, 27), new Date(1964, 6, 9) ],
    [ '3rd - Congress', 'Shri Lal Bahadur Shastri', new Date(1964, 6, 9), new Date(1966, 1, 11) ],
    [ '4th - Congress', 'Shri Gulzari Lal Nanda', new Date(1966, 1, 11), new Date(1966, 1, 24) ],
    [ '5th - Congress', 'Smt. Indira Gandhi', new Date(1966, 1, 24), new Date(1977, 3, 24) ],
    [ '6th - Janata Party', 'Shri Morarji Desai', new Date(1977, 3, 24), new Date(1979, 7, 28) ],
    [ '7th - Janata Party', 'Shri Charan Singh', new Date(1979, 7, 28), new Date(1980, 1, 14) ],
    [ '8th - Congress (I)', 'Smt. Indira Gandhi', new Date(1980, 1, 14), new Date (1984,10,31) ],
    [ '9th - Congress (I)', 'Shri Rajiv Gandhi', new Date (1984,10,31), new Date(1989,12,2) ],
    ['10th - Janata Dal', 'Shri Vishwanath Pratap Singh', new Date(1989,12,2),new Date(1990, 11,10)],
    ['11th - Janata Dal (S)','Shri Chandra Shekhar', new Date(1990,11,10), new Date (1991, 6,21)],
    ['12th - Congress (I)','Shri P. V. Narasimha Rao',new Date (1991, 6, 21), new Date (1996, 5,16)],
    ['13th - Bharatiya Janata Party','Shri Atal Bihari Vajpayee', new Date (1996,5,16), new Date (1996,6,1)],
    ['14th - Janata Dal','Shri H. D. Deve Gowda',new Date (1996,6,1), new Date (1997,4,21)],
    ['15th - Janata Dal','Shri Inder Kumar Gujral', new Date (1997,4,21), new Date (1998,3,19)],
    ['16th - Bharatiya Janata Party','Shri Atal Bihari Vajpayee', new Date (1998,3,19),new Date (2004,5,22)],
    ['17th - Indian National Congress', 'Dr. Manmohan Singh', new Date(2004, 5, 22), new Date(2014, 5, 26) ],
    ['18th - Bharatiya Janata Party', 'Shri. Narendra Modi', new Date(2014, 5, 26),new Date() ]
    ]);

var options = {

    timeline: { showRowLabels: true,
    			colorByRowLabel: true
    		  }
  };
  
  chart.draw(dataTable,options);
}
</script>
</head>
<body>
<h2>Prime Ministers of India (Timeline)</h2>
<p>Sourced from: <a href="http://pmindia.gov.in/en/former-prime-ministers/">http://pmindia.gov.in/en/former-prime-ministers/</a></p>
<p>Library Used: <a href = "https://developers.google.com/chart/interactive/docs/gallery/timeline">https://developers.google.com/chart/interactive/docs/gallery/timeline</a></p>
<div id="example2.1" style="width: 1200px; height: 800px;"></div>
</body>
</html>
Posted in CSS, HTML5, User Experience, Web Technology Tagged with: ,

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Recent Posts


Hit Counter provided by technology news