How to create chart using Springboot Json api - json

i have this service that give back this Json result :
{
"MANNOUBA": 1,
"Medinine": 4,
"Gabes": 5,
"Tunis": 22,
"Beja": 3,
"Kebili": 0,
"Sfax": 11,
"Laundry Making": 6,
"italia": 0,
"Sousse": 6,
"Desk": 1,
"Jendouba": 3,
"Mahdia": 6,
"Ben Arous": 19,
"Zaghouan": 4,
"Gafsa": 0,
"Kairouan": 6,
"Monastir": 18,
"metos": 1,
"Eleonetech": 2,
"Nabeul": 22,
"Mannouba": 9,
"BENAROUS": 8,
"Ariana": 21,
"Bizerte": 3
}
i want to put this data in a Barchart For my angular Project with the names in the X axis and the Numbers in the Y axis

With using Highcharts, you can preprocess your data to the: [name, y] format and use category axis type. Example:
for (let key in data) {
chartData.push([key, data[key]]);
}
Highcharts.chart('container', {
xAxis: {
type: 'category'
},
series: [{
type: 'column',
data: chartData
}]
});
Live demo: http://jsfiddle.net/BlackLabel/cjk3uboh/
Highcharts angular wrapper: https://www.npmjs.com/package/highcharts-angular

Related

Trying to understand logic behind map method

I am trying to understand the logic of using array methods within Map functions (such as push, slice, etc). Below, I have a function that is trying to add an element in the middle of a 2D array, but it comes out completely blank. Not sure what I am missing
function array () {
let numbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// Attempted outcome = [[1, 2, "Hello", 3], [4, 5, "Hello", 6], [7, 8, "Hello", 9]]
let newNumbers = numbers.map(function (row) {
return [row.slice(2, 0, "Hello")]
})
Logger.log(newNumbers);
}
In your script, how about the following modification?
From:
let newNumbers = numbers.map(function (row) {
return [row.slice(2, 0, "Hello")]
})
To:
let newNumbers = numbers.map(function (row) {
row.splice(2, 0, "Hello");
return row;
});
or, in this case, the following modification might be able to be used.
let newNumbers = numbers.map(([a, b, ...c]) => [a, b, "Hello", ...c]);
Testing:
let numbers = [[1, 2, 3], [4, 5, 6], [7, 8, 9]]
// Attempted outcome = [[1, 2, "Hello", 3], [4, 5, "Hello", 6], [7, 8, "Hello", 9]]
let newNumbers = numbers.map(function (row) {
row.splice(2, 0, "Hello");
return row;
});
console.log(newNumbers);
Reference:
splice()

Hide an array of columns in Google App Scripts

