I trying to use amchart setting
dateAxis.baseInterval = {
"timeUnit": "month",
"count": 1
}
But i have an error to show the data, when i have more than one day in the month with data, the graph show more than one bullet for the same month.
for example if I have the next data
2019-10-11 => 20
2019-10-12 => 30
in place to display
(2019-10) => 50
the graph show the next data
(2019-10) => 20,
(2019-10) => 30
Thanks in advance.
AmCharts v4 doesn't aggregate your data for you. baseInterval merely tells the chart how to render your data with the minimum intervals between your points. Setting it to month with multiple data points in the same month will display multiple points; this is as designed.
If you intend to display your data in monthly intervals and have some data points where more than one point is in the same month, you need to manually aggregate your data beforehand - in your case, convert that point to a single data item in October with a value of 50.
Summary
I want to pull out Year over Year stats in a Crossfilter-DC driven dashboard
Year over Year (YoY) Definition
2017 YoY is the total units in 2017 divided by the total units in 2016.
Details
I'm using DC.js (and therefore D3.js & Crossfilter) to create an interactive Dashboard that can also be used to change the data it's rendering.
I have data, that though wider (has ~6 other attributes in addition to date and quantity: size, color, etc...sales data), boils down to objects like:
[
{ date: 2017-12-7, quantity: 56, color: blue ...},
{ date: 2017-2-17, quantity: 104, color: red ...},
{ date: 2016-12-7, quantity: 60, color: red ...},
{ date: 2016-4-15, quantity: 6, color: blue ...},
{ date: 2017-2-17, quantity: 10, color: green ...},
{ date: 2016-12-7, quantity: 12, color: green ...}
...
]
I'm displaying one rowchart per attribuet such that you can see the totals by color, size, etc. People would use each of these charts to be able to see the totals by that attribute and drill into the data by filtering by just a color, or a color and a size, or a size, etc. This setup is all (relatively) straight forward and kind of what DC is made for.
However, now I'd like to add some YoY stats such that I can show a barchart with x-axis as the years, and the y-axis as the YoY values (ex. YoY-2019 = Units-2019 / Units-2018). I'd also like to do the same by quarter and month such that I could see YoY Mar-2019 = Units-Mar-2019 / Units-Mar-2018 (and the same for quarter).
I have a year dimension and sum quantity
var yearDim = crossfilterObject.dimension(_ => _.date.getFullYear());
var quantityGroup = yearDim.group.reduceSum(_ => _.quantity);
I can't figure out how to do the Year over Year calc though in the nice, beautiful DC.js-way.
Attempted Solutions
Year+1
Add another dimension that's year + 1. I didn't' really get any further though because all I get out of it are two dimensions whose year groups I want to divide ... but am not sure how.
var yearPlusOneDim = crossfilterObject.dimension(_ => _.date.getFullYear() + 1);
Visually I can graph the two separately and I know, conceptually, what I want to do: which is divide the 2017 number in yearDim by the 2017 number in YearPlusOneDim (which, in reality, is the 2016 number). But "as a concept is as far as I got on this one.
Abandon DC Graphing
I could always use the yearDim's quantity group to get the array of values, which I could then feed into a normal D3.js graph.
var annualValues = quantityGroup.all();
console.log(annualValues);
// output = [{key: 2016, value: 78}, {key: 2017, value: 170}]
// example data from the limited rows listed above
But this feels like a hacky solution that's bound to fail and not benefit from all the rapid and dynamic DC updating.
I'd use a fake group, in order to solve this in one pass.
As #Ethan says, you could also use a value accessor, but then you'd have to look up the previous year each time a value is accessed - so you'd probably have to keep an extra table around. With a fake group, you only need this table in the body of your .all() function.
Here's a quick sketch of what the fake group might look like:
function yoy_group(group) {
return {
all: function() {
// index all values by date
var bydate = group.all().reduce(function(p, kv) {
p[kv.key.getTime()] = kv.value;
return p;
}, {});
// for any key/value pair which had a value one year earlier,
// produce a new pair with the ratio between this year and last
return group.all().reduce(function(p, kv) {
var date = d3.timeYear.offset(kv.key, -1);
if(bydate[date.getTime()])
p.push({key: kv.key, value: kv.value / bydate[date.getTime()]});
return p;
}, []);
}
};
}
The idea is simple: first index all the values by date. Then when producing the array of key/value pairs, look each one up to see if it had a value one year earlier. If so, push a pair to the result (otherwise drop it).
This should work for any date-keyed group where the dates have been rounded.
Note the use of Array.reduce in a couple of places. This is the spiritual ancestor of crossfilter's group.reduce - it takes a function which has the same signature as the reduce-add function, and an initial value (not a function) and produces a single value. Instead of reacting to changes like the crossfilter one does, it just loops over the array once. It's useful when you want to produce an object from an array, or produce an array of different size from the original.
Also, when indexing an object by a date, I use Date.getTime() to fetch the numeric representation of the date. Otherwise the date coerces to a string representation which may not be exact. Probably for this application it would be okay to skip .getTime() but I'm in the habit of always comparing dates exactly.
Demo fiddle of YOY trade volume in the data set used by the stock example on the main dc.js page.
I've rewritten #Gordon 's code below. All the credit is his for the solution (answered above) and I've just wirtten down my own version (far longer and likely only useful for beginners like me) of the code (much more verbose!) and the explanation (also much more verbose) to replicate my thinking in bridging my near-nothing starting point up to #Gordon 's really clever answer.
yoyGroup = function(group) {
return { all: function() {
// For every key-value pair in the group, iterate across it, indexing it by it's time-value
var valuesByDate = group.all().reduce(function(outputArray, thisKeyValuePair) {
outputArray[thisKeyValuePair.key.getTime()] = thisKeyValuePair.value;
return outputArray;
}, []);
return group.all().reduce(function(newAllArray, thisKeyValuePair) {
var dateLastYear = d3.timeYear.offset(thisKeyValuePair.key, -1);
if (valuesByDate[dateLastYear.getTime()]) {
newAllArray.push({
key: thisKeyValuePair.key,
value: thisKeyValuePair.value / valuesByDate[dateLastYear.getTime()] - 1
});
}
return newAllArray;
}, []); // closing reduce() and a function(...)
}}; // closing the return object & a function
};
¿Why are we overwritting the all() function?
When DC.js goes to create a graph based on a grouping, the only function from Crossfilter it uses is the all() function. So if we want to do something custom to a grouping to affect a DC graph, we only have to overwrite that one function: all().
¿What does the all() function need to return?
A group's all function must return an array of objects and each object must have two properties: key & value.
¿So what exactly are we doing here?
We're starting with an existing group which shows some values over time (Important Assumption: keys are date objects) and then creating a wrapper around it so that we can take advantage of the work that crossfilter has already done to aggregate at a certain level (ex. year, month, etc.).
We start by using reduce to manipulate the array of objects into a more simple array where the keys and values that were in the objects are now directly in the array. We do this to make it easier to look up values by keys.
before / output structure of group.all()
[ {key: k1, value: v1},
{key: k2, value: v2},
{key: k3, value: v3}
]
after
[ k1: v1,
k2: v2,
k3: v3
]
Then we move on to creating the correct all() structure again: an array of objects each of which has a key & value property. We start with the existing group's all() array (once again), but this time we have the advantage of our valuesByDate array which will make it easy to look up other dates.
So we iterate (via reduce) over the original group.all() output and lookup in the array we generated earlier (valuesByDate), if there's an entry from one year ago (valuesByDate[dateLastYear.getTime()]). (We use getTime() so it's simple integers rather than objects we're indexing off of.) If there is an element of the array from one year ago, then we add a key-value object-pair to our soon-to-be-returned array with the current key (date) and for the value we divide the "now" value (thisKeyValuePair.value) by the value 1 year ago: valuesByDate[dateLastYear.getTime()]. Lastly we subtract 1 so that it's (the most traditional definition of) YoY. Ex. This year = 110 and last year = 100 ... YoY = +10% = 110/100 - 1.
I want to make a query in crossfilter to filter all data from today's date.
Example: I have this query:
var countPerDim2 = Dim2.filterExact("1.1.2018").group().reduceSum();
So crossfilter will filter data from 1.1.2018.
But I want crossfilter to automatically get the the current date.
My reason is that I want to draw two charts to compare them.
Like :
Chart 1 by Date 1.1.2018 and Chart 2 by Date 31.12.17
How can I get the filter by yesterday's date? Is there a function like datenow() for the current day and maybe datenow(-1) for yesterday's date?
Thank you and happy new year!
Today and yesterday
To answer your immediate question, JavaScript's new Date() will return the current time and date as a JavaScript Date object. Then you just need to convert the date object to a string to match your date format.
You can use d3.time.format to produce those strings. Looks like you would want something like
d3.time.format('%-d.%-m.%Y')
(or perhaps with m and d reversed - unclear from your example whether month or day comes first)
Yesterday is something like
var date = new Date();
date.setDate(date.getDate()-1);
See the JavaScript Date documentation for more details.
Comparing two days
However, I think you'll run into a more fundamental problem, which is that crossfilter doesn't have the concept of multiple filters, so it's hard to compare one date against another in side-by-side charts.
Off the top of my head, the best thing I can think of is to "freeze" a group using a fake group:
function freeze_group(group) {
var _all = group.all().slice();
return {
all: function() {
return _all;
}
};
}
You'd apply one date filter, then call
chart.group(freeze_group(group));
on the chart you want to have that date. Now it won't change when the filter changes, and you can apply the other date filter for other charts.
I've created a Google sheet to keep a list of work tasks with a column to track the date on which items are created, and built a script to automatically populate the cells in that column with the day's date when a new line is inserted.
The cell (e.g. G9) that is target of the script uses the following validation formula to make sure that when users change the date, they use a date that is neither a weekend nor in the future:
=and(isdate(G9), weekday(G9,2)<6, G9<=today())
IT ONLY WORKS BUT ONLY IF THE SCRIPT IS RUN ANYTIME AFTER 8:00am ! If I try using it any earlier the cell validation will reject the input!
The script looks like this (curRow is the number of the row that's been added):
// Adds today's date without using =today()
var myrangename = "G"+curRow;
var dateCell = sheet.getRange(myrangename);
var d = new Date();
var dateArr = [];
dateArr[0]=d.getFullYear();
dateArr[1]=d.getMonth() + 1; //Months are zero based
dateArr[2]=d.getDate();
dateCell.setValue(dateArr.join('/'));
(n.b.: I cannot use the script to simply put =today() in the cell because all the entries would change every day. )
WHY DOES IT ONLY WORK AFTER 8:00AM? Is Google somehow running on a different time zone than my computer?? I'm based in the UK, so using BST, but that shouldn't be a problem, shouldn't it...?
Try
var d = new Date();
var d = Utilities.formatDate(d, "GMT+1", "yyyy-MM-dd HH:mm:ss");
I am not sure if google would recognise BST as a time zone, but you could also try
var d = Utilities.formatDate(d, "BST", "yyyy-MM-dd HH:mm:ss");
Thank you for your suggestion, Aprillion. Turns out that a Google Sheets file has its own internal time-zone setting! which in my case was set to American Pacific time (so 8hrs behind)
(You'd think it would pick up the date and time info automatically from Windows, like other applications do!)
To set the sheet's time-zone to the correct one, you need to go to the main menu, click 'File', then 'Spreadsheet settings...', and adjust as necessary.
The script and validation now all work fine.
Thank you all for your help.
I'm building a AmStockChart with annual data. The problem is that I'd like to have a X axis going from 1/1 to 12/31 and currently the upper boundary is dynamically set with the max date I have in the dataset.
Is it possible to force this? It seems that it can be modified within StockGraph.valueAxis but The documentation isn't really clear to me.
to archive this you need to add a "dump" entry in your dataProvider
dataProvider = [{
date: new Date(2014,0,1)
},
...
{
date: new Date(2014,11,31)
}]