We Keep Coding

Compare data in a column in DHTMLX Javascript

$('#valider').click(
function () {
var selected_rows = griddetenus.getCheckedRows(8);
var s = $.trim(selected_rows);
if (s.length > 0) {
$.blockUI();
for (var i = 0; i < selected_rows.length; i++) {
var statut = griddetenus.cellByIndex(selected_rows[i], 4).getValue();
if (statut == 'Gelé') {
$.unblockUI();
launchColorBoxPopup({
type: "Erreur",
title: popupTitre_Operation_impossible_compte_nominatif_gele,
message: popupMsg_Operation_impossible_compte_nominatif_gele,
width: "450"
});
} else {
var strJSON = loadDonnees();
$('#jsonString').val(strJSON);
submitURL();
}
}
}
});
I am trying to take all the data in a table column and compare with the word Gelé and get an error popup. But I only get it if Gelé is first in the row of that column.

Reserved value in a JavaScript variable is overwritten each time function is executed

I need to add a feature to Surface plots of Plotly. Feature is to change the range of Z axis data. problem is that it is only possible to limit the z axis value and expanding the values will not work. e.g. if I initialize 'Z Max' with 300 everything is fine but going back to 350 will keep the previous value. Although I have 'z_data' as my reference value that upon call of function by event listener should reserve the initially existing data, this does not happen and its values are updated to previously assigned 'Z Max' value.
Plotly.d3.csv('https://raw.githubusercontent.com/plotly/datasets/master/api_docs/mt_bruno_elevation.csv', function(err, rows){
function unpack(rows, key) {
return rows.map(function(row) { return row[key]; });
}
var z_data=[]
for(let i=0;i<24;i++) {
z_data.push(unpack(rows,i));
}
var allData = [];
for (let i=0; i<z_data.length; i++) {
for (let j=0; j<z_data[i].length; j++) {
allData.push(z_data[i][j])
}
}
var max = Math.max(...allData);
var min = Math.min(...allData);
setPlot(min, max);
function setPlot(zmin, zmax) {
console.log(z_data)
var newZData = z_data;
console.log('min specified: ' + zmin)
console.log('max specified: ' + zmax)
for (let i=0; i<newZData.length; i++) {
for (let j=0; j<newZData[i].length; j++) {
if (newZData[i][j] < zmin) {
newZData[i][j] = zmin
}
if (newZData[i][j] > zmax) {
newZData[i][j] = zmax
}
}
}
var data = [{
z: newZData,
type: 'surface'
}];
var layout = {
title: 'Mt Bruno Elevation',
autosize: false,
width: 500,
height: 500,
margin: {
l: 65,
r: 50,
b: 65,
t: 90,
}
};
Plotly.newPlot('myDiv', data, layout);
}
var zMin = document.querySelector("#zmin");
var zMax = document.querySelector("#zmax");
function updatePlot(){
setPlot(parseFloat(zMin.value), parseFloat(zMax.value));
}
zMin.addEventListener('change', updatePlot, false);
zMax.addEventListener('change', updatePlot, false);
Easier with JSFiddle:
http://jsfiddle.net/mwbbcyja/484/

Access Value of C3JS

I have the following Graph :
I want to access the max value of the y axis ( 11000000 ) in this case.
This value is dynamic so it can be different.
I want to save this value in a variable so i can use the max value of the y axis somewhere else.
How do i access the max value in c3js of that axis?
When i console.log(chart.axis.max());
console.log(chart.axis.range()); this values i get the value of y2 but not from y
Object {x: undefined, y: undefined, y2: 100}
Here is my full code :
/**
* #file
* Provides options for recline visualization.
*/
(function ($) {
Drupal.behaviors.ckan_graphmapper_chart_elastic = {
attach: function () {
var data = Drupal.settings.ckan_graphmapper.data;
/**
* Hensbergen
* #returns {*}
* #constructor
*/
function AvHensbergen() {
var parking = data.parkeren;
var parking_av_hensbergen = Array();
for (var j = 0; j < parking.length; j++) {
parking_av_hensbergen.push(parking[j].A_v_Hensbergen.percentage);
}
parking_av_hensbergen.unshift('A. v. Hensbergen');
return parking_av_hensbergen;
}
function AvHensbergenOnDate(res) {
data = res;
var parking = data.parkeren;
var parking_av_hensbergen = Array();
for (var j = 0; j < parking.length; j++) {
parking_av_hensbergen.push(parking[j].A_v_Hensbergen.percentage);
}
parking_av_hensbergen.unshift('A. v. Hensbergen');
return parking_av_hensbergen;
}
/**
* Gemeentehuis
* #returns {*}
* #constructor
*/
function Gemeentehuis() {
var parking = data.parkeren;
var parking_gemeentehuis = Array();
for (var j = 0; j < parking.length; j++) {
parking_gemeentehuis.push(parking[j].Gemeentehuis.percentage);
}
parking_gemeentehuis.unshift('Gemeentehuis');
return parking_gemeentehuis;
}
function GemeentehuisOnDate(res) {
data = res;
var parking = data.parkeren;
var parking_gemeentehuis = Array();
for (var j = 0; j < parking.length; j++) {
parking_gemeentehuis.push(parking[j].Gemeentehuis.percentage);
}
parking_gemeentehuis.unshift('Gemeentehuis');
return parking_gemeentehuis;
}
/**
* Coornhertpad
* #returns {*}
* #constructor
*/
function Coornhertpad() {
var parking = data.parkeren;
var parking_coornhertpad = Array();
for (var j = 0; j < parking.length; j++) {
parking_coornhertpad.push(parking[j].Coornhertpad.percentage);
}
parking_coornhertpad.unshift('Coornhertpad');
return parking_coornhertpad;
}
function CoornhertpadOnDate(res) {
data = res;
var parking = data.parkeren;
var parking_coornhertpad = Array();
for (var j = 0; j < parking.length; j++) {
parking_coornhertpad.push(parking[j].Coornhertpad.percentage);
}
parking_coornhertpad.unshift('Coornhertpad');
return parking_coornhertpad;
}
/**
* Duivenweide
* #returns {*}
* #constructor
*/
function Duivenweide() {
var parking = data.parkeren;
var parking_duivenweide = Array();
for (var j = 0; j < parking.length; j++) {
parking_duivenweide.push(parking[j].Duivenweide.percentage);
}
parking_duivenweide.unshift('Duivenweide');
return parking_duivenweide;
}
function DuivenweideOnDate(res) {
data = res;
var parking = data.parkeren;
var parking_duivenweide = Array();
for (var j = 0; j < parking.length; j++) {
parking_duivenweide.push(parking[j].Duivenweide.percentage);
}
parking_duivenweide.unshift('Duivenweide');
return parking_duivenweide;
}
/**
* Tricotage
* #returns {*}
* #constructor
*/
function Tricotage() {
var parking = data.parkeren;
var parking_tricotage = Array();
for (var j = 0; j < parking.length; j++) {
parking_tricotage.push(parking[j].Tricotage.percentage);
}
parking_tricotage.unshift('Tricotage');
return parking_tricotage;
}
function TricotageOnDate(res) {
data = res;
var parking = data.parkeren;
var parking_tricotage = Array();
for (var j = 0; j < parking.length; j++) {
parking_tricotage.push(parking[j].Tricotage.percentage);
}
parking_tricotage.unshift('Tricotage');
return parking_tricotage;
}
function getPassantenDates() {
var passers = data.passanten;
var passers_dates = Array();
for (var j = 0; j < passers.length; j++) {
passers_dates.push(passers[j].date);
}
passers_dates.unshift('x');
return passers_dates;
}
function getPassantenTotaal() {
var passers = data.passanten;
var passers_totaal = Array();
for (var j = 0; j < passers.length; j++) {
passers_totaal.push(passers[j].meetpunten.totaal);
}
passers_totaal.unshift('passanten');
return passers_totaal;
}
function getPassantenDatesOnDate(res) {
var data = res;
var passers = data.passanten;
var passers_dates = Array();
for (var j = 0; j < passers.length; j++) {
passers_dates.push(passers[j].date);
}
passers_dates.unshift('x');
return passers_dates;
}
function getPassantenTotaalOnDate(res) {
var data = res;
var passers = data.passanten;
var passers_total = Array();
for (var j = 0; j < passers.length; j++) {
passers_total.push(passers[j].meetpunten.totaal);
}
passers_total.unshift('passanten');
return passers_total;
}
function generateStarterGraph() {
var formatX;
var interval = jQuery('#interval_selector').val();
switch (interval) {
case 'day':
formatX = '%a %Y-%m-%d';
break;
case 'month':
formatX = '%m-%Y';
break;
case 'hour':
formatX = '%a %Y-%m-%d %H';
break;
case 'week':
formatX = '%a %Y-%m-%d';
break;
}
chart = c3.generate({
bindto: '#chatterplot_elastic',
data: {
x: 'x',
// #todo should be different based on interval selector.
xFormat: '%Y-%m-%d %H:%M:%S',
columns: [
getPassantenTotaal(),
getPassantenDates(),
AvHensbergen(),
Gemeentehuis(),
Coornhertpad(),
Duivenweide(),
Tricotage()
],
axes: {
'passanten': 'y',
'time_period': "x",
'A. v. Hensbergen': 'y2',
'Gemeentehuis': 'y2',
'Coornhertpad': 'y2',
'Duivenweide': 'y2',
'Tricotage': 'y2'
},
types: {
passanten: 'area-spline',
'A. v. Hensbergen': 'scatter',
'Gemeentehuis': 'scatter',
'Coornhertpad': 'scatter',
'Duivenweide': 'scatter',
'Tricotage': 'scatter'
},
onclick: function (e) {
updateGraphMapper(e);
}
},
axis: {
y2: {
show: true,
min: 0,
max: 100,
padding: {top: 0, bottom: 0},
},
x: {
type: 'timeseries',
localtime: false,
tick: {
format: formatX,
culling: {
max: 5,
}
}
}
}
});
}
/**
* Get the Starter Graph
*/
generateStarterGraph();
console.log(chart.axis.max());
console.log(chart.axis.range());
/**
* When a new date is being set
*/
$(".time-select").bind("change", function () {
var time_period = $('.time-select option:selected').val();
var start_date = new Date($("#slider").dateRangeSlider("values").min).toISOString();
var end_date = new Date($("#slider").dateRangeSlider("values").max).toISOString();
$.ajax({
url: Drupal.settings.basePath + Drupal.settings.veenendaal_parkeren.passanten_url,
type: 'POST',
data: {
interval: time_period,
start: start_date,
end: end_date
},
success: function (res) {
chart.load({
bindto: "#chatterplot_elastic",
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S',
columns: [
getPassantenTotaalOnDate(res),
getPassantenDatesOnDate(res),
AvHensbergenOnDate(res),
GemeentehuisOnDate(res),
CoornhertpadOnDate(res),
DuivenweideOnDate(res),
TricotageOnDate(res)
]
});
}
});
});
/**
* When a new date is being set
*/
$("#slider").bind("valuesChanged", function (e, data) {
var start_date = new Date(data.values.min).toISOString();
var end_date = new Date(data.values.max).toISOString();
$.ajax({
url: Drupal.settings.basePath + Drupal.settings.veenendaal_parkeren.passanten_url,
type: 'POST',
data: {
start: start_date,
end: end_date,
interval: $('#interval_selector').val()
},
success: function (res) {
updateGraph(
getPassantenTotaalOnDate(res),
getPassantenDatesOnDate(res),
AvHensbergenOnDate(res),
GemeentehuisOnDate(res),
CoornhertpadOnDate(res),
DuivenweideOnDate(res),
TricotageOnDate(res)
);
}
});
function updateGraph(yAxis, xAxis, Hensbergen, Gemeentehuis, Coornhertpad, Duivenweide, Tricotage) {
setTimeout(function () {
chart.load({
bindto: "#chatterplot_elastic",
x: 'x',
xFormat: '%Y-%m-%d %H:%M:%S',
columns: [
yAxis,
xAxis,
Hensbergen,
Gemeentehuis,
Coornhertpad,
Duivenweide,
Tricotage
]
});
}, 200);
}
});
}
};
})(jQuery, Drupal);

Use chart.axis.range() to get a object containing max{x,y,y2} and min{x,y,y2} as shown below, instead of chart.axis.max().

You can calc like this
Math.max.apply(null, chart.data.values('y')
//y is your axes name.
https://jsfiddle.net/9as8r2sq/
If you want to get max from many lines you can do it in cycle

Random number on Highcharts + AngularJS

I'm trying to create a chart that generates random numbers and it updates the maximum value after clicking on a button.
This is my controller:
$scope.max = 1;
$scope.randomNumber = function(max,min) {
var arr = [];
for (var i = 0; i < 60; i++) {
arr.push(Math.floor(Math.random()*(max-min+1)+min));
}
return arr;
}
$('#chart').highcharts({
series: [{
data: (function () {
var data = [];
for (var i = 0; i < 60; i++) {
data.push({
x: i,
y: $scope.randomNumber($scope.max,0)[0]
});
}
return data;
}())
}]
});
And this is the HTML that should update the maximum value:
<button ng-click="max = 10">10</button>
<button ng-click="max = 100">100</button>
<button ng-click="max = 1000">1000</button>
<button ng-click="max = 10000">10000</button>
However, it's not updating the maximum value. Any tips?
Here's a Plunker: http://plnkr.co/edit/N0UfORtSjYW5jaPGojXH?p=preview

You need to redraw the chart when you change the max value.
See the plnkr I watch the max value and when max changes call the draw function.
$scope.draw = function() {
$('#chart').highcharts({
series: [{
data: (function() {
var data = [];
for (var i = 0; i < 60; i++) {
data.push({
x: i,
y: $scope.randomNumber($scope.max, 0)[0]
});
}
return data;
}())
}]
});
}
$scope.draw();
$scope.$watch('max', function() {
$scope.draw();
});
http://plnkr.co/edit/Cp0V46z7UgnRiQsKNrtl?p=preview

multiple values in footer Row jqgrid

The JQgrid I have is generated through JavaScript as I have to show a calendar and corresponding values in it from the JSON. The problem I have is I have to show a count of all the values in the column at the bottom for which I thought Footer row would be a good option.
But the issue is that I am not able to use JavaScript to populate the footer row with the totals of all the values in that column.I want to iterate on the column names and fill each column with its value.
HTML:
<table id="jqGrid"></table>
JavaScript
$(document).ready( function () {
Date.prototype.addDays = function(days) {
var dat = new Date(this.valueOf());
dat.setDate(dat.getDate() + days);
return dat;
};
function GenerateColumns(startDate, stopDate, col, columnType, data) {
var dateArray = col;
var currentDate = startDate;
if(columnType === "cn") {
while (currentDate <= stopDate) {
dateArray.push(moment(currentDate).format('ddd DD'));
currentDate = currentDate.addDays(1);
}
} else {
var i = 0;
while (currentDate <= stopDate) {
dateArray.push({"name": moment(currentDate).format('ddd DD') , "index" : moment(currentDate).format('ddd DD')});
currentDate = currentDate.addDays(1);
i++;
}
}
return dateArray;
}
function countBaseline (columnNames) {
var actualBaseline = [];
columnNames.forEach (function (colnm, index) {
if (index > 3) {
var mydata = $("#jqGrid").jqGrid("getGridParam", "data"),
myColumn = $.map(mydata, function (item) {
return item[colnm];
});
var i = 0;
for (var j = 0; j < myColumn.length;j ++ ) {
if (myColumn[j] !== "NONE") {
i++;
}
}
actualBaseline.push(i);
return;
}
});
return actualBaseline;
}
var $grid = $("#jqGrid");
var cm = [
{name:'EmployeeID',index:'EmployeeID', width:65, sorttype: "int", editable:false,editoptions:{readonly:true,size:10} },
{name:'FirstName', formatter: function (cellvalue, options, rowObject) {
return cellvalue + ' ' + rowObject.LastName;
} },
{name:'EmployeeType'},
{name: 'Competencies'}
];
var cn = ['_id','Name', 'type', 'Competencies'];
$.ajax({
url: 'assets/data/scheduler2.json',
error: function (err, res) {
console.log("test");
},
success: function (result ) {
var startDate, days;
var endDate = moment(result.StartDate).add(result.rows[0].Days.length, 'day');
var day;
var columnNames = GenerateColumns(moment(result.StartDate)._d, endDate._d, cn, "cn"),
columnModels = GenerateColumns(moment(result.StartDate)._d, endDate._d, cm, "cm", result.rows);
var width = $grid.closest(".ui-jqgrid").parent().width();
$grid.jqGrid({
datatype: 'jsonstring',
datastr: result,
jsonReader: {
repeatitems: false
},
colNames: columnNames,
colModel: columnModels ,
width: 1880,
height: 450,
rowList:[10,20,30],
pager: '#jqGridPager',
sortname: 'id',
viewrecords: true,
rowNum: 150,
sortorder: "desc",
caption: result.ScheduleName,
footerrow : true,
userDataOnFooter : true, // use the userData parameter of the JSON response to display data on footer
});
var names = columnNames,
data= result.rows;
var mydata = [];
for (var i = 0; i < data.length; i++) {
mydata[i] = {};
for (var j = 0; j < data[i].Comp.length - 1; j++) {
mydata[i][names[j + 4]] = data[i].Comp[j];
if (names[j + 4].split(" ")[0] === "Sat" || names[j + 4].split(" ")[0] === "Sun")
$('#jqGrid').jqGrid('setCell',i, names[j + 4],"",{'background-color':'#AFEEEE', 'background-image':'none'});
}
}
for (var k = 0; k <= mydata.length; k++) {
$("#jqGrid").jqGrid('setRowData', k + 1, mydata[k], "first");
}
var actual = countBaseline(columnNames);
var i = 0;
columnNames.forEach (function (colnm, index) {
if (i > 3) {
$grid.jqGrid(
"footerData",
"set",
{colnm: actual[index]}
//{"Sun 06": actual[index]}
// {"Sun 06": 54 }
);
}
i++;
});
}
});
});
The main code is the last one, Where I have baseline which is an array of numbers of which I want to populate each value with a corresponding column. What happening is if you see the commented lines "set footerData" is only writing the value on one column but not writing values on all the columns with forEach.
var baseline = countBaseline(columnNames);
var i = 0;
columnNames.forEach (function (colnm, index) {
if (i > 3) {
$grid.jqGrid(
"footerData",
"set",
{colnm: baseline[index]}
// {"Sun 06": baseline[index]}
// {"Sun 06": 54 }
);
}
i++;
});
What I want to achieve: