<script type="text/javascript">

var dataTable;
var chart;

google.charts.load('visualization', '1.1', {'packages':['timeline']});

google.charts.setOnLoadCallback(drawChart);

function drawChart() {

    dataTable = new google.visualization.DataTable();

    dataTable.addColumn({ type: 'string', id: 'Publisher' });
    dataTable.addColumn({ type: 'string', id: 'Template' });
    dataTable.addColumn({ type: 'string', role: 'style' });
    dataTable.addColumn({'type': 'string', 'role': 'tooltip', 'p': {'html': true}});
    dataTable.addColumn({ type: 'date', id: 'Start' });
    dataTable.addColumn({ type: 'date', id: 'End' });
    dataTable.addRows([

        [ '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)],
        [ '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)],
        [ '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)],
        [ '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)],
        [ '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)]
      ]);

    var options = {
        tooltip: { isHtml: true },
        timeline: { groupByRowLabel: true },
    };

    chart = new google.visualization.Timeline(document.getElementById('timeline-chart'));

    google.visualization.events.addListener(chart, 'select', selectHandler);

    chart.draw(dataTable, options);

    function selectHandler() {
        $('#ratesModal').modal('show');
        $("div.google-visualization-tooltip").addClass("hidden-normal");
    };

    function buildTooltip(templateName, startDate, endDate, lastModified) {
      return '<div class="chart-tooltip">' +
             '<p><b>' + templateName + '</b></p>' +
             '<hr>' +
             '<p class="pull-left"><b>Start:</b><br>'
             + startDate + ' 00:00 </p>' +
             '<p class="pull-right"><b>End:</b><br>'
             + endDate + ' 00:00 </p>' +
             '<hr>' +
             '<p class="text-light">Last modified: ' + lastModified + ' 00:00</p>' +
             '<div/>';
    }
}
</script>