SHARE
TWEET

Untitled

a guest Oct 21st, 2019 77 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <script type="text/javascript">
  2.  
  3. var dataTable;
  4. var chart;
  5.  
  6. google.charts.load('visualization', '1.1', {'packages':['timeline']});
  7.  
  8. google.charts.setOnLoadCallback(drawChart);
  9.  
  10. function drawChart() {
  11.  
  12.     dataTable = new google.visualization.DataTable();
  13.  
  14.     dataTable.addColumn({ type: 'string', id: 'Publisher' });
  15.     dataTable.addColumn({ type: 'string', id: 'Template' });
  16.     dataTable.addColumn({ type: 'string', role: 'style' });
  17.     dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
  18.     dataTable.addColumn({ type: 'date', id: 'Start' });
  19.     dataTable.addColumn({ type: 'date', id: 'End' });
  20.     dataTable.addRows([
  21.            
  22.         [ 'Marks & Spencer', 'Rates 1% - 2%', '#419bf9', buildTooltip('Rates: 1% - 2%', '10/02/2019', '20/02/2019', '01/02/2019'), new Date(2019, 1, 10), new Date(2019, 1, 20)],
  23.         [ 'Marks & Spencer', 'Rates 3% - 4%', '#00c637', buildTooltip('Rates: 3% - 4%', '20/02/2019', '25/02/2019', '01/02/2019'), new Date(2019, 1, 20), new Date(2019, 1, 25)],
  24.         [ 'Marks & Spencer', 'Rates 4% - 5%', '#4756d5', buildTooltip('Rates: 4% - 5%', '25/02/2019', '02/03/2019', '01/02/2019'), new Date(2019, 1, 25), new Date(2019, 1, 30)],
  25.         [ 'Marks & Spencer', 'Rates 1% - 2%', '#fab418', buildTooltip('Rates: 1% - 2%', '02/03/2019', '15/03/2019', '01/02/2019'), new Date(2019, 1, 30), new Date(2019, 2, 15)],
  26.         [ 'Marks & Spencer', 'Rates 1% - 2%', '#de0833', buildTooltip('Rates 1% - 2%', '15/03/2019', 'Ongoing', '15/03/2019'), new Date(2019, 2, 15), new Date(2019, 2, 30)]
  27.       ]);
  28.  
  29.     var options = {
  30.         tooltip: { isHtml: true },
  31.         timeline: { groupByRowLabel: true },
  32.     };
  33.  
  34.     chart = new google.visualization.Timeline(document.getElementById('timeline-chart'));
  35.  
  36.     google.visualization.events.addListener(chart, 'select', selectHandler);
  37.  
  38.     chart.draw(dataTable, options);
  39.  
  40.     function selectHandler() {
  41.         $('#ratesModal').modal('show');
  42.         $("div.google-visualization-tooltip").addClass("hidden-normal");
  43.     };
  44.  
  45.     function buildTooltip(templateName, startDate, endDate, lastModified) {
  46.       return '<div class="chart-tooltip">' +
  47.              '<p><b>' + templateName + '</b></p>' +
  48.              '<hr>' +
  49.              '<p class="pull-left"><b>Start:</b><br>'
  50.              + startDate + ' 00:00 </p>' +
  51.              '<p class="pull-right"><b>End:</b><br>'
  52.              + endDate + ' 00:00 </p>' +
  53.              '<hr>' +
  54.              '<p class="text-light">Last modified: ' + lastModified + ' 00:00</p>' +
  55.              '<div/>';
  56.     }
  57. }
  58. </script>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top