We Keep Coding

How do I shuffle a list of lists?

I've got a list of lists:
myList = [[67, 79], [1, 5], [63, 122], [43, 44], [2, 5], [31, 37], [16, 45], [110, 124], [60, 64], [68, 79], [37, 116], [5, 76]]
And I would like to shuffle it around, but every way I've tried to do it has ruined the structure of lists and stripped it down to bare numbers. For instance:
myShuffledList = myList.sort((a, b) => 0.5 - Math.random());
Gives me something like:
myShuffledList = [60,64,110,124,63,122,5,76,43,44,68,79,37,116,2,5,1,5,67,79,16,45,31,37]
instead of something like this:
myShuffledList = [[68, 79], [2, 5], [31, 37], [1, 5], [67, 79], [110, 124], [63, 122], [16, 45], [5, 76], [37, 116], [43, 44], [60, 64]]
Is there simple solution as to how I can avoid the list being stripped completely, and just shuffle the lists of lists?

Everything is working as you intended it to. You just got bamboozled by console.log converting your array to strings. If you use a custom toString function to avoid this you can see that everything works as intended
myList = [
[67, 79],
[1, 5],
[63, 122],
[43, 44],
[2, 5],
[31, 37],
[16, 45],
[110, 124],
[60, 64],
[68, 79],
[37, 116],
[5, 76]
]
myShuffledList = myList.sort((a, b) => 0.5 - Math.random());
var toString = (list) => {
return `${list.map((sublist) => `[${sublist}]`)}`
}
console.log(toString(myList))
console.log(toString(myShuffledList))

Why does the chartArea configuration option hide hAxis ticks?

I'm a beginner in the Apps Script environment.
While testing to learn about methods and configuration options, I came across a problem for which I couldn't find a solution.
After changing the chartArea option, depending on the value, the hAxis ticks disappear.
As an example taken directly from the google guide page, I have this snippet:
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
If I modify the given example, including the following configuration: chartArea: {left: 70, width:'90%', height:'90%'}, the hAxis ticks just disappear, as we can see in the next snippet.
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawCurveTypes);
function drawCurveTypes() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addColumn('number', 'Cats');
data.addRows([
[0, 0, 0], [1, 10, 5], [2, 23, 15], [3, 17, 9], [4, 18, 10], [5, 9, 5],
[6, 11, 3], [7, 27, 19], [8, 33, 25], [9, 40, 32], [10, 32, 24], [11, 35, 27],
[12, 30, 22], [13, 40, 32], [14, 42, 34], [15, 47, 39], [16, 44, 36], [17, 48, 40],
[18, 52, 44], [19, 54, 46], [20, 42, 34], [21, 55, 47], [22, 56, 48], [23, 57, 49],
[24, 60, 52], [25, 50, 42], [26, 52, 44], [27, 51, 43], [28, 49, 41], [29, 53, 45],
[30, 55, 47], [31, 60, 52], [32, 61, 53], [33, 59, 51], [34, 62, 54], [35, 65, 57],
[36, 62, 54], [37, 58, 50], [38, 55, 47], [39, 61, 53], [40, 64, 56], [41, 65, 57],
[42, 63, 55], [43, 66, 58], [44, 67, 59], [45, 69, 61], [46, 69, 61], [47, 70, 62],
[48, 72, 64], [49, 68, 60], [50, 66, 58], [51, 65, 57], [52, 67, 59], [53, 70, 62],
[54, 71, 63], [55, 72, 64], [56, 73, 65], [57, 75, 67], [58, 70, 62], [59, 68, 60],
[60, 64, 56], [61, 60, 52], [62, 65, 57], [63, 67, 59], [64, 68, 60], [65, 69, 61],
[66, 70, 62], [67, 72, 64], [68, 75, 67], [69, 80, 72]
]);
var options = {
hAxis: {
title: 'Time'
},
chartArea: {left: 70, width:'90%', height:'90%'},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Depending on the value of the height parameter, the ticks appear again and I couldn't understand why increasing the graph area implies omitting the hAxis ticks.
Can someone help me?
Thanks.

Default chartArea.height = 200
Default height = chartArea.height = 200
chartArea.height: 90% -> 180
200- 180 = 20px is not enough for the hAxis that it is out of the display region.
You should reduce chartArea.height or increase height.

Rotate an entire Google chart

I wanted to show my graph but in a vertical way not horizontal like show on the following image and also hide the legend if possible.
Thanks in advance for your help.
Charts horizontal to vertical
Symmetry of the rotation
google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
hAxis: {
textPosition:"none"
},
vAxis: {
textPosition:"none"
},
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'))
chart.draw(data, options);
}