Beginner programmer here, apologies in advance if my vocabulary is not really accurate while explaining my issue.
I have a script that creates a custom menu (view) and hides different set of columns based on the view you want to see.
How can I change the script so instead of typing all my columns I can get an array of columns (in this case array [1 to 4] and [7 to 13])?
Below the particular section of my code that I'd like to change
function hideColumnsAll30() {
const obj = [{ sheetName: "Planning / Tracking", hide: [1, 2, 3, 4, 7, 8, 9, 11, 12, 13 ] }, { sheetName: "Resources", hide: [2, 4, 5, 9]}, {sheetName: "Documentation", hide:[2, 4, 5, 9]} ];
sample_(obj);
}
And here is the full script if it helps solving my issue
function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('Custom View')
.addItem('All - 30 days', 'hideColumnsAll30')
.addItem('All - 1 year', 'hideColumnsAll1y')
.addItem('Unhide All', 'showColumns')
.addToUi();
function showColumns() {
const sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
showColumnsInAllSheets_(sheets);
}
function hideColumnsAll30() {
const obj = [{ sheetName: "Planning / Tracking", hide: [1, 2, 3, 4, 7, 8, 9, 11, 12, 13 ] }, { sheetName: "Resources", hide: [2, 4, 5, 9]}, {sheetName: "Documentation", hide:[2, 4, 5, 9]} ];
sample_(obj);
}
function hideColumnsAll1y() {
const obj = [{ sheetName: "Planning / Tracking", hide: [1, 3, 4, 5, 6, 7, 8, 9, 11, 12, ] }, { sheetName: "Resources", hide: [2, 4, 5, 9]}, {sheetName: "Documentation", hide:[2, 4, 5, 9]} ];
sample_(obj);
}
Thanks in advance for your help!
From your following replying,
I need to type all the columns manually -> [1, 2, 3, 4, 7, 8, 9, 10, 11, 12, 13] I would like to have 2 arrays, like this -> [1 - 4], [7 -13]
I guessed that you wanted to retrieve an array of [1, 2, 3, 4, 7, 8, 9, 10, 11, 12, 13] by using 2 arrays like [1 - 4], [7 -13]. If my understanding is correct, how about the following sample script?
Sample script:
const input = [[1, 4], [7, 13]]; // 1st and 2nd element of each array are start and end values, respectively.
const res = input.flatMap(([start, end]) => [...Array(end)].map((_, i) => i + 1).slice(start - 1, end));
console.log(res);
When this script is run, an array of [ 1, 2, 3, 4, 7, 8, 9, 10, 11, 12, 13 ] is obtained.
References:
map()
flatMap()
Added:
From your following reply,
I actually found similar piece of code to add to my script online. However it does not fit my case as I need to give the name of each sheets where I want to hide columns.
And, in your provided script, I found the following message.
I have other speadsheets with 1000+ columns, so I cannot hide them manually from 1 to 1000. This is the reasons why I'm trying to include several arrays in my script
In this case, is the following script your expected script?
const columns = input => input.flatMap(([start, end]) => [...Array(end)].map((_, i) => i + 1).slice(start - 1, end));
function hideColumnsAll30() {
const obj = [{ sheetName: "Planning / Tracking", hide: columns([[1, 4], [7, 13]]) }, { sheetName: "Resources", hide: [2, 4, 5, 9]}, {sheetName: "Documentation", hide:[2, 4, 5, 9]} ];
sample_(obj);
}
At hide: columns([[1, 4], [7, 13]]), hide: [ 1, 2, 3, 4, 7, 8, 9, 10, 11, 12, 13 ] is created.
Suggestion
In your script I am not sure where you will use the arrays 1-4 and 7-13 since in the scripts specially on the part { sheetName: "Planning / Tracking", hide: [1, 2, 3, 4, 7, 8, 9, 11, 12, 13 ] } you are skipping number 10 here and on the other function you skipped 2.
Here's a suggestion on how you can use an array to your function. You can just add a new variable outside the functions to make it global variables, here is where you will insert the array values you want. You can then access these variables in any of your functions so you only have to edit one line in case you will adjust the columns.
Try this code:
function onOpen() {
const ui = SpreadsheetApp.getUi();
ui.createMenu('Custom View')
.addItem('All - 30 days', 'hideColumnsAll30')
.addItem('All - 1 year', 'hideColumnsAll1y')
.addItem('Unhide All', 'showColumns')
.addToUi();
};
//Declare arrays here***
//Put in array the columns for Resources and Documentation sheets
var resDocArray = [2,4,5,9];
//Put in array the columns for the planning/tracking tab for 2 different functions
var colAll30d = [1, 2, 3, 4, 7, 8, 9, 11, 12, 13];
var colAll1y = [1, 3, 4, 5, 6, 7, 8, 9, 11, 12]
//***
function showColumns() {
const sheets = SpreadsheetApp.getActiveSpreadsheet().getSheets();
showColumnsInAllSheets_(sheets);
};
function hideColumnsAll30() {
const obj = [{ sheetName: "Planning / Tracking", hide: colAll30d }, { sheetName: "Resources", hide: resDocArray}, {sheetName: "Documentation", hide:resDocArray} ];
sample_(obj);
};
function hideColumnsAll1y() {
const obj = [{ sheetName: "Planning / Tracking", hide: colAll1y }, { sheetName: "Resources", hide: resDocArray}, {sheetName: "Documentation", hide:resDocArray} ];
sample_(obj);
};
function sample_(obj) {
const ss = SpreadsheetApp.getActiveSpreadsheet();
const sheets = ss.getSheets();
showColumnsInAllSheets_(sheets);
const sheetObj = sheets.reduce((o, s) => (o[s.getSheetName()] = s, o), {});
obj.forEach(({ sheetName, hide }) => {
if (sheetObj[sheetName]) {
hide.forEach(h => sheetObj[sheetName].hideColumns(h, 1));
}
});
};
function showColumnsInAllSheets_(sheets) {
sheets.forEach(s => s.showColumns(1, s.getMaxColumns()));
};
You can also add the arrays the way Tanaike suggested.
Let me know if this helps!
Reference:
Hide columns in multiple sheets

