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

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);
}

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

2 level mongo $group - aggregation

Been trying to read the docs and examples to try and figure this out but it's proving difficult (especially as a noobie with little idea behind what all the different terms mean).
We have a couple of collections and are trying to quantify/chart some data from it. We have managed to massage the data via aggregation stages so that the documents look like this:
[
{
_id: 1,
sender: 'foo',
messages: [
{_id: 10, text: 'hello', recipientCount: 3, sentAt: '2019-10'},
{_id: 11, text: 'hello', recipientCount: 3, sentAt: '2019-10'},
{_id: 12, text: 'hello', recipientCount: 3, sentAt: '2019-10'},
]
},
{
_id: 2,
sender: 'bar',
messages: [
{_id: 13, text: 'hello', recipientCount: 3, sentAt: '2018-10'},
{_id: 14, text: 'hello', recipientCount: 3, sentAt: '2018-10'},
{_id: 15, text: 'hello', recipientCount: 3, sentAt: '2018-10'},
]
},
{
_id: 3,
sender: 'foo',
messages: [
{_id: 16, text: 'hello', recipientCount: 13, sentAt: '2020-10'},
{_id: 17, text: 'hello', recipientCount: 13, sentAt: '2020-10'},
{_id: 18, text: 'hello', recipientCount: 13, sentAt: '2020-10'},
]
},
{
_id: 4,
sender: 'foo',
messages: [
{_id: 19, text: 'hello', recipientCount: 3, sentAt: '2021-10'},
{_id: 110, text: 'hello', recipientCount: 3, sentAt: '2021-10'},
{_id: 111, text: 'hello', recipientCount: 3, sentAt: '2021-10'},
]
},
{
_id: 5,
sender: 'bar',
messages: [
{_id: 112, text: 'hello', recipientCount: 1, sentAt: '2021-4'},
{_id: 113, text: 'hello', recipientCount: 1, sentAt: '2021-4'},
{_id: 114, text: 'hello', recipientCount: 1, sentAt: '2021-4'},
]
},
{
_id: 6,
sender: 'foo',
messages: [
{_id: 115, text: 'hello', recipientCount: 4, sentAt: '2020-8'},
{_id: 116, text: 'hello', recipientCount: 4, sentAt: '2020-8'},
{_id: 117, text: 'hello', recipientCount: 4, sentAt: '2020-8'},
]
},
{
_id: 7,
sender: 'cap',
messages: [
{_id: 118, text: 'hello', recipientCount: 7, sentAt: '2018-6'},
{_id: 119, text: 'hello', recipientCount: 7, sentAt: '2018-6'},
{_id: 120, text: 'hello', recipientCount: 7, sentAt: '2018-6'},
]
},
{
_id: 8,
sender: 'cap',
messages: [
{_id: 121, text: 'hello', recipientCount: 12, sentAt: '2019-11'},
{_id: 122, text: 'hello', recipientCount: 12, sentAt: '2019-11'},
{_id: 123, text: 'hello', recipientCount: 12, sentAt: '2019-11'},
]
},
{
_id: 9,
sender: 'foo',
messages: [
{_id: 124, text: 'hello', recipientCount: 2, sentAt: '2020-12'},
{_id: 125, text: 'hello', recipientCount: 2, sentAt: '2020-12'},
{_id: 126, text: 'hello', recipientCount: 2, sentAt: '2020-12'},
]
},
{
_id: 10,
sender: 'foo',
messages: [
{_id: 127, text: 'hello', recipientCount: 1, sentAt: '2021-1'},
{_id: 128, text: 'hello', recipientCount: 1, sentAt: '2021-1'},
{_id: 129, text: 'hello', recipientCount: 1, sentAt: '2021-1'},
]
},
{
_id: 11,
sender: 'cap',
messages: [
{_id: 130, text: 'hello', recipientCount: 2, sentAt: '2019-2'},
{_id: 131, text: 'hello', recipientCount: 2, sentAt: '2019-2'},
{_id: 132, text: 'hello', recipientCount: 2, sentAt: '2019-2'},
]
},
]
We want output that will allow us to create a table showing the total recipientCount grouped by sender and sentAt. I.e. - Something along the lines of:
2018-1 2018-2 2018-3 2018-4
foo 3 4 31 18
bar 7 24 11 17
cap 19 6 23 75
What would be the next (and final?) stage of this aggregation pipeline?
Thanks in advance!