use chart options...
orientation: 'vertical'
and...
legend.position: 'none'
see the following working snippet...
it also demonstrates increasing the size of the chartArea to fill the container
which the chart will not do by default...
chartArea: {
top: 6,
right: 6,
bottom: 6,
left: 6,
height: '100%',
width: '100%'
},
google.charts.load('current', {
callback: drawBasic,
packages:['corechart']
});
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Y');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
chartArea: {
top: 6,
right: 6,
bottom: 6,
left: 6,
height: '100%',
width: '100%'
},
hAxis: {
textPosition: 'none'
},
height: 800,
legend: {
position: 'none'
},
orientation: 'vertical',
vAxis: {
textPosition: 'none'
},
width: 200
};
var chart0 = new google.visualization.LineChart(document.getElementById('chart_div0'));
chart0.draw(data, options);
var view = new google.visualization.DataView(data);
view.setColumns([0, {
calc: function (dt, row) {
return {
v: dt.getValue(row, 1) * -1,
f: dt.getFormattedValue(row, 1),
};
},
label: data.getColumnLabel(1),
type: data.getColumnType(1)
}]);
var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1'));
chart1.draw(view, options);
}
div {
display: inline-block;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div0"></div>
<div id="chart_div1"></div>

you can achieve this with css (and add legend: {position: 'none'} in the options to hide the legend)
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66],
]);
var options = {
hAxis: {
textPosition:"none"
},
vAxis: {
textPosition:"none"
},
legend: {position: 'none'}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'))
chart.draw(data, options);
}
#chart_div{
transform-origin: 80% 50%;
transform:rotate(-90deg);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

Attempting to add a JavaScript graph to a rails app

