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:
Related
$('#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.
I am using a tour booking theme. I do not want the dates in the theme reservation calendar to be opened in the form of a calendar and I want to remove the passive dates that appear on the calendar. How should I code for this. Can you help me?
I want to do:I want to do:
on my site:on my site:
calendar plugin:calendar plugin:
(function ($) {
new Vue({
el:'#bravo_tour_book_app',
data:{
id:'',
extra_price:[],
person_types:[],
message:{
content:'',
type:false
},
html:'',
onSubmit:false,
start_date:'',
start_date_html:'',
step:1,
guests:1,
price:0,
max_guests:1,
start_date_obj:'',
duration:0,
allEvents:[],
buyer_fees:[],
},
watch:{
extra_price:{
handler:function f() {
this.step = 1;
},
deep:true
},
start_date(){
this.step = 1;
},
guests(){
this.step = 1;
},
person_types:{
handler:function f() {
this.step = 1;
},
deep:true
},
},
computed:{
total_price:function(){
var me = this;
if (me.start_date !== "") {
var total = 0;
var total_guests = 0;
var startDate = new Date(me.start_date).getTime();
for (var ix in me.allEvents) {
var item = me.allEvents[ix];
var cur_date = new Date(item.start).getTime();
if (cur_date === startDate) {
if (item.person_types != null) {
me.person_types = Object.assign([], item.person_types);
} else {
me.person_types = null
}
me.max_guests = parseInt(item.max_guests);
me.price = parseFloat(item.price);
}
}
// for person types
if (me.person_types != null) {
for (var ix in me.person_types) {
var person_type = me.person_types[ix];
total += parseFloat(person_type.price) * parseInt(person_type.number);
total_guests += parseInt(person_type.number);
}
}else{
// for default
total_guests = me.guests;
total += me.guests * me.price;
}
for (var ix in me.extra_price) {
var item = me.extra_price[ix];
var type_total = 0;
if (item.enable === true) {
switch (item.type) {
case "one_time":
type_total += parseFloat(item.price);
break;
case "per_hour":
if (me.duration > 0) {
type_total += parseFloat(item.price) * parseFloat(me.duration);
}
break;
case "per_day":
if (me.duration > 0) {
type_total += parseFloat(item.price) * Math.ceil(parseFloat(me.duration) / 24);
}
break;
}
if (typeof item.per_person !== "undefined") {
type_total = type_total * total_guests;
}
total += type_total;
}
}
for (var ix in me.buyer_fees) {
var item = me.buyer_fees[ix];
var type_total = 0;
type_total += parseFloat(item.price);
if (typeof item.per_person !== "undefined") {
type_total = type_total * total_guests;
}
total += type_total;
}
return total;
}
return 0;
},
total_price_html:function(){
if(!this.total_price) return '';
return window.bravo_format_money(this.total_price);
},
daysOfWeekDisabled(){
var res = [];
for(var k in this.open_hours)
{
if(typeof this.open_hours[k].enable == 'undefined' || this.open_hours[k].enable !=1 ){
if(k == 7){
res.push(0);
}else{
res.push(k);
}
}
}
return res;
}
},
created:function(){
for(var k in bravo_booking_data){
this[k] = bravo_booking_data[k];
}
},
mounted(){
var me = this;
/*$(".bravo_tour_book").sticky({
topSpacing:30,
bottomSpacing:$(document).height() - $('.end_tour_sticky').offset().top + 40
});*/
var options = {
singleDatePicker: true,
showCalendar: false,
sameDate: true,
autoApply : true,
disabledPast : true,
dateFormat : bookingCore.date_format,
enableLoading : true,
showEventTooltip : true,
classNotAvailable : ['disabled', 'off'],
disableHightLight: true,
minDate:this.minDate,
opens:'left',
isInvalidDate:function (date) {
for(var k = 0 ; k < me.allEvents.length ; k++){
var item = me.allEvents[k];
if(item.start == date.format('YYYY-MM-DD')){
return item.active ? false : true;
}
}
return false;
}
};
if (typeof daterangepickerLocale == 'object') {
options.locale = _.merge(daterangepickerLocale,options.locale);
}
this.$nextTick(function () {
$(this.$refs.start_date).daterangepicker(options).on('apply.daterangepicker',
function (ev, picker) {
me.start_date = picker.startDate.format('YYYY-MM-DD');
me.start_date_html = picker.startDate.format(bookingCore.date_format);
})
.on('update-calendar',function (e,obj) {
me.fetchEvents(obj.leftCalendar.calendar[0][0], obj.leftCalendar.calendar[5][6])
});
});
},
methods:{
handleTotalPrice: function () {
},
fetchEvents(start,end){
var me = this;
var data = {
start: start.format('YYYY-MM-DD'),
end: end.format('YYYY-MM-DD'),
id:bravo_booking_data.id,
for_single:1
};
console.log(data);
$.ajax({
url: bravo_booking_i18n.load_dates_url,
dataType:"json",
type:'get',
data:data,
beforeSend: function() {
$('.daterangepicker').addClass("loading");
},
success:function (json) {
me.allEvents = json;
var drp = $(me.$refs.start_date).data('daterangepicker');
drp.allEvents = json;
drp.renderCalendar('left');
if (!drp.singleDatePicker) {
drp.renderCalendar('right');
}
$('.daterangepicker').removeClass("loading");
},
error:function (e) {
console.log(e);
console.log("Can not get availability");
}
});
},
formatMoney: function (m) {
return window.bravo_format_money(m);
},
validate(){
if(!this.start_date)
{
this.message.status = false;
this.message.content = bravo_booking_i18n.no_date_select;
return false;
}
return true;
},
If what you would like to use is simply a drop down list, why don't you create a simple one as follows?
<select name="availableDates">
<option value="0">Select a date</option>
<?php
//get the available dates from your database (or whatever source)
$getDates = $connection->prepare("select Date from availableDatesTable where hotelID=?");
$getDates->bind_param('i',$hotelID); //you could get the hotel ID via a $_GET variable
//store the results into an array
//loop through the array as follows:
foreach($resultArray as $res)
{
echo '<option value="'.$res.'">'.date('d F Y',$res).'</option>';
}
?>
</select>
Not sure what data source you are using, but this is a suggestion that could hopefully lead to the solution you're seeking.
I'm trying to get the min and max value of a Dataview with the help of getColumnRange(). Unfortunately the values I get are not the ones I'd expect. Can someone advise me how I can get the correct values? The value I'd expect as max is 331M (the highest bar on the bar chart), but I get 8,5M. I tried to better my understanding of the DataView object with console.log(), however that didn't quite help me (line 65-71)
https://jsfiddle.net/zhp5rny6/3/
var data = new google.visualization.DataTable({
cols: [
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Manila","pattern":"","type":"number"},
{id:"","label":"Bangkok","pattern":"","type":"number"},
{id:"","label":"New York","pattern":"","type":"number"},
{id:"","label":"Sydney","pattern":"","type":"number"}],
rows:[
{c:[{v:"Glasses"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"Joysticks"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"Laptops"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"PS4"},{v:78002243.0557997},{v:47591320.6768999},{v:43832560.9528002},{v:161580254.021496}]},
{c:[{v:"XBOX One"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"Smartphones"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"Chairs"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"CPU"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"RAM"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]},
{c:[{v:"Table"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"Water"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]}]
});
var formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
var view = getDataView(data);
function getDataView(dataTable) {
var dataView;
var viewColumns = [];
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if(index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function (dt, row) {
for(var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for(var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return formatter.formatValue(value).toString();
}
},
type: 'string',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
for(var z = 0; z < dataView.getNumberOfColumns(); z++) {
console.log(JSON.stringify(dataView.getColumnRange(z)));
}
console.log(JSON.stringify(dataView.getViewColumns()));
console.log(JSON.stringify(viewColumns));
return dataView;
}
the reason you get "8.5M" instead of "331M" is because the column type = 'string'
alphabetically, "8.5M" is greater than "331M"
to correct this issue, use a column type of 'number'.
when building the data view annotation column,
and return an object with both the value (v:) and formatted value (f:).
viewColumns.push({
calc: function (dt, row) {
for(var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for(var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return { // <-- return object here
v: value,
f: formatter.formatValue(value)
};
}
},
type: 'number', // <-- change to number
role: 'annotation',
});
see following working snippet...
google.charts.load("44", {packages:['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable({
cols: [
{id:"","label":"Products","pattern":"","type":"string"},
{id:"","label":"Manila","pattern":"","type":"number"},
{id:"","label":"Bangkok","pattern":"","type":"number"},
{id:"","label":"New York","pattern":"","type":"number"},
{id:"","label":"Sydney","pattern":"","type":"number"}],
rows:[
{c:[{v:"Glasses"},{v:-1270.7287},{v:-4486.0961},{v:-1019.4662},{v:3763827.8335}]},
{c:[{v:"Joysticks"},{v:145543.985},{v:2108039.5802},{v:266392.5277},{v:6006566.18690001}]},
{c:[{v:"Laptops"},{v:1723781.2686},{v:4435404.56789999},{v:7060065.3164},{v:17514581.1763}]},
{c:[{v:"PS4"},{v:78002243.0557997},{v:47591320.6768999},{v:43832560.9528002},{v:161580254.021496}]},
{c:[{v:"XBOX One"},{v:10507117.0145001},{v:8059953.41120002},{v:14103816.4604002},{v:34676509.4036004}]},
{c:[{v:"Smartphones"},{v:2373067.7893},{v:-53954.2187},{v:30783391.8722},{v:37288122.5537999}]},
{c:[{v:"Chairs"},{v:86583.2876},{v:71082.0195},{v:79813.2918},{v:22959813.0499999}]},
{c:[{v:"CPU"},{v:12479599.4709999},{v:22650137.9890997},{v:17562381.7794999},{v:25589299.8099997}]},
{c:[{v:"RAM"},{v:null},{v:-59.1},{v:282.7517},{v:1461239.6186}]},
{c:[{v:"Table"},{v:-566.5377},{v:-217.3444},{v:-865.114},{v:356870.886599999}]},
{c:[{v:"Water"},{v:870883.521900001},{v:1128581.9856},{v:1177332.008},{v:3922057.50240001}]}]
});
var formatter = new google.visualization.NumberFormat({
pattern: 'short'
});
for (var i = 1; i < data.getNumberOfColumns(); i++) {
formatter.format(data, i);
}
var view = getDataView(data);
function getDataView(dataTable) {
var dataView;
var viewColumns = [];
for (var i = 0; i < dataTable.getNumberOfColumns(); i++) {
addViewColumn(i);
}
function addViewColumn(index) {
viewColumns.push(index);
if(index == (dataTable.getNumberOfColumns() - 1)) {
viewColumns.push({
calc: function (dt, row) {
for(var e = 0; e < dt.getNumberOfRows(); e++) {
var value = 0;
for(var u = 1; u < dt.getNumberOfColumns(); u++) {
value += dt.getValue(row, u);
}
return {
v: value,
f: formatter.formatValue(value)
};
}
},
type: 'number',
role: 'annotation',
});
}
}
dataView = new google.visualization.DataView(dataTable);
dataView.setColumns(viewColumns);
for(var z = 0; z < dataView.getNumberOfColumns(); z++) {
console.log(JSON.stringify(dataView.getColumnRange(z)));
}
console.log(JSON.stringify(dataView.getViewColumns()));
console.log(JSON.stringify(viewColumns));
return dataView;
}
var options = {
annotations: {
alwaysOutside: true,
textStyle: {
fontSize: 10
}
},
height: 400,
isStacked: true
};
var chart = new google.visualization.ColumnChart(document.getElementById("columnchart_values"));
chart.draw(view, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="columnchart_values"></div>
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
My Parse Javascript cloudcode is not working correctly. Basically all my objects have a corresponding "index/menindex & womenindex" number.
If both genders are selected- all items show up (as they should).
If just male or female is selected- it only shows items up to 122309 (womenindex) or 80811 (menindex). I've tried for weeks but cannot figure this one out.
Parse.Cloud.define("standardQuery", function(request, response) {
var maxIndex = 124940;
var maxWomenIndex = 135354;
var maxMenIndex = 105357;
var arrayOfRandomNumbers = new Array();
var query = new Parse.Query("garmentsAPI");
if (request.params.gender === "Female") {
//arrayOfRandoms draws on womenIndex, gender set to female
for (var k = 0; k < 40; k++) {
var randomIndex = Math.floor((Math.random()*maxWomenIndex)+1);
arrayOfRandomNumbers.push(randomIndex);
}
query.containedIn("womenIndex", arrayOfRandomNumbers);
query.notEqualTo ("viewers", request.params.user);
}else if (request.params.gender === "Male") {
for (var k = 0; k < 35; k++) {
var randomIndex = Math.floor((Math.random()*maxMenIndex)+1);
arrayOfRandomNumbers.push(randomIndex);
}
query.containedIn("menIndex", arrayOfRandomNumbers);
query.notEqualTo ("viewers", request.params.user);
//arrayOfRandoms draws on menIndex, gender set to male
}else{
for (var k = 0; k < 35; k++) {
var randomIndex = Math.floor((Math.random()*maxIndex)+1);
arrayOfRandomNumbers.push(randomIndex);
}
query.containedIn("index", arrayOfRandomNumbers);
query.notEqualTo ("viewers", request.params.user);
};
if (request.params.gender !== "both") {
query.equalTo ("gender", request.params.gender);
};
query.find({
success: function(objectsInQuery){
if (objectsInQuery.length > 15) {
var arrayOSelectedObjects = new Array();
for (var j = 0; j < 15; j++) {
arrayOSelectedObjects.push(objectsInQuery[j]);
}
response.success(arrayOSelectedObjects);
} else{
// var existingCount = objectsInQuery.count;
var missingIndex = 15 - objectsInQuery.length;
// missingIndex = missingIndex - objectsInQuery.count;
var query = new Parse.Query("garmentsAPI");
if (request.params.gender !== "both") {
query.equalTo ("gender", request.params.gender);
};
query.notEqualTo ("viewers", request.params.user);
query.limit(missingIndex);
// query.limit = 9 - objectsInQuery.count;
query.find({
success: function(objectsInQuery2){
if ((objectsInQuery.length + objectsInQuery2.length) === 15) {
for (var l = 0; l < missingIndex; l++) {
objectsInQuery.push(objectsInQuery2[l]);
}
response.success(objectsInQuery);
} else {
//who knows
var maxIndex2 = 15000;
var arrayOfRandomNumbers2 = new Array();
for (var m = 0; m < 15; m++) {
var randomIndex = Math.floor((Math.random()*maxIndex)+1);
// var randomIndex = 15;
arrayOfRandomNumbers2.push(randomIndex);
}
var query = new Parse.Query("garmentsAPI");
query.containedIn("index", arrayOfRandomNumbers2);
if (request.params.gender !== "both") {
query.equalTo ("gender", request.params.gender);
};
// query.notEqualTo ("viewers", request.params.user);
query.limit(15);
query.find ({
success: function (objectsInQuery3){
response.success (objectsInQuery3);
},
error:function() {
response.error("there was an error");
}
});
};
},
error:function() {
response.error ("didn't work");
}
}
);
};
},
error:function() {
response.error ("didn't work");
}
});
});
For starters, all the curly braces you've posted don't match up. Specifically, I can't find the closing brace for this if statement...
if (objectsInQuery.length > 15) {
It should be the first character of line 173, according to what you've posted...
as such...
});
};
},
error:function() {
response.error ("didn't work");
}
});
});
vs. your post, as follows...
);
};
},
error:function() {
response.error ("didn't work");
}
});
});