Use Node.js data in HTML with HAPI

I have a server.js page and it get datas from database. I want to use this datas in a HTML page. How can I get this datas.
I don't use Express but Hapi (because i'm happy lol).
This is my code :
<script>var ctx = document.getElementById('graph').getContext('2d');
var graph = new Chart(ctx, {
type: 'line',
data: {
labels: ['Lundi', 'Mardi', 'Mercredi', 'Jeudi', 'Vendredi', 'Samedi', 'Dimanche'],
datasets: [{
label: 'CPU',
data: [22, 19, 25, 65, 30, 47, 14],
backgroundColor: "rgba(153,255,51,0.4)"
}, {
label: 'RAM',
data: [31, 29, 31, 35, 28, 34, 30],
backgroundColor: "rgba(255,153,0,0.4)"
}]
}
});
</script>
I want to change "22, 19, 25, 65, 30, 47, 14" by the new values gets with postgreSQL.
Thanks for your help.

Json format issue with flot chart in asp.net mvc application

I am working on a flot chart and I am unable to covert json string to required flot graph format. Below is what I tried.
My Json
Data: [
{ "Day": 8, "Visits": 145 },
{ "Day": 7, "Visits": 26 }
];
Format I am trying to achieve: [[0, 12], [1, 2], [2, 2], [3, 3], [4, 4]];
$(document).ready(function () {
var data = [{ "Day": 8, "Visits": 145 }, { "Day": 7, "Visits": 26 }];
var dailyHits = [];
$.each(data, function (_index, _item) {
var c = [_item["Day"], _item["Visits"]];
dailyHits.push(c);
});
//var dailyHits1= [[0, 12], [1, 2], [2, 2], [3, 3], [4, 4]];
var chartData = [dailyHits];
console.log(chartData);
$.plot($("#chartHits"), chartData);
});
Any help would be highly appreciated.
Hey i have same problem and i think problem is that you get data in string format, but array should be with Integers

Highcharts crashing Chrome

Highcharts seems to crash Chrome when I change the 'visible:false' attribute on a spline chart. Chrome seems to be ok if I set all the visible flags to the same thing.
This problem doesn't occur in Firefox
Is this a bug in highcharts?
Demo is here:
http://jsfiddle.net/TJ4mc/7/
$(function () {
$('#weeklyRevenue').highcharts({
chart: {
type: 'spline'
},
xAxis: {
type: 'datetime'
},
series: [{name: 'George Street', data: [[Date.UTC(2013, 5, 3), 5.4]], visible:true}, {name: 'Marrickville', data: [[Date.UTC(2013, 4, 20), 4.5],[Date.UTC(2013, 5, 10), 23.7],[Date.UTC(2013, 5, 17), 33.6]], visible:false}, {name: 'Liverpool Street', data: [[Date.UTC(2013, 4, 27), 7.3],[Date.UTC(2013, 5, 3), 10.7],[Date.UTC(2013, 5, 10), 6.8]], visible:false}, {name: 'Moving Average', dashStyle: 'ShortDash', marker:{enabled:false}, data: [[Date.UTC(2013, 5, 3), 5.4]], visible:true}]
});
});
You should replace this:
[Date.UTC(2013, 5, 3), 5.4]], visible:true}
with
{x:Date.UTC(2013, 5, 3), y: 5.4, visible:true}