Trying to add a JavaScript graph. Go this from the Google developers page. It gives this error:
ExecJS::RuntimeError in Scores#index
SyntaxError: [stdin]:8:1: reserved word 'function'
and highlights this line:
<%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
Not really sure what it means, tried googling it but couldn't find any solutions.
HTML
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
Javascript
google.charts.load('current', {packages: ['corechart', 'line']});
google.charts.setOnLoadCallback(drawBasic);
function drawBasic() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'X');
data.addColumn('number', 'Dogs');
data.addRows([
[0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9],
[6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35],
[12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
[18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
[24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
[30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
[36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
[42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
[48, 72], [49, 68], [50, 66], [51, 65], [52, 67], [53, 70],
[54, 71], [55, 72], [56, 73], [57, 75], [58, 70], [59, 68],
[60, 64], [61, 60], [62, 65], [63, 67], [64, 68], [65, 69],
[66, 70], [67, 72], [68, 75], [69, 80]
]);
var options = {
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
}
};
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
chart.draw(data, options);
}`

Is there a possibility to use geochart with districts in cities?

I would like to have a map of Ho Chi Minh City in Vietnam and give values to specific districts. I wonder if there is a possibility in doing so using geochart.
Thanks!

No, not currently. From the docs about the resolution setting, there is no resolution for city districts, and the highest definition is metros which isn't supported outside of the US.
'countries' - Supported for all regions, except for US state regions.
'provinces' - Supported only for country regions and US state regions. Not supported for all countries; please test a country to see whether this option is supported.
'metros' - Supported for the US country region and US state regions only.
However, the different provinces of Vietnam can be used with the following code:
google.load('visualization', '1', {
'packages': ['geochart']
});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = google.visualization.arrayToDataTable([
['State', 'Value'],
['Bắc Giang', 1],
['Bắc Kạn', 2],
['Cao Bằng', 3],
['Hà Giang', 4],
['Lạng Sơn', 5],
['Phú Thọ', 6],
['Quảng Ninh', 7],
['Thái Nguyên', 8],
['Tuyên Quang', 9],
['Lào Cai', 10],
['Yên Bái', 11],
['Điện Biên', 12],
['Hòa Bình', 13],
['Lai Châu', 14],
['Sơn La', 15],
['Bắc Ninh', 16],
['Hà Nam', 17],
['Hải Dương', 18],
['Hưng Yên', 19],
['Nam Định', 20],
['Ninh Bình', 21],
['Thái Bình', 22],
['Vĩnh Phúc', 23],
['Hà Nội City', 24],
['Hải Phòng City', 25],
['Hà Tĩnh', 26],
['Nghệ An', 27],
['Quảng Bình', 28],
['Quảng Trị', 29],
['Thanh Hóa', 30],
['Thừa Thiên–Huế', 31],
['Đắk Lắk', 32],
['Đắk Nông', 33],
['Gia Lai', 34],
['Kon Tum', 35],
['Lâm Đồng', 36],
['Bình Định', 37],
['Bình Thuận', 38],
['Khánh Hòa', 39],
['Ninh Thuận', 40],
['Phú Yên', 41],
['Quảng Nam', 42],
['Quảng Ngãi', 43],
['Đà Nẵng City', 44],
['Bà Rịa–Vũng Tàu', 45],
['Bình Dương', 46],
['Bình Phước', 47],
['Đồng Nai', 48],
['Tây Ninh', 49],
['Hồ Chí Minh City', 50],
['An Giang', 51],
['Bạc Liêu', 52],
['Bến Tre', 53],
['Cà Mau', 54],
['Đồng Tháp', 55],
['Hậu Giang', 56],
['Kiên Giang', 57],
['Long An', 58],
['Sóc Trăng', 59],
['Tiền Giang', 60],
['Trà Vinh', 61],
['Vĩnh Long', 62],
['VN-CT', 63],
['VN-DN', 64]
]);
var opts = {
region: 'VN',
displayMode: 'regions',
resolution: 'provinces',
};
var geochart = new google.visualization.GeoChart(
document.getElementById('visualization'));
geochart.draw(data, opts);
};
JSFiddle

If you notice that Ho Chi Minh City or Ha Noi are missing in this map. For example, I have to use Region Code "VN-SG" instead of "Ho Chi Minh", this take me lots of time to figure out. Here is full Vietnames Geo Chart Region :)
var data = google.visualization.arrayToDataTable([
['State', 'Value'],
['Bắc Giang', 1],
['Bắc Kạn', 2],
['Cao Bằng', 3],
['Hà Giang', 4],
['Lạng Sơn', 5],
['Phú Thọ', 6],
['Quảng Ninh', 7],
['Thái Nguyên', 8],
['Tuyên Quang', 9],
['Lào Cai', 10],
['Yên Bái', 11],
['Điện Biên', 12],
['Hòa Bình', 13],
['Lai Châu', 14],
['Sơn La', 15],
['Bắc Ninh', 16],
['Hà Nam', 17],
['Hải Dương', 18],
['Hưng Yên', 19],
['Nam Định', 20],
['Ninh Bình', 21],
['Thái Bình', 22],
['Vĩnh Phúc', 23],
['VN-HN', 24],
['Hải Phòng City', 25],
['Hà Tĩnh', 26],
['Nghệ An', 27],
['Quảng Bình', 28],
['Quảng Trị', 29],
['Thanh Hóa', 30],
['Thừa Thiên–Huế', 31],
['Đắk Lắk', 32],
['VN-72', 33],
['Gia Lai', 34],
['Kon Tum', 35],
['Lâm Đồng', 36],
['Bình Định', 37],
['Bình Thuận', 38],
['Khánh Hòa', 39],
['Ninh Thuận', 40],
['Phú Yên', 41],
['Quảng Nam', 42],
['Quảng Ngãi', 43],
['Đà Nẵng City', 44],
['Bà Rịa–Vũng Tàu', 45],
['Bình Dương', 46],
['Bình Phước', 47],
['Đồng Nai', 48],
['Tây Ninh', 49],
['VN-SG', 50],
['An Giang', 51],
['VN-55', 52],
['Bến Tre', 53],
['Cà Mau', 54],
['Đồng Tháp', 55],
['Hậu Giang', 56],
['Kiên Giang', 57],
['Long An', 58],
['Sóc Trăng', 59],
['Tiền Giang', 60],
['Trà Vinh', 61],
['Vĩnh Long', 62],
['VN-CT', 63],
['VN-DN', 63]]);