Google Customize Timelines Charts

Google Customize Timelines Charts

Today, We want to share with you Google Customize Timelines Charts.
In this post we will show you Google Customize the Chart Timeline, hear for Add a Timeline to Your Website with Google Charts we will give you demo and example for implement.
In this post, we will learn about Timeline Google Chart with customized tooltip with an example.

A timeline tools is a one type of the chart that depicts new how a set of resources data are used over time and display. and you can custom create a new timeline chart Ex. project Management System.

  PHP Laravel create Custom helper

Google Charts Types

  • Google Chart Gallery
  • Google Annotation Charts
  • Google Area Charts
  • Google Bar Charts
  • Google Bubble Charts
  • Google Calendar Charts
  • Google Candlestick Charts
  • Google Column Charts
  • Google Combo Charts
  • Google Diff Charts
  • Google Donut Charts
  • Google Gantt Charts
  • Google Gauge Charts
  • Google GeoCharts
  • Google Histograms
  • Google Intervals
  • Google Line Charts
  • Google Maps
  • Google Org Charts
  • Google Pie Charts
  • Google Sankey Diagrams
  • Google Scatter Charts
  • Google Stepped Area Charts
  • Google Table Charts
  • Google Timelines
  • Google Tree Map Charts
  • Google Trendlines
  • Google Waterfall Charts
  • Google Word Trees
  • Google Miscellaneous Examples

Google Charts – Basic Timelines Chart Example

Include Script

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="css/style.css">
<script src='https://www.google.com/jsapi'></script>
<script src="js/index.js"></script>

index.html

  <h2>Google Charts Simple Demo: Default Timeline Example</h2>
<div id="timelineHolder" class="th"></div>
<p class="p">Demo by AAngularjs King. <a href="" target="_blank">view Demo</a>.</p>

index.js

//google libs load
google.load('visualization', '1.0', { packages:["timeline"] });

//google with Call back function
google.setOnLoadCallback(start);

//start function dataTable
function start() {
  var timelineHolder = document.getElementById("timelineHolder");
  var timeline = new google.visualization.Timeline(timelineHolder);
  var dataTable = prepareDataTable();

  timeline.draw(dataTable);
}

//function call prepareDataTable
function prepareDataTable() {
  var dataTable = new google.visualization.DataTable();

  // simple Add columns
  dataTable.addColumn({ type: 'string', id: 'Label'});
  dataTable.addColumn({ type: 'string', id: 'Place'});
  dataTable.addColumn({ type: 'date', id: 'Arrival Date'});
  dataTable.addColumn({ type: 'date', id: 'Departure Date'});

  //Simple Add Rows
  dataTable.addRow(['1', 'Laravel', new Date(2014, 0, 18), new Date(2014, 1, 22)]);
  dataTable.addRow(['2', 'Angularjs', new Date(2014, 3, 21), new Date(2014, 6, 5)]);
  dataTable.addRow(['3', 'PHP', new Date(2014, 6, 23), new Date(2014, 7, 28)]);
  dataTable.addRow(['4', 'HTML', new Date(2014, 10, 6), new Date(2014, 11, 2)]);

  return dataTable;
}

View Demo

  Google adsense Remove Yellow Background box in wordpress

We hope you get an idea about Google Customize Timelines Charts
We would like to have feedback on my Information blog .
Your valuable any feedback, Good question, Inspirational Quotes, or Motivational comments about this article are always welcome.
If you liked this post, Please don’t forget to share this as Well as Like FaceBook Page.

We hope This Post can help you…….Good Luck!.

Leave a Reply

avatar
  Subscribe  
Notify of