Google Chart Calendar does not work november and december - charts

When I use the Google Chart API with Calendar package, it is not plotting the data when dates are on months November or December.
I am using the Google's code sample available on https://developers.google.com/chart/interactive/docs/gallery/calendar.
And, even using the google sample, if I change the month to November or December (index 10 or 11), the data is not ploted, but the other months are all ok.
Sample code from google:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["calendar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 3, 13), 37032 ],
[ new Date(2012, 3, 14), 38024 ],
[ new Date(2012, 3, 15), 38024 ],
[ new Date(2012, 3, 16), 38108 ],
[ new Date(2012, 3, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 9, 4), 38177 ],
[ new Date(2013, 9, 5), 38705 ],
[ new Date(2013, 9, 12), 38210 ],
[ new Date(2013, 9, 13), 38029 ],
[ new Date(2013, 9, 19), 38823 ],
[ new Date(2013, 9, 23), 38345 ],
[ new Date(2013, 9, 24), 38436 ],
[ new Date(2013, 9, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>


Are you sure the problem is not that the months are not displaying due to size?
Taking the sample code above and changing the months to 10 (November) and 11 (December), it works fine.
See this jsfiddle for the result. You might notice you have to scroll to see the last months. I suspect you had some limitation on your css that cut off the later months.
Code in the jsfiddle:
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1.1", {packages:["calendar"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'date', id: 'Date' });
dataTable.addColumn({ type: 'number', id: 'Won/Loss' });
dataTable.addRows([
[ new Date(2012, 10, 13), 37032 ],
[ new Date(2012, 10, 14), 38024 ],
[ new Date(2012, 10, 15), 38024 ],
[ new Date(2012, 11, 16), 38108 ],
[ new Date(2012, 11, 17), 38229 ],
// Many rows omitted for brevity.
[ new Date(2013, 10, 4), 38177 ],
[ new Date(2013, 10, 5), 38705 ],
[ new Date(2013, 10, 12), 38210 ],
[ new Date(2013, 10, 13), 38029 ],
[ new Date(2013, 11, 19), 38823 ],
[ new Date(2013, 11, 23), 38345 ],
[ new Date(2013, 11, 24), 38436 ],
[ new Date(2013, 11, 30), 38447 ]
]);
var chart = new google.visualization.Calendar(document.getElementById('calendar_basic'));
var options = {
title: "Red Sox Attendance",
height: 350,
};
chart.draw(dataTable, options);
}
</script>
</head>
<body>
<div id="calendar_basic" style="width: 1000px; height: 350px;"></div>
</body>
</html>

Related

Google Combo chart horizontal axis not showing all labels

We implemented the Google Combo chart with some horizontal labels in place. But somehow its not showing the first label. Does anybody have any insight in why its not working?
Example: https://www.cdfund.com/track-record/rendement/nac.html
Code example:
var data = new google.visualization.DataTable();
data.addColumn('date', 'Time of measurement');
data.addColumn('number', 'Benchmark (50%/50% TSX-V/HUI) ');
data.addColumn('number', 'CDF NAC ');
data.addRows([[new Date(2018, 0, 1),42.09,82.47,],[new Date(2018, 1, 1),42.88,82.47,],[new Date(2018, 2, 1),39.33,78.26,],[new Date(2018, 3, 1),38.96,72.98,],[new Date(2018, 4, 1),38.98,77.62,],[new Date(2018, 5, 1),38.64,79.53,],[new Date(2018, 6, 1),37.46,75.12,],[new Date(2018, 7, 1),35.75,72.28,],[new Date(2018, 8, 1),33.72,69.29,],[new Date(2018, 9, 1),33.10,71.27,],[new Date(2018, 10, 1),31.72,68.62,],[new Date(2018, 11, 1),30.54,65.53,],[new Date(2019, 0, 1),31.49,61.23,],[new Date(2019, 1, 1),34.30,64.15,],[new Date(2019, 2, 1),34.11,64.13,],[new Date(2019, 3, 1),34.37,63.52,],[new Date(2019, 4, 1),32.61,58.88,],[new Date(2019, 5, 1),32.38,56.60,],[new Date(2019, 6, 1),35.77,59.77,],[new Date(2019, 7, 1),36.44,62.15,],[new Date(2019, 8, 1),39.01,65.34,],[new Date(2019, 9, 1),35.86,61.54,],[new Date(2019, 10, 1),36.70,60.51,],[new Date(2019, 11, 1),36.03,59.00,],[new Date(2020, 0, 1),39.85,67.53,],[new Date(2020, 1, 1),39.15,66.76,],[new Date(2020, 2, 1),34.93,59.35,],[new Date(2020, 3, 1),28.78,50.16,],[new Date(2020, 4, 1),38.07,69.69,],[new Date(2020, 5, 1),41.80,79.14,],[new Date(2020, 6, 1),45.95,91.51,],[new Date(2020, 7, 1),54.05,104.16,],[new Date(2020, 8, 1),55.26,116.85,],[new Date(2020, 9, 1),51.67,115.98,],[new Date(2020, 10, 1),49.87,111.20,],[new Date(2020, 11, 1),49.84,113.11,],[new Date(2021, 0, 1),55.39,125.83,],[new Date(2021, 1, 1),55.39,117.29,],[new Date(2021, 2, 1),56.02,116.46,],[new Date(2021, 3, 1),54.85,113.09,],[new Date(2021, 4, 1),55.98,123.36,],[new Date(2021, 5, 1),60.81,133.58,],[new Date(2021, 6, 1),55.63,120.68,],[new Date(2021, 7, 1),55.32,118.26,],[new Date(2021, 8, 1),52.44,111.19,],[new Date(2021, 9, 1),48.82,102.59,],[new Date(2021, 10, 1),53.49,113.06,],[new Date(2021, 11, 1),53.79,109.98,],[new Date(2022, 0, 1),54.24,114.31,],[new Date(2022, 1, 1),50.69,106.74,],[new Date(2022, 2, 1),53.79,112.16,],[new Date(2022, 3, 1),58.19,118.96,],[new Date(2022, 4, 1),52.91,113.69,],[new Date(2022, 5, 1),47.26,102.92,],[new Date(2022, 6, 1),40.73,86.32,],[new Date(2022, 7, 1),40.44,95.37,],[new Date(2022, 8, 1),38.20,92.43,],[new Date(2022, 9, 1),37.64,81.94,],[new Date(2022, 10, 1),37.82,81.27,],[new Date(2022, 11, 1),,,]]);
var options = {
hAxis: {
format: 'yyyy',
gridlines: { count: 5, color: 'transparent' },
ticks: [new Date(2018, 3, 1), new Date(2019, 1, 1), new Date(2020, 1, 1), new Date(2021, 1, 1), new Date(2022, 1, 1)],
minorGridlines: { color: 'transparent' },
textStyle: { color: '#000', fontSize: 8 }
},
vAxis: {
minorGridlines: { color: 'transparent' },
gridlines: { count: 4 },
textStyle: { color: '#706345', italic: true, fontSize: 8 },
textPosition: 'in',
},
height: '360',
colors: ['#CB9B01','#AA9870','#C2AE81','#706345','#E2D7BD'],
backgroundColor: '#F4F3F0',
chartArea: { 'width': '90%', 'height': '65%' },
legend: { 'position': 'bottom', padding: 30 },
seriesType: 'area',
series: { 1: { type: 'line' }, 2: { type: 'line' }, 3: { type: 'line' }, 4: { type: 'line' }, 5: { type: 'line' } }
};
Thanks

Google Charts Y-axes on both sides need to uses the same lines

Thanks in Advance...!
Query: I want to display my graph where Y-axes on both sides need to use the same lines and add the 7 days interval in the h-axis.
My code is
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
var report_colors = ["red","yellow","green"];
var report_columns = [
{"label":"Date","type":"string","name":"X"},
{"label":"b","type":"number","name":"b"},
{"label":"d","type":"number","name":"d"},
{"label":"d\/b","type":"number","name":"d\/b"}
];
var list = {"Sep 13, 2021":{"b":0,"b_percent":0,"d":6,"d_percnt":1.79,"bd":0,"bd_percnt":0},"Sep 14, 2021":{"b":0,"b_percent":0,"d":2,"d_percnt":0.6,"bd":0,"bd_percnt":0},"Sep 15, 2021":{"b":0,"b_percent":0,"d":12,"d_percnt":3.57,"bd":0,"bd_percnt":0},"Sep 16, 2021":{"b":0,"b_percent":0,"d":20,"d_percnt":5.95,"bd":0,"bd_percnt":0},"Sep 17, 2021":{"b":0,"b_percent":0,"d":16,"d_percnt":4.76,"bd":0,"bd_percnt":0},"Sep 20, 2021":{"b":5,"b_percent":0.84,"d":7,"d_percnt":2.08,"bd":100,"bd_percnt":100},"Sep 21, 2021":{"b":0,"b_percent":0,"d":43,"d_percnt":12.8,"bd":0,"bd_percnt":0},"Sep 22, 2021":{"b":1,"b_percent":0.17,"d":24,"d_percnt":7.14,"bd":100,"bd_percnt":100},"Sep 23, 2021":{"b":1,"b_percent":0.17,"d":30,"d_percnt":8.93,"bd":100,"bd_percnt":100},"Sep 24, 2021":{"b":9,"b_percent":1.52,"d":19,"d_percnt":5.65,"bd":100,"bd_percnt":100},"Sep 30, 2021":{"b":4,"b_percent":0.67,"d":0,"d_percnt":0,"bd":0,"bd_percnt":0},"Oct 01, 2021":{"b":30,"b_percent":5.05,"d":1,"d_percnt":0.3,"bd":3.33,"bd_percnt":3.33},"Oct 04, 2021":{"b":109,"b_percent":18.35,"d":6,"d_percnt":1.79,"bd":5.5,"bd_percnt":5.5},"Oct 05, 2021":{"b":41,"b_percent":6.9,"d":2,"d_percnt":0.6,"bd":4.88,"bd_percnt":4.88},"Oct 06, 2021":{"b":0,"b_percent":0,"d":5,"d_percnt":1.49,"bd":0,"bd_percnt":0},"Oct 07, 2021":{"b":0,"b_percent":0,"d":1,"d_percnt":0.3,"bd":0,"bd_percnt":0},"Oct 08, 2021":{"b":0,"b_percent":0,"d":4,"d_percnt":1.19,"bd":0,"bd_percnt":0},"Oct 10, 2021":{"b":0,"b_percent":0,"d":4,"d_percnt":1.19,"bd":0,"bd_percnt":0},"Oct 11, 2021":{"b":0,"b_percent":0,"d":19,"d_percnt":5.65,"bd":0,"bd_percnt":0},"Oct 12, 2021":{"b":0,"b_percent":0,"d":7,"d_percnt":2.08,"bd":0,"bd_percnt":0},"Oct 18, 2021":{"b":0,"b_percent":0,"d":1,"d_percnt":0.3,"bd":0,"bd_percnt":0},"Oct 19, 2021":{"b":3,"b_percent":0.51,"d":13,"d_percnt":3.87,"bd":100,"bd_percnt":100},"Oct 21, 2021":{"b":1,"b_percent":0.17,"d":1,"d_percnt":0.3,"bd":100,"bd_percnt":100},"Oct 23, 2021":{"b":4,"b_percent":0.67,"d":0,"d_percnt":0,"bd":0,"bd_percnt":0},"Oct 25, 2021":{"b":0,"b_percent":0,"d":8,"d_percnt":2.38,"bd":0,"bd_percnt":0},"Oct 26, 2021":{"b":1,"b_percent":0.17,"d":1,"d_percnt":0.3,"bd":100,"bd_percnt":100},"Oct 27, 2021":{"b":8,"b_percent":1.35,"d":6,"d_percnt":1.79,"bd":75,"bd_percnt":75},"Oct 28, 2021":{"b":3,"b_percent":0.51,"d":0,"d_percnt":0,"bd":0,"bd_percnt":0},"Nov 01, 2021":{"b":2,"b_percent":0.34,"d":1,"d_percnt":0.3,"bd":50,"bd_percnt":50},"Nov 02, 2021":{"b":7,"b_percent":1.18,"d":0,"d_percnt":0,"bd":0,"bd_percnt":0},"Nov 10, 2021":{"b":0,"b_percent":0,"d":3,"d_percnt":0.89,"bd":0,"bd_percnt":0},"Nov 11, 2021":{"b":0,"b_percent":0,"d":12,"d_percnt":3.57,"bd":0,"bd_percnt":0},"Nov 12, 2021":{"b":0,"b_percent":0,"d":1,"d_percnt":0.3,"bd":0,"bd_percnt":0},"Nov 14, 2021":{"b":0,"b_percent":0,"d":6,"d_percnt":1.79,"bd":0,"bd_percnt":0},"Nov 15, 2021":{"b":209,"b_percent":35.19,"d":14,"d_percnt":4.17,"bd":6.7,"bd_percnt":6.7},"Nov 16, 2021":{"b":20,"b_percent":3.37,"d":2,"d_percnt":0.6,"bd":10,"bd_percnt":10},"Nov 17, 2021":{"b":4,"b_percent":0.67,"d":31,"d_percnt":9.23,"bd":100,"bd_percnt":100},"Nov 19, 2021":{"b":0,"b_percent":0,"d":1,"d_percnt":0.3,"bd":0,"bd_percnt":0},"Nov 22, 2021":{"b":0,"b_percent":0,"d":1,"d_percnt":0.3,"bd":0,"bd_percnt":0},"Nov 23, 2021":{"b":1,"b_percent":0.17,"d":5,"d_percnt":1.49,"bd":100,"bd_percnt":100},"Nov 25, 2021":{"b":127,"b_percent":21.38,"d":1,"d_percnt":0.3,"bd":0.79,"bd_percnt":0.79},"Nov 26, 2021":{"b":2,"b_percent":0.34,"d":0,"d_percnt":0,"bd":0,"bd_percnt":0},"Dec 15, 2021":{"b":1,"b_percent":0.17,"d":0,"d_percnt":0,"bd":0,"bd_percnt":0},"Jan 10, 2022":{"b":1,"b_percent":0.17,"d":0,"d_percnt":0,"bd":0,"bd_percnt":0}};
google.load("visualization", "1", {
packages: ["corechart"]
});
google.setOnLoadCallback(drawChart);
function drawChart() {
var dataArray = [report_columns];
// console.log(report_columns);
$.each(list, function (index, table) {
console.log(table);
dataArray.push([index, table.b ,table.d, table.bd ]);
});
console.log(dataArray);
var data = google.visualization.arrayToDataTable(dataArray);
var formatter = new google.visualization.NumberFormat({
fractionDigits: 2,
suffix: '%'
});
formatter.format(data, 3);
var seriesColors = report_colors;
var options = {
// This line makes the entire category's tooltip active.
focusTarget: 'category',
// Use an HTML tooltip.
tooltip: { isHtml: true },
strictFirstColumnType: true,
width: '100%',
height: '60%',
'legend': {
'position': 'none'
},
gridlines: {
color: 'none'
},
colors: seriesColors,
interpolateNulls: false,
seriesType: 'area',
pointSize: 5,
series: {
2: {
type: 'line',
targetAxisIndex:2
}
},
chartArea: {
left: 40,
right:40,
top: 20,
width: "100%"
},
vAxes: [{
format: 0,
}, {
format: "#'%'",
minValue: 0,
maxValue:100
}],
hAxis: {
format: 'dd/MM/yyyy HH:mm',
title: '',
textStyle: {
color: '#b1b8bf',
fontSize: 10,
fontName: 'Arial',
bold: false,
italic: false
},
titleTextStyle: {
color: '#b1b8bf',
fontSize: 10,
fontName: 'Arial',
bold: false,
italic: false
},
gridlines:{color:'#CEC7CB'},
minorGridlines:{color:'#FFFFFF'},
},
vAxis: {
format: "#'%'",
title: '',
textStyle: {
color: '#b1b8bf',
fontSize: 10,
bold: false,
italic: false
},
titleTextStyle: {
color: '#b1b8bf',
fontSize: 10,
bold: false,
italic: false
},
gridlines:{color:'#CEC7CB'},
minorGridlines:{color:'#FFFFFF'},
}
};
var chart = new google.visualization.AreaChart(document.getElementById("chart"));
chart.draw(data, options);
}
</script>
<div id="chart" style="width: 900px; height: 300px;"></div>

The google chat is not showing last tick on chart

The problem is that last date is not showing as tick even it has value & tick.
google.charts.load('current', {'packages': ['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable(
[
["Month Day", "New User"],
[new Date(2020, 9, 1), 4064],
[new Date(2020, 9, 2), 3415],
[new Date(2020, 9, 3), 2071],
[new Date(2020, 9, 4), 397],
[new Date(2020, 9, 5), 1425],
[new Date(2020, 9, 6), 4848],
[new Date(2020, 9, 7), 667]
]);
var options = {
vAxis: {
gridlines: {
color: "transparent"
},
format: "#,###",
baseline: 0,
},
hAxis: {
format: "dd MMM",
gridlines: {
color: "transparent"
},
"ticks": [
new Date(2020, 9, 1),
new Date(2020, 9, 2),
new Date(2020, 9, 3),
new Date(2020, 9, 4),
new Date(2020, 9, 5),
new Date(2020, 9, 6),
new Date(2020, 9, 7)
]
},
height: 300,
legend: "none",
chartArea: {
height: "85%",
width: "92%",
bottom: "11%",
left: "10%"
},
colors: ["#85C1E9"],
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
If I add extra date for tick it looks odd on chart.
Is there any way to show last tick date on chart xAxis ?
https://jsfiddle.net/hu3wm0jn/

just need to allow enough room on the right side of the chart for the label to appear
see updated chartArea options...
chartArea: {
left: 64,
top: 48,
right: 48,
bottom: 64,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%',
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
["Month Day", "New User"],
[new Date(2020, 9, 1), 4064],
[new Date(2020, 9, 2), 3415],
[new Date(2020, 9, 3), 2071],
[new Date(2020, 9, 4), 397],
[new Date(2020, 9, 5), 1425],
[new Date(2020, 9, 6), 4848],
[new Date(2020, 9, 7), 667]
]);
var options = {
vAxis: {
gridlines: {
color: "transparent"
},
format: "#,###",
baseline: 0,
},
hAxis: {
format: "dd MMM",
gridlines: {
color: "transparent"
},
ticks: [
new Date(2020, 9, 1),
new Date(2020, 9, 2),
new Date(2020, 9, 3),
new Date(2020, 9, 4),
new Date(2020, 9, 5),
new Date(2020, 9, 6),
new Date(2020, 9, 7)
]
},
legend: "none",
chartArea: {
left: 64,
top: 48,
right: 48,
bottom: 64,
height: '100%',
width: '100%'
},
height: '100%',
width: '100%',
colors: ["#85C1E9"]
};
var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
chart.draw(data, options);
window.addEventListener('resize', function () {
chart.draw(data, options);
});
});
html, body {
height: 100%;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
#chart_div {
min-height: 500px;
height: 100%;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How do I define a different tooltip color per each serie on a line chart with google charts?

How do I define a different tooltip color per each serie on a line chart with google charts? I would like one to be green and the other one black but not sure how to associate the colors to the series.
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {packages:["corechart"]});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
// it must follow data - tooltip - data tooltip
data.addColumn('number', 'General');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn('number', 'Filter');
data.addColumn({type: 'string', role: 'tooltip'});
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
[new Date(2016, 06, 16), 29.0, '29.0', 28.0, '28.0', ''],
[new Date(2016, 07, 13), 12.2, '12.2', 10.2, '10.2', ''],
[new Date(2016, 08, 10), 5.1, '5.1', 3.1, '3.1', ''],
[new Date(2016, 09, 08), 4.9, '4.9', 4.0, '4.0', ''],
[new Date(2016, 10, 05), 6.2, '6.2', 4.2, '4.2', ''],
[new Date(2016, 11, 03), 6.1, '6.1', 28.0, '28.0', ''],
[new Date(2016, 11, 31), 24.7, '24.7', 8.0, '8.0', ''],
[new Date(2017, 00, 28), 24.8, '24.8', 8.0, '8.0', ''],
[new Date(2017, 01, 25), 6.1, '6.1', 2.0, '2.0', ''],
[new Date(2017, 02, 25), 5.3, '5.3', 8.0, '8.0', ''],
[new Date(2017, 03, 22), 4.0, '4.0', 8.0, '8.0', ''],
[new Date(2017, 04, 20), 4.0, '4.0', 2.0, '2.0', '4.0']
]);
var options = {
legend: 'none',
pointSize: 7,
tooltip: {isHtml: true}, // CSS styling affects only HTML tooltips.
chart: {
title: '',
subtitle: ''
},
width: 650,
height: 230,
chartArea: {'width': '92%', 'height': '88%'},
hAxis: {
format: 'M/d/yy',
gridlines: {color: 'none'},
ticks: [new Date(2016, 06, 16), new Date(2016, 07, 13), new Date(2016, 08, 10), new Date(2016, 09, 08), new Date(2016, 10, 05), new Date(2016, 11, 03), new Date(2016, 11, 31), new Date(2017, 00, 28), new Date(2017, 01, 25), new Date(2017, 02, 25), new Date(2017, 03, 22), new Date(2017, 04, 20), ],
textStyle: {
color: 'black', // any HTML string color ('red', '#cc00cc')
fontName: 'PT Sans', // i.e. 'Times New Roman'
fontSize: 10 // 12, 18 whatever you want (don't specify px)
}
},
vAxis: {
format: 'decimal',
gridlines: {color: 'none'},
ticks: [0,5,10,15,20,25,30],
textStyle: {
color: 'black', // any HTML string color ('red', '#cc00cc')
fontName: 'PT Sans', // i.e. 'Times New Roman'
fontSize: 10 // 12, 18 whatever you want (don't specify px)
},
minValue: 0
},
colors: ['#000000','#39b54a']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<style>
div.google-visualization-tooltip { background: #000; font-family: 'PT Sans', sans-serif!important; text-align: center!important; padding: 0px!important; }
div.google-visualization-tooltip > ul > li > span {color: #FFF!important; font-size: 12px!important; text-align: right!important; margin: 0px!important; }
</style>
<div id="chart_div" style="width: 650px; height: 230px;"></div>
</body>
</html>

to use html / css styling on the tooltips, two things must be in place...
first, the chart option, which you have...
tooltip: {isHtml: true}
also need to set html property on the tooltip column...
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
then you can use html for the tooltip column values...
see following working snippet...
google.charts.load('current', {
callback: drawChart,
packages: ['corechart']
});
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('date', 'Day');
data.addColumn('number', 'General');
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
data.addColumn('number', 'Filter');
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
data.addColumn({type: 'string', role: 'annotation'});
data.addRows([
[new Date(2016, 06, 16), 29.0, '<div class="general">29.0</div>', 28.0, '<div class="filter">28.0</div>', null],
[new Date(2016, 07, 13), 12.2, '<div class="general">12.2</div>', 10.2, '<div class="filter">10.2</div>', null],
[new Date(2016, 08, 10), 5.1, '<div class="general">5.1</div>', 3.1, '<div class="filter">3.1</div>', null],
[new Date(2016, 09, 08), 4.9, '<div class="general">4.9</div>', 4.0, '<div class="filter">4.0</div>', null],
[new Date(2016, 10, 05), 6.2, '<div class="general">6.2</div>', 4.2, '<div class="filter">4.2</div>', null],
[new Date(2016, 11, 03), 6.1, '<div class="general">6.1</div>', 28.0, '<div class="filter">28.0</div>', null],
[new Date(2016, 11, 31), 24.7, '<div class="general">24.7</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 00, 28), 24.8, '<div class="general">24.8</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 01, 25), 6.1, '<div class="general">6.1</div>', 2.0, '<div class="filter">2.0</div>', null],
[new Date(2017, 02, 25), 5.3, '<div class="general">5.3</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 03, 22), 4.0, '<div class="general">4.0</div>', 8.0, '<div class="filter">8.0</div>', null],
[new Date(2017, 04, 20), 4.0, '<div class="general">4.0</div>', 2.0, '<div class="filter">2.0</div>', '4.0']
]);
var options = {
legend: 'none',
pointSize: 7,
tooltip: {isHtml: true},
chart: {
title: '',
subtitle: ''
},
width: 650,
height: 230,
chartArea: {width: '92%', height: '88%'},
hAxis: {
format: 'M/d/yy',
gridlines: {color: 'none'},
ticks: [new Date(2016, 06, 16), new Date(2016, 07, 13), new Date(2016, 08, 10), new Date(2016, 09, 08), new Date(2016, 10, 05), new Date(2016, 11, 03), new Date(2016, 11, 31), new Date(2017, 00, 28), new Date(2017, 01, 25), new Date(2017, 02, 25), new Date(2017, 03, 22), new Date(2017, 04, 20), ],
textStyle: {
color: 'black',
fontName: 'PT Sans',
fontSize: 10
}
},
vAxis: {
format: 'decimal',
gridlines: {color: 'none'},
ticks: [0,5,10,15,20,25,30],
textStyle: {
color: 'black',
fontName: 'PT Sans',
fontSize: 10
},
minValue: 0
},
colors: ['#000000', '#39b54a']
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
.general {
background-color: #000000;
color: #ffffff;
padding: 4px;
}
.filter {
background-color: #39b54a;
color: #ffffff;
padding: 4px;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

How can I highlight the current date in google timeline chart?

I have a google timeline chart. I need to highlight the block in which the current date pass through. How can I implement this stuff? This is my code. Her I need to highlight 'F' timeline which is passing through the current date.
function drawChart() {
var container = document.getElementById('Gateways');
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Room' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
dataTable.addRows([
[ '1', 'A', new Date(2011, 3, 30), new Date(2012, 2, 4) ],
[ '1', 'B', new Date(2012, 2, 4), new Date(2013, 3, 30) ],
[ '1', 'C', new Date(2013, 3, 30), new Date(2014, 2, 4) ],
[ '1', 'D', new Date(2014, 2, 4), new Date(2015, 2, 4) ],
[ '1', 'E', new Date(2015, 3, 30), new Date(2016, 2, 4) ],
[ '1', 'F', new Date(2016, 2, 4), new Date(2017, 2, 4) ],
[ '1', 'G', new Date(2017, 2, 4), new Date(2018, 2, 4) ],
[ '1', 'H', new Date(2018, 2, 4), new Date(2019, 2, 4) ],
[ '1', 'I', new Date(2019, 2, 4), new Date(2020, 2, 4) ],
[ '1', 'J', new Date(2020, 2, 4), new Date(2021, 2, 4) ]]);
var options = {
timeline: { showRowLabels: false },
avoidOverlappingGridLines: false
};
chart.draw(dataTable, options);
}