Develop Reference

JavaScript - iterating through an array for checking condition

I am creating a high charts graph that I would like to dynamically give the graph color to depending on the title of an object. I currently have an array graphData that has an object title.
I have 5 possible results of titles:
"LOW", "MEDIUM-LOW", "MEDIUM", "MEDIUM-HIGH", AND "HIGH"
I am now attempting to iterate through my array and assign a color depending on what title the index has.
My entire graph receives one color based off the last title of the array. I would like the color to effect each index of the array seperartely.
For example: if "MEDIUM-HIGH" is the last title in the array, my entire graph gets #DD5F0C
Here is my code:
Array:
graphData: [ […]
​
0: Object { title: "LOW", result: 62582 }
​
1: Object { title: "MEDIUM-LOW", result: 57758 }
​
2: Object { title: "LOW", result: 8795 }
​
3: Object { title: "HIGH", result: 262525 }
​
4: Object { title: "MEDIUM-HIGH", result: 167168 } ]
let graphColor = ""
for (i = 0; i < graphData.length; i++) {
if (graphData[i].title === "LOW") {
graphColor = "#0D6302"
} else if (graphData[i].title === "MEDIUM-LOW") {
graphColor = "#0B7070"
} else if (graphData[i].title === "MEDIUM") {
graphColor = "#DC9603"
} else if (graphData[i].title === "MEDIUM-HIGH") {
graphColor = "#DD5F0C"
} else if (graphData[i].title === "HIGH") {
graphColor = "#C50710"
}
}
HighCharts code :
Highcharts.chart('container', {
chart: {
type: 'bar'
},
title: {
text: "Bar Graph"
},
xAxis: {
},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: {
text: '% of Total'
}
},
legend: {
reversed: false
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: `graphData[0].title`,
color: graphColor,
data: [graphData[0]],
}, {
name: 'graphData[1].title',
color: graphColor,
data: [graphData[1]],
showInLegend: false,
linkedTo: ":previous"
}, {
name: 'graphData[2].title,
color: graphData[0].title,
data: [graphData[2]]
}, {
name: graphData[3].title,
color: '#DC9603',
data: [graphData[3]]
}, {
name: graphData[4].title,
color: graphColor,
data: [graphData[4]]
}, {
name: graphData[5].title,
color: graphColor,
data: [graphData[5]]
}]
});
I am expecting my "color" to be dynamically generated based off of what graphData.title equals for that specific index.

You are having trouble because you have graphData.length number of entries, but only one graphColor variable to hold the color. Your code samples don't look complete so I'll make some assumptions about how the surrounding code must be. I recommend building up your series data in the for-loop directly so you can just use it in the Highcharts.chart call. The code is easier to read that way and probably more flexible too if you need to have more data rows.
// build the series data array here so it's simple to use in the chart call
const series = new Array(graphData.length);
for (let i = 0; i < graphData.length; i++) {
let graphColor = "#000000"; // a default color just in case
// can use if/else or a switch here
if (graphData[i].title === "LOW") {
graphColor = "#0D6302";
} else if (graphData[i].title === "MEDIUM-LOW") {
graphColor = "#0B7070";
} else if (graphData[i].title === "MEDIUM") {
graphColor = "#DC9603";
} else if (graphData[i].title === "MEDIUM-HIGH") {
graphColor = "#DD5F0C";
} else if (graphData[i].title === "HIGH") {
graphColor = "#C50710";
}
series[i] = {
name: graphData[i].title,
color: graphColor,
data: [graphData[i].result]
};
}
// Adjust the series data as needed
series[1].showInLegend = false;
series[1].linkedTo = ":previous";
Highcharts.chart("container", {
chart: { type: "bar" },
title: { text: "Bar Graph" },
xAxis: {},
yAxis: {
min: 0,
formatter: function() {
return this.value + "%";
},
title: { text: "% of Total" }
},
legend: { reversed: false },
plotOptions: { series: { stacking: "normal" } },
series: series
});

