Crossfilter - Minimum Value by Day - crossfilter

How do I find the minimum value per day? The dimension being the Days, the group the minimum amount.
Using the following data as an example -
var data = [
{date: "2011-11-14T10:17:54Z", amount: 10 },
{date: "2011-11-14T12:20:19Z", amount: 1 },
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-15T16:28:54Z", amount: 100 },
{date: "2011-11-16T18:48:46Z", amount: 100 },
{date: "2011-11-16T20:53:41Z", amount: 11 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
];
So the results should be -
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
I'm going round in circles trying to work this out and I'm now completely confused so any help would be appreciated!
Thanks.

The following will get your your absolute minimum. Won't work with filtering though!
var data = [
{date: "2011-11-14T10:17:54Z", amount: 10 },
{date: "2011-11-14T12:20:19Z", amount: 1 },
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-15T16:28:54Z", amount: 100 },
{date: "2011-11-16T18:48:46Z", amount: 100 },
{date: "2011-11-16T20:53:41Z", amount: 11 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
];
var ndx = crossfilter(data);
var dayDim = ndx.dimension(function (d) { return "" + d.date.substr(8,2); });
var minGroup = dayDim.group().reduce(
function (p, v) { if(v.amount < p || p === null) p = v.amount; return p; },
function (p, v) { return p; },
function () { return null; }
);
console.table(minGroup.top(Infinity));
If you want filtering to work, you need to keep a sorted array of all the values found in each array and then add/remove values as data is filtered and unfiltered. Then use this sorted array to figure out your minimum. Something like the following (untested):
var data = [
{date: "2011-11-14T10:17:54Z", amount: 10 },
{date: "2011-11-14T12:20:19Z", amount: 1 },
{date: "2011-11-14T14:20:19Z", amount: 0 },
{date: "2011-11-15T06:30:43Z", amount: 10 },
{date: "2011-11-15T10:30:43Z", amount: 10 },
{date: "2011-11-15T16:28:54Z", amount: 100 },
{date: "2011-11-16T18:48:46Z", amount: 100 },
{date: "2011-11-16T20:53:41Z", amount: 11 },
{date: "2011-11-16T22:54:06Z", amount: 10 },
];
var ndx = crossfilter(data);
var dayDim = ndx.dimension(function (d) { return "" + d.date.substr(8,2); });
var minGroup = dayDim.group().reduce(
function (p, v) {
if(v.amount < p.min || p.min === null) {
p.min = v.amount;
}
p.values.push(v.amount);
return p;
},
function (p, v) {
p.values.splice(p.values.indexOf(v.amount),1);
if(v.amount === p.min) {
p.values.sort(function(a,b) { return a < b ? -1 : 1; });
p.min = p.values[0];
}
return p;
},
function () { return { min: null, values: [] }; }
);
console.log(minGroup.top(Infinity));

Related

How can I create error bars similar to Vega Lite in eCharts

I am trying to create error bars similar to the one in Vega Lite
Vega Lite Error Bar.
I would like to plot Q25, Q50, Q75 versus gender (as the first category) and age as the second.
I tried to organize my data in different ways, so Q is the same as Q25, Q50, Q75. I am having trouble achieving my goal.
// Generate data.
data = [
[
'jobId',
'Region',
'rid',
'ContributionLimit',
'Q25',
'Q50',
'Q75',
'entryNR',
'Gender',
'AgeCategory',
'Q'
],
[
2446,
'Baden-W\u00fcrttemberg',
9,
6900.0,
2330.0,
2628.0,
3032.0,
883,
'Gesamt',
'25 bis unter 55',
[2330.0, 2628.0, 3032.0]
],
[
2446,
'Baden-W\u00fcrttemberg',
9,
6900.0,
2330.0,
2628.0,
3032.0,
883,
'Gesamt',
'Gesamt',
[2330.0, 2628.0, 3032.0]
],
[
2446,
'Baden-W\u00fcrttemberg',
9,
6900.0,
2302.0,
2561.0,
2852.0,
777,
'Frauen',
'Gesamt',
[2302.0, 2561.0, 2852.0]
],
[
2446,
'Baden-W\u00fcrttemberg',
9,
6900.0,
2286.0,
2542.0,
2827.0,
528,
'Frauen',
'25 bis unter 55',
[2286.0, 2542.0, 2827.0]
]
];
option = {
dataset: [
{
id: 'raw',
source: data
},
{
id: 'rid_f',
fromDatasetId: 'raw',
transform: [
{
type: 'filter',
config: {
dimension: 'rid',
eq: 9
}
}
]
},
{
id: 'Gesamt',
fromDatasetId: 'rid_f',
transform: [
{
type: 'filter',
config: {
dimension: 'AgeCategory',
eq: 'Gesamt'
}
}
]
},
{
id: '25 bis unter 55',
fromDatasetId: 'rid_f',
transform: [
{
type: 'filter',
config: {
dimension: 'AgeCategory',
eq: '25 bis unter 55'
}
}
]
},
],
legend: {
top: '10%'
},
yAxis: {
type: 'category',
},
xAxis: {
type: 'value'
},
series: [
{
name: 'ab 55',
type: 'line',
datasetId: 'Gesamt',
symbolSize: 6,
encode: {
x: ['Q25', 'Q50', 'Q75'],
y: 'Gender',
label: 'Gender',
itemName: 'Gender'
}
},
{
name: '25 bis unter 55',
type: 'line',
datasetId: '25 bis unter 55',
symbolSize: 6,
encode: {
x: 'Q',
y: 'Gender',
label: 'Gender',
itemName: 'Gender'
}
}
]
};

how can i show my custom (Day-Month-Year Hour:Min:Sec) time format on chartjs chart?

I want to show my custom (Day-Month-Year Hour:Min:Sec -->ex: 01-05-2019 14:06:47 PM) time format on chartjs chart
How Can i Show On chart xAxis Date Format Like This >>
Day-Month-Year Hour:Min:Sec -->ex: 01-05-2019 14:06:47 PM
time format is timeFormat = 'DD/MM/YYYY h:mm:ss a' but on chart only shows Month,Day,Year
This is my code below and:
Online Code On >>> https://codepen.io/sibche2013/pen/XQWWbb
var timeFormat = 'DD/MM/YYYY h:mm:ss a';
var config = {
type: 'line',
data: {
datasets: [
{
label: "UK Dates",
data: [{
x: "01-04-2014 02:15:50", y: 175
}, {
x: "12-04-2014 12:19:27", y: 177
}, {
x: "23-04-2014 22:25:47", y: 178
}, {
x: "28-04-2014 14:46:40", y: 182
}],
fill: false,
borderColor: 'blue'
}
]
},
options: {
responsive: true,
title: {
display: true,
text: "Chart.js Time Scale"
},
scales: {
xAxes: [{
type: "time",
time: {
format: timeFormat,
tooltipFormat: 'll'
},
scaleLabel: {
display: true,
labelString: 'Date'
}
}],
yAxes: [{
scaleLabel: {
display: true,
labelString: 'value'
}
}]
}
}
};
window.onload = function () {
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx, config);
};

CSS Color table based on input in each row

Would it be possible to color each table rows based on a input in a specific column for each row?
Example, if:
B1 = 1 // Red row
B2 = 1 // Red row
B3 = 3 // Blue row
B4 = 2 // Green row
B5 = 1 // Red row
And so on?
It's a datatable and there will automatically be filled new rows into the table, these should also be coloured after the system.
Demo
var dataSet = [['Dadar', 'lmsSenitaD', 'Atul salaskar', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Come back and Join', 'Mobile', 'Times','1'],
['Aundh', 'Rashmi', 'Preeti Gupta', '9876543210', '', 'Not Joined', '10/01/2014', '', 'Will Discuss with Family', 'Online Campaign', 'Iksula','2'],
['Do#Home_Thane', 'Rashmi', 'Mitali Gupta', '9876543210', '', 'Joined - Old Date', '10/01/2014', '20/08/2014', 'Come back and Join', 'Online Campaign', 'Iksula','4']];
$(document).ready(function () {
$('#demo').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
$('#example').dataTable({
"data": dataSet,
"columns": [
{ "title": "Center" },
{ "title": "Call Executive" },
{ "title": "Name" },
{ "title": "Mobile" },
{ "title": "Phone" },
{ "title": "Status" },
{ "title": "Appt Date" },
{ "title": "Joined Date" },
{ "title": "Remark" },
{ "title": "Source" },
{ "title": "Publisher" },
{ "title": "css" },
]
,
"fnRowCallback": function (nRow, aData, iDisplayIndex) {
var css = aData[aData.length - 1];
if (css == "1") {
$(nRow).addClass('gradeN');
}
else if(css == "2") {
$(nRow).addClass('gradeC');
}
else{
$(nRow).addClass('gradeM');
}
}

How to use "equalTo" with list of values in Firebase?

I have some data
{
"1": {
"result": 303
},
"2": {
"result": 307
},
"3": {
"result": 703
},
"4": {
"result": 909
},
"5": {
"result": 909
}
}
So I can get result field of 3 key:
ref.child("3").once("value", (snapshot) => {
const data = snapshot.val();
console.log(data.result);
});
But I want to get array of results of 3, 4, 5 keys in one query. How can I do this?
Firebase currently doesn't support multiple equalTo()s.
This will get you an Array of 3, 4 and 5 but it just retrieves the last three:
ref.limitToLast(3).once("value", function(snapshot) {
const data = snapshot.val();
console.log(data.result);
});
otherwise i think you'd have to fetch all results and filter on your own.
something like this:
ref.child('posts').child('test').once("value", function(snapshot) {
snapshot.forEach(function(childSnapshot) {
if (childSnapshot.key() == 3 || childSnapshot.key() == 4 || childSnapshot.key() == 5) {
data.push(childSnapshot.val().result);
}
});
console.log(data);
});

Actionscript: Sorting ArrayCollection by date: YYYY-MM-DD

I have an ArrayCollection of Objects. Each Object has the following keys/values:
{date: 2009-12-01, visits=13555, bouceRate=45}
{date: 2009-12-05, visits=46955, bouceRate=45}
{date: 2009-12-06, visits=13685, bouceRate=45}
{date: 2009-12-02, visits=13685, bouceRate=45}
{date: 2009-12-04, visits=68755, bouceRate=45}
{date: 2009-12-03, visits=35875, bouceRate=45}
I need to sort this ArrayCollection by date, so it would be from past to present - like so:
{date: 2009-12-01, visits=13555, bouceRate=45}
{date: 2009-12-02, visits=13685, bouceRate=45}
{date: 2009-12-03, visits=35875, bouceRate=45}
{date: 2009-12-04, visits=68755, bouceRate=45}
{date: 2009-12-05, visits=46955, bouceRate=45}
{date: 2009-12-06, visits=13685, bouceRate=45}
I have tried the following with no prevail (not sorting):
var dateSort:Sort = new Sort();
dateSort.fields = [new SortField("date", false, false, true)];
newAreaChartData.sort = dateSort;
newAreaChartData.refresh();
// traceout
for (var i:int = 0; i <newAreaChartData.length; i++)
trace ("Object #" + i + ": " + ObjectUtil.toString(newAreaChartData.getItemAt(i)));
This worked for me:
for(i = 0; i < newAreaChartData.length; ++i) {
newAreaChartData[i].formattedDate = getActualDate(newAreaChartData[i].date);
newAreaChartData[i].dateTime = newAreaChartData[i].formattedDate.time;
trace(newAreaChartData[i].dateTime);
}
var dateSort:Sort = new Sort();
dateSort.fields = [new SortField("dateTime", false, false, true)];
newAreaChartData.sort = dateSort;
newAreaChartData.refresh();
for (var i:int = 0; i <newAreaChartData.length; i++)
trace ("Object #"+ i + ": " + ObjectUtil.toString(newAreaChartData.getItemAt(i)));
The way your creating the SortField :
new SortField("date", false, false, true)
From the API , the last parameter should mean that you want the value to be sorted numerically instead of as a string.
What is the type of the "date" field in the Object ? If it is a string, then you might want to sort things alphabetically
new SortField("date", false, false, null)
Hoping this helps
PH
I don't believe that the sort is applied until you call ArrayCollection.refresh():
newAreaChartData.sort = dateSort;
newAreaChartData.refresh();

Resources