2 level mongo $group - aggregation - mongodb

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.

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

How to group weekly data in it respective months and plot using Apache Echarts

I have the weekly avg from last 5 years, last year, and the year to date.
I would like to show them in a line graph, but showing the respective months in the xaxis...
for example and based on this year:
January has 4 weeks, so xaxis shows jan and there are 4 marks in the chart representing weeks 1,2,3 and 4;
February also has 4 weeks, so xaxis shows feb and there are 3 marks in the chart representing week 5,6,7 and 8;
and so on;
i'm using:
VueJs: 2.6.10
Echarts: 4.9.0
here is my code:
// var motnhNames = [
// 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
// 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'
// ]
var monthNames = [
1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38,
39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52
]
var options = {
title: {
text: 'My data'
},
tooltip: {
trigger: 'axis'
},
legend: {
data: ['5 Years', 'Last Year', 'YTD']
},
toolbox: {
show: true,
feature: {
dataZoom: {
yAxisIndex: 'none'
},
dataView: {
readOnly: false
},
magicType: {
type: ['line', 'bar']
},
restore: {},
saveAsImage: {}
}
},
xAxis: {
type: 'category',
boundaryGap: false,
data: monthNames
},
yAxis: {
type: 'value',
},
series: [{
name: '5 Years',
type: 'line',
data: [
19, 46, 34, 33, 16, 3, 6, 33, 20,
25, 5, 29, 48, 36, 1, 28, 48, 1,
34, 22, 50, 38, 11, 11, 37, 11, 28,
15, 14, 5, 7, 2, 46, 3, 12, 10,
20, 50, 39, 17, 50, 7, 27, 6, 5,
11, 35, 25, 50, 18, 40, 30, 35
],
lineStyle: {
type: 'dashed',
width: 5
}
},
{
name: 'Last Year',
type: 'line',
data: [
17, 48, 30, 6, 29, 27, 8, 50, 28,
34, 38, 48, 28, 41, 24, 27, 15, 17,
13, 50, 9, 15, 18, 41, 43, 49, 19,
1, 22, 20, 27, 1, 18, 26, 48, 17,
25, 38, 1, 29, 28, 1, 42, 21, 7,
8, 6, 6, 47, 50, 6, 46, 41
],
lineStyle: {
type: 'dotted',
width: 5
}
},
{
name: 'YTD',
type: 'line',
data: [
17, 48, 30, 6, 29, 27, 8, 50, 28,
34, 38, 48, 28, 41, 24, 27, 15, 17,
13, 50, 9, 15, 18, 41, 43, 49, 19,
1, 22, 20, 27, 1, 18, 26, 48, 17,
25, 38, 1, 29, 28, 1, 42, 21, 7,
8, 6, 6, 47, 50, 6, 46
],
lineStyle: {
type: 'solid',
width: 5
}
}
]
};
thanks in advance
[UPDATE 1]
I added a function that translate the week number to the respective month:
getDateOfWeek(week: number, year: number): string {
let date = (1 + (week - 1) * 7);
let dateOfYear = new Date(year, 0, date)
let month = dateOfYear.toLocaleString('pt-BR', { month: 'short' });
month = month.charAt(0).toUpperCase() + month.slice(1).replace('.', '')
return month;
}
also added a axisLabel:
options: {
...,
axisLabel: {
formatter: (param: number) => {
return this.getDateOfWeek(param, 2021)
},
},
...,
}
Now i have the month name on xaxis as expected... Only need to suppress duplicated names or maybe define a limit for 12 ticks.
I've tried to use xaxis.splitNumber property, but as the docs says, it is not allowed for category axis...
I was wondering, if i could change the week number to a date object, like:
firstWeek = '2021-01-01'
secondWeek = '2021-01-08'
should i change it to time series and work with real dates on X Axis?
not sure if it would solve the problem or bring another :|
here is the result so far:
Solved adding a new xaxis layer and hide the first one...
xAxis: [
{
type: "category",
boundaryGap: false,
data: this.generateData(false, 51),
axisLabel: {
formatter: (param) => {
return this.getMonthFromWeek(param, 2021);
}
},
show: false
},
{
position: "bottom",
type: "category",
data: [
"Jan",
"Fev",
"Mar",
"Abr",
"Mai",
"Jun",
"Jul",
"Ago",
"Set",
"Out",
"Nov",
"Dez"
],
xAxisIndex: 2
}
],
here is sandbox code result!

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>

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

How to put date into drilldown chart title based on drilled point x value (datetime)..?

