Basically I have two google sheets that look something like this:
a table where people can put in their email and select what kind of foo they are using
email
foo
example#email.com
This Foo
and then another table with information about the foo
foo name
foo type
foo boolean1
foo boolean2
This Foo
String
True
True
That Foo
Number
False
True
Other Foo
String
False
False
In a Separate Sheet I'd like to have a dashboard-like view of things wherein I would have counts of various things like number of people, how many of each type of Foo, etc
Where I'm having trouble is figuring out how to pull things like "Number of people who have selected String foos" and such
like, basically i want the google-query equivalent to (in sql)
SELECT COUNT(p.*) FROM people p JOIN info i on p.foo = i.foo_name GROUP BY i.foo_type WHERE i.foo_type = 'String'
What I would be looking for is a table that looks like this:
Data
Count
Active Roster
4
String
3
Number
1
I have also seen many solutions that have complicated formulas using VLOOKUP, INDEX, MATCH, etc.
I decided to write a user function to combine tables, or as I refer to it, de-normalize the database. I wrote the function DENORMALIZE() to support INNER, LEFT, RIGHT and FULL joins. By nesting function calls one can join unlimited tables in theory.
DENORMALIZE(range1, range2, primaryKey, foreignKey, [joinType])
Parameters:
range1, the main table as a named range, a1Notation or an array
range2, the related table as a named range, a1Notation or an array
primaryKey, the unique identifier for the main table, columns start with "1"
foreignKey, the key in the related table to join to the main table, columns start with "1"
joinType, type of join, "Inner", "Left", "Right", "Full", optional and defaults to "Inner", case insensitive
Returns: results as a two dimensional array
Result Set Example:
=QUERY(denormalize("Employees","Orders",1,3), "SELECT * WHERE Col2 = 'Davolio' AND Col8=2", FALSE)
EmpID
LastName
FirstName
OrderID
CustomerID
EmpID
OrderDate
ShipperID
1
Davolio
Nancy
10285
63
1
8/20/1996
2
1
Davolio
Nancy
10292
81
1
8/28/1996
2
1
Davolio
Nancy
10304
80
1
9/12/1996
2
Other Examples:
=denormalize("Employees","Orders",1,3)
=denormalize("Employees","Orders",1,3,"full")
=QUERY(denormalize("Employees","Orders",1,3,"left"), "SELECT * ", FALSE)
=QUERY(denormalize("Employees","Orders",1,3), "SELECT * WHERE Col2 = 'Davolio'", FALSE)
=QUERY(denormalize("Employees","Orders",1,3), "SELECT * WHERE Col2 = 'Davolio' AND Col8=2", FALSE)
=denormalize("Orders","OrderDetails",1,2)
// multiple joins
=denormalize("Employees",denormalize("Orders","OrderDetails",1,2),1,3)
=QUERY(denormalize("Employees",denormalize("Orders","OrderDetails",1,2),1,3), "SELECT *", FALSE)
=denormalize(denormalize("Employees","Orders",1,3),"OrderDetails",1,2)
=QUERY(denormalize("Employees",denormalize("Orders","OrderDetails",1,2),1,3), "SELECT *", FALSE)
=QUERY(denormalize(denormalize("Employees","Orders",1,3),"OrderDetails",4,2), "SELECT *", FALSE)
function denormalize(range1, range2, primaryKey, foreignKey, joinType) {
var i = 0;
var j = 0;
var index = -1;
var lFound = false;
var aDenorm = [];
var hashtable = [];
var aRange1 = "";
var aRange2 = "";
joinType = DefaultTo(joinType, "INNER").toUpperCase();
// the 6 lines below are used for debugging
//range1 = "Employees";
//range1 = "Employees!A2:C12";
//range2 = "Orders";
//primaryKey = 1;
//foreignKey = 3;
//joinType = "LEFT";
// Sheets starts numbering columns starting with "1", arrays are zero-based
primaryKey -= 1;
foreignKey -= 1;
// check if range is not an array
if (typeof range1 !== 'object') {
// Determine if range is a1Notation and load data into an array
if (range1.indexOf(":") !== -1) {
aRange1 = ss.getRange(range1).getValues();
} else {
aRange1 = ss.getRangeByName(range1).getValues();
}
} else {
aRange1 = range1;
}
if (typeof range2 !== 'object') {
if (range2.indexOf(":") !== -1) {
aRange2 = ss.getRange(range2).getValues();
} else {
aRange2 = ss.getRangeByName(range2).getValues();
}
} else {
aRange2 = range2;
}
// make similar structured temp arrays with NULL elements
var tArray1 = MakeArray(aRange1[0].length);
var tArray2 = MakeArray(aRange2[0].length);
var lenRange1 = aRange1.length;
var lenRange2 = aRange2.length;
hashtable = getHT(aRange1, lenRange1, primaryKey);
for(i = 0; i < lenRange2; i++) {
index = hashtable.indexOf(aRange2[i][foreignKey]);
if (index !== -1) {
aDenorm.push(aRange1[index].concat(aRange2[i]));
}
}
// add left and full no matches
if (joinType == "LEFT" || joinType == "FULL") {
for(i = 0; i < lenRange1; i++) {
//index = aDenorm.indexOf(aRange1[i][primaryKey]);
index = aScan(aDenorm, aRange1[i][primaryKey], primaryKey)
if (index == -1) {
aDenorm.push(aRange1[i].concat(tArray2));
}
}
}
// add right and full no matches
if (joinType == "RIGHT" || joinType == "FULL") {
for(i = 0; i < lenRange2; i++) {
index = aScan(aDenorm, aRange2[i][foreignKey], primaryKey)
if (index == -1) {
aDenorm.push(tArray1.concat(aRange2[i]));
}
}
}
return aDenorm;
}
function getHT(aRange, lenRange, key){
var aHashtable = [];
var i = 0;
for (i=0; i < lenRange; i++ ) {
//aHashtable.push([aRange[i][key], i]);
aHashtable.push(aRange[i][key]);
}
return aHashtable;
}
function MakeArray(length) {
var i = 0;
var retArray = [];
for (i=0; i < length; i++) {
retArray.push("");
}
return retArray;
}
function DefaultTo(valueToCheck, valueToDefault) {
return typeof valueToCheck === "undefined" ? valueToDefault : valueToCheck;
}
// Search a multi-dimensional array for a value
function aScan(aValues, searchStr, searchCol) {
var retval = -1;
var i = 0;
var aLen = aValues.length;
for (i = 0; i < aLen; i++) {
if (aValues[i][searchCol] == searchStr) {
retval = i;
break;
}
}
return retval;
}
You can make a copy of the google sheet with data and examples here:
https://docs.google.com/spreadsheets/d/1vziuF8gQcsOxTLEtlcU2cgTAYL1eIaaMTAoIrAS7mnE/edit?usp=sharing
How can I show dataLabels or tooltip for outer circle of packedbubble?
For example in Carbon emissions around the world (2014) sample, i need to show a tooltip for each continent, when hovering on them. or if possible show dataLabels for each of them
Notice that the outer circle is just a path without any properties like x, y etc, so it wouldn't work with the Highcharts tooltip feature. The only solution which came to my mind is to create a custom tooltip on mouseover event on this path.
Demo: https://jsfiddle.net/BlackLabel/9gkdfsnj/
Code:
events: {
render() {
var
chart = this,
series = chart.series[0],
graphic = series.parentNode.graphic,
tooltip = document.getElementById('tooltip'),
text;
text = "Sum value: " + Math.floor(series.yData.reduce((a, b) => a + b, 0));
graphic.element.onmouseover = function() {
tooltip.style.visibility = "visible";
tooltip.innerHTML = text;
tooltip.style.left = graphic.x + (tooltip.offsetWidth /2) - chart.plotLeft + 'px';
tooltip.style.top = graphic.y + graphic.height / 2 + 'px'
}
graphic.element.onmouseout = function() {
tooltip.style.visibility = "hidden"
}
}
}
It is just a simple example, feel free to improve it.
Add value key
[{
name: 'Animals',
value: 867,
data: [{
name: 'Lion',
value: 167
}, {
name: 'Croatia',
value: 200
},
{
name: "Dog",
value: 97
}],
}]
Add below lines inside Tooltip
tooltip: {
useHTML: true,
formatter : function(){
let childtooltip = "";
if(this.point != undefined && this.point != null){
if((this.point.name != undefined && this.point.name != null) && (this.point.value != undefined && this.point.value != null)){
childtooltip = `<b>${this.point.name}:</b> ${this.point.value}`;
}
}
if(childtooltip == ""){
return `<b>${this.series.userOptions.name}:</b> ${this.series.userOptions.value}<br>`
}else{
return `${childtooltip}`;
}
}
}
Demo
How to sort the items within each stacking column? Asc or desc.
Each series added to a chart is drawn on the chart in the order it was received. To change the order of the chart series you will need to change which series is the first in your list of series items.
That being said - what I think you want to do is to, independently of the series order, sort on each stack by value. I do not think this is possible in HighCharts.
You can only set global index of serie, but you cannot position each single "stack".
http://api.highcharts.com/highcharts#series.index
You may use the script below to sort the Stacked Chart Bars by category name.
var sortData = function(chartSource) {
var series = chartSource.series;
var axis = chartSource.xAxis[0];
var categories = [];
if($.isArray(series)) {
var ser =
$.grep(series, function(ser, seriesIndex)
{
return ser.visible;
})[0];
$.each(ser.data,
function(dataIndex, datum)
{
console.log(datum.category + ':' + datum.stackTotal);
var obj = {
name: datum.category,
index: dataIndex,
stackTotal: datum.stackTotal
}
categories.push(obj);
}
);
}
categories.sort(function(a, b) {
var aName = a.name.toLowerCase();
var bName = b.name.toLowerCase();
var aTotal = a.stackTotal;
var bTotal = b.stackTotal;
//if(aTotal === bTotal) {
return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0));
//} else {
// return ((aTotal > bTotal) ? -1 : ((aTotal < bTotal) ? 1 : 0));
//}
});
var mappedIndex = $.map(categories, function(category, index) {
return category.index;
});
categories = $.map(categories, function(category, index) {
return category.name;
});
console.log(categories);
console.log(mappedIndex);
axis.setCategories(categories);
var newDataArray = [];
$.each(series, function(seriesIndex, ser) {
newDataArray = [];
var data = $.map(mappedIndex, function(mappedIndex2, origIndex) {
var ydata = ser.data[mappedIndex2];
if(ydata.y!=null){
var y = ydata.y
newDataArray.push(y);
return y;
}
else
{
newDataArray.push(null);
return null;
}
});
ser.setData(newDataArray);
});
};
I am working on an extended Textarea like http://podio.github.com/jquery-mentions-input/
There you can see a transparent Textarea with an element in background simulating the highlighting.
You can see the problem there also: type some long text like "iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii " (attention to space at the end)
and then type "#ke" and choose first contact.
You will see that the background breaks different than the text in the textarea.
I figured out that this is not because different sizes!
Any ideas how to avoid that?
P.S.: I dont want to you contentediable.
For testing i used chrome (test with points!) and firefox.
I think this technic is also used often for auto-calculating a textarea-hight and they must have the same problems?!
I found a different solution myself: count line-breaks manually.
I modified and improved the line-break-adder from this thread: finding "line-breaks" in textarea that is word-wrapping ARABIC text
The big difference: this function only retrieves the breaked value without applying the breaks cause it used a temporary element copy.
I think it could help someone else!
function getApplyLineBreaks(strTextAreaId)
{
var strRawValue = $('#' + strTextAreaId).val();
var measureClone = $('#' + strTextAreaId).clone();
measureClone.attr('id', 'value_break_mess_clone');
measureClone.val('');
measureClone.css('overflow', 'hidden');
measureClone.removeAttr('onchange').removeAttr('onclick').removeAttr('onkeydown').removeAttr('onkeyup').removeAttr('onblur').removeAttr('onfocus');
measureClone.height(10);
measureClone.insertAfter('#' + strTextAreaId);
var lastScrollWidth = measureClone[0].scrollWidth;
var lastScrollHeight = measureClone[0].scrollHeight;
var lastWrappingIndex = -1;
var tolerancePixels = 5; //sollte kleiner als font-size
var addedSpace = false;
var debug_c = 0;
for (var i = 0; i < strRawValue.length; i++)
{
var curChar = strRawValue.charAt(i);
if (curChar == ' ' || curChar == '-' || curChar == '+')
lastWrappingIndex = i;
measureClone.val(measureClone.val() + curChar);
addedSpace = false;
if (i != strRawValue.length - 1 && strRawValue.charAt(i + 1) != "\n")
{
measureClone.val(measureClone.val() + ' '); //this is only 90% zero-width breaker unnoticed
addedSpace = true;
}
if (((measureClone[0].scrollWidth - tolerancePixels) > lastScrollWidth) || ((measureClone[0].scrollHeight - tolerancePixels) > lastScrollHeight))
{
if (addedSpace)
measureClone.val(measureClone.val().substr(0, measureClone.val().length - 1));
var buffer = "";
if (lastWrappingIndex >= 0)
{
for (var j = lastWrappingIndex + 1; j < i; j++)
buffer += strRawValue.charAt(j);
lastWrappingIndex = -1;
}
buffer += curChar;
measureClone.val(measureClone.val().substr(0, measureClone.val().length - buffer.length));
if (curChar == "\n")
{
if (i == strRawValue.length - 1)
measureClone.val(measureClone.val() + buffer + "\n");
else
measureClone.val(measureClone.val() + buffer);
}
else
{
measureClone.val(measureClone.val() + "\n" + buffer);
}
lastScrollHeight = measureClone[0].scrollHeight;
}
else if (addedSpace)
{
measureClone.val(measureClone.val().substr(0, measureClone.val().length - 1));
}
}
var returnText = measureClone.val();
measureClone.remove();
return returnText;
}
Only thing: its slow on long texts. Ideas for optimization are welcome.
Does anyone know how to sort the contact data that phonegap liberates from iOS to javascript. The order at the moment is nothing to do with alphabetical sorting. I want to sort on last name.
Here is my contact code:
function init_contacts() {
var fields = [ "name","phoneNumbers"];
navigator.service.contacts.find(fields, contactSuccess, contactError, '');
}
function contactSuccess(contacts) {
for (n = 0; n < contacts.length; n++) {
if (contacts[n].phoneNumbers) {
for (m = 0; m < contacts[n].phoneNumbers.length; m++) {
addToMyContacts(contacts[n].name.formatted, contacts[n].phoneNumbers[m].value);
console.log('Found ' + contacts[n].name.formatted + ' ' + contacts[n].phoneNumbers[m].value);
}
}
}
$("#my_contacts").listview("refresh");
};
function contactError() {
navigator.notification.alerter('contactError!');
};
You can do this sort by hand in Javascript.
var cSort = function(a, b) {
var aName = a.lastName + ' ' + a.firstName;
var bName = b.lastName + ' ' + b.firstName;
return aName < bName ? -1 : (aName == bName ? 0 : 1);
};
function contactSuccess(contacts) {
contacts = contacts.sort(cSort);
...
};
For more fun and cleaner code you may consider using lodash
contacts = _.sortBy(contacts, ['last_name', 'first_name']);
sorting in js
function sortByitemName(a, b) {
var x = a.displayName.toLowerCase();
var y = b.displayName.toLowerCase();
return ((x < y) ? -1 : ((x > y) ? 1 : 0));
}
function onSuccess(contacts) {
contacts.sort(sortByitemName);
}
I am using this method, which is far more efficient (compared to the accepted answer)
var cSort=function(a,b){
var an=a.name.formatted.toUpperCase();
var bn=b.name.formatted.toUpperCase();
return (an<bn)?-1:(an==bn)?0:1;
};
function contactSuccess(contacts) {
contacts = contacts.sort(cSort);
...
};
Contact.name.formatted is more consistent across platforms
All names starting with the same letter will be grouped together irregardless of the case. (you can also try it to see).