Not sure if I've properly understood what are you trying to do, but try this way:
const colorMap = { "LOW":"#0D6302",
"MEDIUM-LOW": "#0B7070",
"MEDIUM": "#DC9603",
"MEDIUM-HIGH": "#DD5F0C",
"HIGH":"#C50710"
}
...
series: [{
name: `graphData[0].title`,
color: colorMap[graphData[0].title],
data: [graphData[0]],
}, {

In the Highchart way - you can iterate through the series after chart initialization and set the wanted colors by particular series.
Demo: https://jsfiddle.net/BlackLabel/6hm4ebna/
chart: {
type: 'bar',
events: {
load() {
let chart = this;
chart.series.forEach(s => {
console.log(s)
if (s.name === 'test1') {
s.update({
color: 'red'
})
}
else if (s.name === 'test3') {
s.update({
color: 'green'
})
}
})
}
}
},
API: https://api.highcharts.com/highcharts/chart.events.load
If this wouldn't help please reproduce your attempt with the sample data on the online editor which I could work on.

remove selectedRow in handsontable using jQuery

I have an handsontable like the below image. After selecting any one of the rows (for example LastName) it should remove that particular row permanently. How can I achieve this using jQuery?
This is my code which I have written using the afterSelection function but I don't know how to delete that row.
this.tab.handsontable({
data: self.data,
dataSchema: {
columnsexpo: null,
placeholder: null
},
colHeaders: ['Columns Export'],
rowHeaders: true,
fixedColumns: true,
fillHandle: {
autoInsertRow: false,
},
columnSorting: true,
columns: [{
data: 'columnsexpo',
readOnly: true
}, ],
stretchH: 'all',
className: "htCenter",
height: 420,
afterChange: function() {},
beforeRemoveRow: function(row, col) {
var m = this.getDataAtCell(row, 0);
var mandatory = true;
self.MandatoryFields.forEach(function(item) {
if (!_.isEmpty(m)) {
var found = m.toLowerCase().includes(item.toLowerCase());
if (found) {
mandatory = false;
}
}
});
if (!mandatory) {
return false
} else
return true;
},
afterSelection: function(r, c) {
var da = this.getDataAtRow(r);
selectedRow = "";
selectedRow = da[0];
console.log(selectedRow);
},
afterRender: function() {
if (init) {
Events.trigger("DEW:ValidRequest", 1, self.checkValid());
}
init = true;
$('#tablesortable thead th div').filter(function() {
return $(this).text() == "Columns Export";
}).popup({
title: 'Columns Export',
position: 'top center'
});
}
});
EDIT
afterSelection: function(r,c,e){
var dat = this.getDataAtRow(r)
this.alter('remove_row', r, 1);
console.log(r);
},
Now after applying above function it is removing selected Row but if i select last row it is removing all previously selected row

use hot.alter('remove_row', 10, 2); inside after selection method of handsontable.
No need for jquery.
Or if you want to use jquery, store the handsontable instance in some varitable and call the same on row selection.
Update -- added deselectCell before removing the row. after removing the row, previous row is getting selected which is causing the problem.
afterSelection: function(r, c, e) {
this.deselectCell()
this.alter('remove_row', r, 1);
}

Selecting Points over multiple Highcharts treemaps

Aim: I have two identical Highcharts treemaps and if I select one point of one chart, I also want to send a select event to the second chart's point with the same id/ same position.
Progress:
I followed these answers that tackle the same problem, only for line graphs, and then adopted the fiddle posted there for treemaps. You can find it here as well as below:
$(function () {
var prevPid = 0;
var chart = {
plotOptions: {
series: {
allowPointSelect: true,
point: {
'events': {
select: function () {
var pId = this.series.data.indexOf(this);
var chart1 = $('#container').highcharts();
var chart2 = $('#container2').highcharts();
chart1.series[0].data[pId].setState('select');
chart2.series[0].data[pId].setState('select');
chart2.series[0].data[prevPid].setState('');
prevPid = pId;
}
}
}
}
},
series: [{
type: "treemap",
data: [{
name: 'A',
value: 6,
colorValue: 1
}, {
name: 'B',
value: 6,
colorValue: 2
}, {
name: 'C',
value: 4,
colorValue: 3
}]
}]
};
$('#container').highcharts(chart);
$('#container2').highcharts(chart);
});
Problem: However the corresponding point of the other chart is not selected. Any advice on how to fix it?

Highcharts v5+
Instead of playing around with states, it's easier to use point.update(), demo: http://jsfiddle.net/BlackLabel/hy12z5u7/
Settings:
chart: {
events: {
load: function() {
$.each(this.series, function(i, s) {
$.each(s.data, function(j, p) {
p.pointAttr = {
select: {
color: "red"
}
};
});
});
}
}
},
And action:
point: {
'events': {
click: function() {
var pId = this.series.data.indexOf(this);
var chart1 = $('#container').highcharts();
var chart2 = $('#container2').highcharts();
chart1.series[0].data[prevPid].update({
color: chart1.series[0].color
});
chart2.series[0].data[prevPid].update({
color: chart2.series[0].color
});
chart1.series[0].data[pId].update({
color: chart1.series[0].data[pId].pointAttr.select.color
});
chart2.series[0].data[pId].update({
color: chart2.series[0].data[pId].pointAttr.select.color
});
prevPid = pId;
}
}
}
Highcharts < v4
The problem is that treemap doesn't have states.select option (API: http://api.highcharts.com/highcharts#plotOptions.treemap.states ) so even, when you force select-ed state, then nothing visually changes on your chart. You can add that state manually: http://jsfiddle.net/tqa6uxdb/3/
chart: {
events: {
load: function() {
$.each(this.series, function(i, s) {
$.each(s.data, function(j, p) {
p.pointAttr.select = {
fill: "red"
}
});
});
}
}
},
Note: your logic for selecting/deselecting points is missing checking if currently clicked point is already clicked.

Highcharts / HighStock - How to parse JSON correctly

I’m trying to adapt this Highstock chart example for use with my data. Here it is their working in JSFiddle.
So I have multiple REST endpoints returning JSON in the following format (a collection of timestamps and decimals):
{
"data" : {
"1440151410002" : 0.00430013850798903,
"1440151420001" : 0.00403626002690655,
"1440151430002" : 0.00376276477784804,
"1440151440001" : 0.00381307106855453,
"1440151450002" : 0.0039385712356139,
"1440151460002" : 0.0038632842565838,
"1440151470002" : 0.00407696207243675,
"1440151480002" : 0.0042298508094211,
"1440151490002" : 0.00411973200243665,
"1440151500002" : 0.00360435516702981,
"1440151510001" : 0.00426992197206649,
"1440151520002" : 0.00354089360750537,
"1440151530002" : 0.00400806659263663
}
}
As in the HighStock example, the intention is to loop over the endpoints and pull in the JSON before creating the chart.
In order for HighStock to read it correctly, I realise I need to map it to something like:
[[timestamp, 1.23], [timestamp, 1.24] ...]
I'm having a problem figuring out how to map between my JSON format for each series and that required to render the chart correctly, so I'm currently getting a blank chart.
My JS looks like this:
$(function () {
var seriesOptions = [],
seriesCounter = 0,
names = ['P', 'Q', 'V', 'Q_C'],
// create the chart when all data is loaded
createChart = function () {
$('#chart4').highcharts('StockChart', {
rangeSelector: {
selected: 4
},
yAxis: {
labels: {
formatter: function () {
return (this.value > 0 ? ' + ' : '') + this.value + '%';
}
},
plotLines: [{
value: 0,
width: 2,
color: 'silver'
}]
},
plotOptions: {
series: {
compare: 'percent'
}
},
tooltip: {
pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
valueDecimals: 2
},
series: seriesOptions
});
};
$.each(names, function (i, name) {
$.getJSON('/live/data/' + name.toLowerCase(), function (data) {
seriesOptions[i] = {
name: name,
data: data['data']
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});
});
Any help would be appreciated!
Thanks,
Hugh.

You are passing a classic Object instead of an array in seriesOptions[i].data. You should do:
$.each(names, function (i, name) {
$.getJSON('/live/data/' + name.toLowerCase(), function (data) {
var data_tmp = [];
Object.keys(data["data"]).forEach(function (key) {
data_tmp.push([parseInt(key), data["data"][key]]);
});
seriesOptions[i] = {
name: name,
data: data_tmp
};
// As we're loading the data asynchronously, we don't know what order it will arrive. So
// we keep a counter and create the chart when all the data is loaded.
seriesCounter += 1;
if (seriesCounter === names.length) {
createChart();
}
});
});

Handsonetable - can't hide columns

I'm trying to hide few colums. Here is my code:
function setTable(options){
var data = options.data;
var container = options.container;
var dataSchema = options.dataSchema;
var colHeaders = options.colHeaders;
var columns = options.columns;
var table = new Handsontable(container, {
data: data,
disableVisualSelection:true,
dataSchema: dataSchema,
colHeaders:colHeaders,
columns:columns,
currentRowClassName: 'selected',
columnSorting:true,
columnStreching:true,
autoColumnSize: true,
stretchH: 'all',
outsideClickDeselects: false
});
Handsontable.hooks.add('afterSelectionEnd', function(e){
var data = this.getDataAtRow(e);
moveToAlert({
n:data[1],
v:data[4],
lt:data[7],
ln:data[8]
});
}, table);
Handsontable.hooks.add('afterOnCellMouseOver', function(e,c){
var data = this.getDataAtRow(c.row);
if(data[0] == null) return false;
moveToAlert({
n:data[1],
v:data[4],
lt:data[7],
ln:data[8]
})
}, table);
return table;
}
actualData.push(
{
reg:d.r,
name:d.n,
fd:d.fd,
td:d.td,
v:d.v,
rgps:d.rg,
loc:"PL, Wrocław, Autostradowa Obwodnica Wrocławia",
lt:d.lt,
ln:d.ln,
c:'a_'+d.c
}
);
}
if (TABLE_ACTUAL) TABLE_ACTUAL.destroy();
TABLE_ACTUAL = setTable({
data:actualData,
container:document.getElementById('actual-table'),
dataSchema:{reg: null, name: null, fd: null, td: null, v: null, rgps: null, loc: null, lt:null, ln:null,c:null},
colHeaders:["Pojazd", "Nazwa", "Od", "Do", "Wartość", "Droga", "Lokalizacja"],
columns:[
{
data:"reg",
editor:false,
},
{
data:"name",
editor:false,
},
{
data:"fd",
editor:false,
},
{
data:"td",
editor:false,
},
{
data:"v",
editor:false,
},
{
data:"rgps",
editor:false,
},
{
data:"loc",
editor:false,
}
],
});
So i want to hide 3 last columns ( lt,ln,c) and also disable editor on all colums. Why this way not working? I dont want to use customrender becouse i think its unnecessary.
EDIT
SOLVED (thanks to #ZekeDroid)
I used getSourceDataAtRow() instead of getDataAtRow().
Also used fix for sorted table: http://docs.handsontable.com/0.16.1/demo-sorting-data.html and more specifically this : physicalIndex = instance.sortIndex[logicalIndex][0]; as a index for selected row.

It's likely due to the dataSchema option. You are including the columns to show there, even if null. Try removing the dataSchema option entirely. But please provide a fiddle so we can be more sure about it.