My drilldown works fine, yet I can't figure out how to make my drilldown chart title show the drilled point x value (datetime) in the format "Sales of YYYY-MM-DD".
Going back to initial chart title "Sales" (on drillup event) works good.
$(function () {
Highcharts.setOptions({
global: {
useUTC: false,
timeZoneOffset: -180
},
lang: {
drillUpText: ' < Back '
}
});
// Create the chart
$('#container').highcharts({
credits: {
enabled: false
},
xAxis: [{
id: 0,
minorTickLength: 0,
labels: {
y: 15,
format: '{value:%e %b}',
zIndex: 0
},
tickPixelInterval: 10,
tickWidth: 0,
title: {
text: null
},
tickColor: '#e0e0e0',
pointPadding: 0.05,
tickmarkPlacement: 'on',
type: 'datetime'
},{
id: 1,
minorTickLength: 0,
labels: {
y: 15,
zIndex: 0
},
tickPixelInterval: 2,
tickWidth: 0,
title: {
text: null
},
tickColor: '#e0e0e0',
pointPadding: 0.2,
tickmarkPlacement: 'on',
type: 'category',
lineWidth: 0
}],
yAxis: {
gridLineWidth: 0,
gridLineColor: '#e0e0e0',
labels: {
y: 0,
x: 0,
overflow: 'justify',
enabled: false,
maxStaggerLines: 0,
align: 'center'
},
title: {
margin: 0,
text: null
},
gridLineInterpolation: null
},
tooltip: {
enabled: false,
shared: true,
xDateFormat: '%e %b',
valueSuffix: ' Lt',
borderColor: 'null',
borderRadius: 10
},
plotOptions: {
areaspline: {
lineColor: '#c0c0c0',
marker: {
enabled: false,
fillColor: '#e0e0e0',
radius: 3,
lineWidth: 1,
lineColor: '#c0c0c0'
},
lineWidth: 1,
states: {
hover: {
marker: {
radius: 3,
lineWidth: 1
}
}
}
},
column: {
allowPointSelect: false,
cursor: 'pointer',
dataLabels: {
enabled: true,
inside: false,
overflow: 'none',
y: -10,
x: 0,
verticalAlign: 'middle',
padding: 0,
}
}
},
chart: {
events: {
drilldown: function(){
UpdateTitle('Sales of '+this)
},
drillup: function(){
UpdateTitle('Sales')
}
},
spacingBottom: 20,
type: 'column',
borderRadius: 2,
spacingTop: 0,
width: 1012,
marginLeft: 0,
pacingRight: 0,
marginBottom: 40,
marginRight: 0,
marginTop: 20,
height: 180,
spacingLeft: 0
},
title: {
margin: 10,
y: 15,
text: 'Sales',
x: 20,
align: 'left',
},
Exporting: {
scale: 1,
buttons: {
contextButton: {
enabled: false
}
},
enabled: false
},
legend: {
enabled: false,
symbolWidth: 12
},
series: [ {
index: 1,
type: 'column',
color: '#30bf09',
name: 'Sales',
data: [{
x: 1399410000000,
y: 16675,
drilldown: 'day01'
},{
x: 1399496400000,
y: 6906,
drilldown: 'day02'
},{
x: 1399582800000,
y: 5290,
drilldown: 'day03'
},{
x: 1399669200000,
y: 764,
drilldown: 'day04'
},{
x: 1399755600000,
y: 248,
drilldown: 'day05'
},{
x: 1399842000000,
y: 8585,
drilldown: 'day06'
},{
x: 1399928400000,
y: 5176,
drilldown: 'day07'
},{
x: 1400014800000,
y: 10836,
drilldown: 'day08'
},{
x: 1400101200000,
y: 13217,
drilldown: 'day09'
},{
x: 1400187600000,
y: 7213,
drilldown: 'day10'
},{
x: 1400274000000,
y: 711,
drilldown: 'day11'
},{
x: 1400360400000,
y: 1038,
drilldown: 'day12'
},{
x: 1400446800000,
y: 6612,
drilldown: 'day13'
},{
x: 1400533200000,
y: 14496,
drilldown: 'day14'
}]
},{
index: 0,
type: 'areaspline',
color: '#e0e0e0',
name: 'Planas',
data: [
[1399410000000, 2930],
[1399496400000, 2930],
[1399582800000, 2930],
[1399669200000, 0],
[1399755600000, 0],
[1399842000000, 2930],
[1399928400000, 2930],
[1400014800000, 2930],
[1400101200000, 2930],
[1400187600000, 2930],
[1400274000000, 0],
[1400360400000, 0],
[1400446800000, 2930],
[1400533200000, 2930]
]
}],
drilldown: {
activeAxisLabelStyle: {
textDecoration: 'none',
fontWeight: 'regular',
color: '7f7f7f'
},
activeDataLabelStyle: {
textDecoration: 'none',
fontWeight: 'semi-bold',
color: '4c4c4c'
},
drillUpButton: {
relativeTo: 'spacingBox',
position: {
align: 'right',
x: 0,
y: 0,
verticalAlign: 'top'
}
},
series: [{
id: 'day01',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Presta', 2000],
['Export', 600],
['ESET', 75],
['SoftMak', 75],
['Google', 750],
['Blancco', 0],
['Axence', 200],
['Kiti', 1500],
['...', 0],
['...', 0],
['Box', 550],
['Nuoma', 75]
]
},{
id: 'day02',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftM', 75],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ]
]
},{
id: 'day03',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day04',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day05',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day06',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day07',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day08',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day09',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day10',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day11',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day12',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day13',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75]
]
},{
id: 'day14',
xAxis: 1,
data: [
['ESET', 10000],
['OERP', 4000],
['Google', 2000],
['Export', 600],
['SoftMaker', 75],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ],
[ , ]
]}
]
}
})
var chart = $('#container').highcharts();
function UpdateTitle(argument1) {
chart.setTitle({text: argument1})
}
In a drilldown event you have access to clicked point: e.point. For example to get timestamp of clicked point use e.point.x. Now simply parse that timestamps to required format and it should work. See: http://jsfiddle.net/nJFZN/
drilldown: function (e) {
UpdateTitle('Sales of ' + e.point.x)
},