Just unwind the messages array and group on sender and sentAt.Like this:
db.collection.aggregate([
{
"$unwind": "$messages"
},
{
"$group": {
"_id": {
sender: "$sender",
sentAt: "$messages.sentAt"
},
"count": {
"$sum": "$messages.recipientCount"
}
}
},
{
"$project": {
"sender": "$_id.sender",
"sentAt": "$_id.sentAt",
"count": 1,
"_id": 0
}
}
])
Playground link.

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>

Google Charts no gridlines but I want the ticks to have a black marker

I would like to remove the gridlines of the hAxis but with keeping the ticks' little black marker.
My code looks like this:
var optionsSmall = {
colors: ['#4572A7'],
hAxis: { minorGridlines: { color: '#000' }, gridlines: { color: 'transparent' }, format:'MM/d/y', textStyle: { fontSize: 9 } },
series: { 0: { targetAxisIndex: 1, }, 1: { targetAxisIndex: 0, type: 'line' } },
vAxes: {
0: { gridlines: { count: 0 }, textStyle: { fontSize: 9 } },
1: { gridlines: { count: 8 }, textStyle: { fontSize: 9 } },
},
chartArea:{right:80,top:22, bottom:50, width:'100%',height:'100%'},
tooltip: { trigger: 'none', showColorCode: false }
};
I'm attaching a picture to represent what I'd like to achieve. The black line is only this thick for dramatisation purposes. Sorry if it's a duplicate, my english is not that perfect to know the right word for that little marker.

you could use a line series with values set to zero,
that has blank 'line' annotations
fontSize will control the length of the "tick"
annotations: {style: 'line', textStyle: {fontSize: 10}},
you can "turn off" the extra series with...
colors: ['transparent', ...]
0: {enableInteractivity: false, visibleInLegend: false}
see following working snippet...
google.charts.load('current', {
packages: ['corechart']
}).then(function () {
var data = google.visualization.arrayToDataTable([
['x', 'y0', {role: 'annotation', type: 'string'}, 'y1'],
[new Date(2017, 6, 6, 1), 0, '', 1000],
[new Date(2017, 6, 6, 2), 0, '', 2000],
[new Date(2017, 6, 6, 3), 0, '', 3000],
[new Date(2017, 6, 6, 4), 0, '', 4000],
[new Date(2017, 6, 6, 5), 0, '', 5000],
[new Date(2017, 6, 6, 6), 0, '', 6000]
]);
var optionsSmall = {
annotations: {style: 'line', textStyle: {fontSize: 10}},
colors: ['transparent', '#4572A7'],
hAxis: {minorGridlines: {color: '#000'}, gridlines: {color: 'transparent'}, format:'MM/d/y', textStyle: {fontSize: 9}},
pointSize: 0,
series: {
0: {enableInteractivity: false, visibleInLegend: false},
1: {targetAxisIndex: 1},
2: {targetAxisIndex: 0, type: 'line'}
},
vAxis: {viewWindow: {min: 0}},
vAxes: {
0: {gridlines: {count: 0}, textStyle: {fontSize: 9}},
1: {gridlines: {count: 8}, textStyle: {fontSize: 9}},
},
chartArea:{right:80,top:22, bottom:50, width:'100%',height:'100%'},
tooltip: {trigger: 'none', showColorCode: false}
};
var chart = new google.visualization.LineChart(document.getElementById('chart'));
chart.draw(data, optionsSmall);
});
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart"></div>

Google Chart Calendar does not work november and december

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>