Related
An example is here: https://jsfiddle.net/beo4qjsg/1/
It's essentially the same code used for "Multiple line types" example in Google Charts documentation, with one change. Specifically, I have the following in options:
var options = {
width: 1000, height: 850,
chartArea: {left:75, top:75, height:450, width:550},
hAxis: {
title: 'Time'
},
vAxis: {
title: 'Popularity'
},
series: {
1: {curveType: 'function'}
}
};
The output image looks like this:
As can be seen here, the title for X-axis "Time" is quite far from the axis itself. Is there any way to bring it closer? It is important that I keep the chartArea.height set to a specific value, so that's something I cannot change.
in the option for chartArea, add an option for bottom
chartArea: {left:75, top:75, width:550, bottom: 40, height: '100%'},
see following working snippet...
google.charts.load('current', {
packages: ['corechart', 'line']
}).then(function() {
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 = {
width: 1000, height: 850,
chartArea: {left:75, top:75, width:550, bottom: 40, height: '100%'},
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 src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>
I want to print all even values in all object key end with odd value but the coding I made just now is only specified for arr1, arr3, and arr5. Can anyone suggest me how to fix 'let oddArr' method (maybe in loop) so that when I changed arr1 into arr7, the result would be the same.
var num = {
arr1 : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
arr2 : [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
arr3 : [21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
arr4 : [31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
arr5 : [41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
};
let oddArr = [...num.arr1, ...num.arr3, ...num.arr5] //need some correction here
let evenNum = oddArr.filter(number => number % 2 == 0);
console.log(evenNum.toString());
//help me fix 'let oddArr' (maybe in loop method) so that when I changed the object of the array (e.g: arr1 -> arr7) it would come out with the same result
//the result/output should be 2,4,6,8,10,22,24,26,28,30,42,44,46,48,50 based on var num
You can try like below using for in loop and it works with any last character as odd.
var num = {
arr1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
arr2: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
arr3: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
arr4: [31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
arr7: [41, 42, 43, 44, 45, 46, 47, 48, 49, 50]
};
let oddArr = [];
for (let key in num) {
if (key.charAt(key.length - 1) % 2 !== 0) {
oddArr = [...oddArr, ...num[key]];
}
}
let evenNum = oddArr.filter((number) => number % 2 === 0);
console.log(evenNum.toString());
You might want to use
let oddArr = Object.entries(num).filter( // filter key names
e => +e[0].replace("arr", '') % 2 !== 0 // replace "arr" and check if X in arrX is odd
).map(e => e[1]).flat() // merge values and flattern array
You can also make use of regex if the "arrX"-naming is not consistent:
+e[0].match(/\d+/) % 2 !== 0
See a working snippet below:
var num = {
arr1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
arr2: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
arr3: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
arr4: [31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
arr5: [41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
};
let oddArr = Object.entries(num).filter(
e => +e[0].replace("arr", '') % 2 !== 0
).map(e => e[1]).flat()
let evenNum = oddArr.filter(number => number % 2 == 0);
console.log(evenNum.toString());
This also works.
var num = {
arr1: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
arr2: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
arr3: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
arr4: [31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
arr5: [41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
arr6: [51, 52, 53, 55, 55, 56, 57, 58, 59, 60],
arr7: [61, 62, 63, 66, 65, 66, 67, 68, 69, 70],
};
var evenNums = Object.keys(num).filter((item) => {
itemNum = item.replace("arr", "");
return itemNum % 2 !== 0;
}).map((o) => num[o]).flat().filter((x) => x % 2 == 0);
console.log(evenNums);
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.
I have the following example data:
[0] = {01,02,03, 04,05,06, 07,08,09}
[1] = {11,12,13, 14,15,16, 17,18,19}
[2] = {21,22,23, 24,25,26, 27,28,29}
[3] = {31,32,33, 34,35,36, 37,38,39}
[4] = {41,42,43, 44,45,46, 47,48,49}
[5] = {51,52,53, 54,55,56, 57,58,59}
[6] = {61,62,63, 64,65,66, 67,68,69}
[7] = {71,72,73, 74,75,76, 77,78,79}
[8] = {81,82,83, 84,85,86, 87,88,89}
To create the new matrix I did this, Knowing it static 9x9
var grid2=[[],[]];
grid2.push([grid[0][0],grid[0][1], grid[0][2],grid[1][0],grid[1][1], grid[1][2],grid[2][0],grid[2][1], grid[2][2]]);
grid2.push([grid[3][0],grid[3][1], grid[3][2],grid[4][0],grid[4][1], grid[4][2],grid[5][0],grid[5][1], grid[5][2]]);
grid2.push([grid[6][0],grid[6][1], grid[6][2],grid[7][0],grid[7][1], grid[7][2],grid[8][0],grid[8][1], grid[8][2]]);
grid2.push([grid[0][3],grid[0][4], grid[0][5],grid[1][3],grid[1][4], grid[1][5],grid[2][3],grid[2][4], grid[2][5]]);
grid2.push([grid[3][3],grid[3][4], grid[3][5],grid[4][3],grid[4][4], grid[4][5],grid[5][3],grid[5][4], grid[5][5]]);
grid2.push([grid[6][3],grid[6][4], grid[6][5],grid[7][3],grid[7][4], grid[7][5],grid[8][3],grid[8][4], grid[8][5]]);
grid2.push([grid[0][6],grid[0][7], grid[0][8],grid[1][6],grid[1][7], grid[1][8],grid[2][6],grid[2][7], grid[2][8]]);
grid2.push([grid[3][6],grid[3][7], grid[3][8],grid[4][6],grid[4][7], grid[4][8],grid[5][6],grid[5][7], grid[5][8]]);
grid2.push([grid[6][6],grid[6][7], grid[6][8],grid[7][6],grid[7][7], grid[7][8],grid[2][6],grid[8][7], grid[8][8]]);
This works, but my question is, can this be done more efficiently / elegantly.
The point of this, is part of a larger code base, that takes the matrix and validates if it is a Sudoku solution.
You can use a simple algorithm for this
let idx = [0, 1, 2], idy = [0, 1, 2];
let result = [];
for(let i=0; i<9; i+=3){
for(let j=0; j<9; j+=3){
idx.forEach(e => {
idy.forEach(f => {
result.push(arr[i+e][j+f]);
})
})
}
}
You could take a nested approach for transforming the given 2D to a 4D array.
var data = [[1, 2, 3, 4, 5, 6, 7, 8, 9], [11, 12, 13, 14, 15, 16, 17, 18, 19], [21, 22, 23, 24, 25, 26, 27, 28, 29], [31, 32, 33, 34, 35, 36, 37, 38, 39], [41, 42, 43, 44, 45, 46, 47, 48, 49], [51, 52, 53, 54, 55, 56, 57, 58, 59], [61, 62, 63, 64, 65, 66, 67, 68, 69], [71, 72, 73, 74, 75, 76, 77, 78, 79], [81, 82, 83, 84, 85, 86, 87, 88, 89],],
result = data.reduce((r, a, i) => (
a.forEach((b, j) =>
[Math.floor(i / 3), Math.floor(j / 3), i % 3].reduce(
(s, k) => s[k] = s[k] || [],
r
)[j % 3] = b),
r),
[]);
console.log(result);
.as-console-wrapper { max-height: 100% !important; top: 0; }
How can I replace the numbers in the array which can be multiplied by 2 the string "even" and also for "odd".
var numbers = [
[243, 12, 23, 12, 45, 45, 78, 66, 223, 3],
[34, 2, 1, 553, 23, 4, 66, 23, 4, 55],
[67, 56, 45, 553, 44, 55, 5, 428, 452, 3],
[12, 31, 55, 445, 79, 44, 674, 224, 4, 21],
[4, 2, 3, 52, 13, 51, 44, 1, 67, 5],
[5, 65, 4, 5, 5, 6, 5, 43, 23, 4424],
[74, 532, 6, 7, 35, 17, 89, 43, 43, 66],
[53, 6, 89, 10, 23, 52, 111, 44, 109, 80],
[67, 6, 53, 537, 2, 168, 16, 2, 1, 8],
[76, 7, 9, 6, 3, 73, 77, 100, 56, 100]
];
for (var i = 0; i < numbers.length; i++) {
for (var j = 0; j < numbers[i].length; j++) {
if(numbers[i][j] % 2 === 0) {
numbers[i][j] += " even";
} else {
numbers [i][j] += " odd";
}
console.log(numbers[j][i]);
}
}
If you mean replace the number by string , you can do this but the arrays must defined to be any :
const numbers: any = [
[243, 12, 23, 12, 45, 45, 78, 66, 223, 3],
[34, 2, 1, 553, 23, 4, 66, 23, 4, 55],
[67, 56, 45, 553, 44, 55, 5, 428, 452, 3],
[12, 31, 55, 445, 79, 44, 674, 224, 4, 21],
[4, 2, 3, 52, 13, 51, 44, 1, 67, 5],
[5, 65, 4, 5, 5, 6, 5, 43, 23, 4424],
[74, 532, 6, 7, 35, 17, 89, 43, 43, 66],
[53, 6, 89, 10, 23, 52, 111, 44, 109, 80],
[67, 6, 53, 537, 2, 168, 16, 2, 1, 8],
[76, 7, 9, 6, 3, 73, 77, 100, 56, 100]
];
for (let i = 0; i < numbers.length; i++) {
for (let j = 0; j < numbers[i].length; j++) {
if ( numbers[i][j] % 2 === 0) {
numbers [i][j] = 'even';
} else {
numbers [i][j] = 'odd';
}
}
}
You need to switch the indices, for displaying the actual element. If not, you get some elements without changed values.
console.log(numbers[i][j]);
// ^ ^
var numbers = [
[243, 12, 23, 12, 45, 45, 78, 66, 223, 3],
[34, 2, 1, 553, 23, 4, 66, 23, 4, 55],
[67, 56, 45, 553, 44, 55, 5, 428, 452, 3],
[12, 31, 55, 445, 79, 44, 674, 224, 4, 21],
[4, 2, 3, 52, 13, 51, 44, 1, 67, 5],
[5, 65, 4, 5, 5, 6, 5, 43, 23, 4424],
[74, 532, 6, 7, 35, 17, 89, 43, 43, 66],
[53, 6, 89, 10, 23, 52, 111, 44, 109, 80],
[67, 6, 53, 537, 2, 168, 16, 2, 1, 8],
[76, 7, 9, 6, 3, 73, 77, 100, 56, 100]
];
for (var i = 0; i < numbers.length; i++) {
for (var j = 0; j < numbers[i].length; j++) {
if (numbers[i][j] % 2 === 0) {
numbers[i][j] += " even";
} else {
numbers[i][j] += " odd";
}
console.log(numbers[i][j]);
}
}