I try to connect several range slider from: http://ionden.com/a/plugins/ion.rangeSlider/en.html so that the end of the first slider is automatically recognized as the fix start of the second and so on. Furthermore this should be updated on the fly. My current code works only partially - connection works (even it is not fixed), but the real time update is not working.
Attached the code:
from = 0,
to = 0;
from2 = 0,
to2 = 0;
var saveResult = function (data) {
from = data.from;
to = data.to;
};
var writeResult = function () {
var result = from;
$result.html(result);
};
var saveResult2 = function (data) {
from2 = data.from;
to2 = data.to;
};
var writeResult2 = function () {
var result2 = from2;
$result.html(result);
};
$("#select-length").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 20,
from: 0,
to: 10,
type: 'double',
step: 0.25,
prefix: "",
grid: true,
onStart: function (data) {
saveResult(data);
writeResult();
},
onChange: function(data){
saveResult(data);
writeResult();
},
onChange: saveResult,
onFinish: saveResult
});
$("#select-length2").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: 0,
max: 20.16,
from: to,
to: 12,
type: 'double',
step: 0.25,
prefix: "",
grid: true,
onStart: function (data) {
saveResult2(data);
writeResult2();
},
onChange: function(data){
saveResult2(data);
writeResult2();
},
onChange: saveResult2,
onFinish: saveResult2
});
$("#select-length3").ionRangeSlider({
hide_min_max: true,
keyboard: true,
min: from2,
max: 20.16,
from: 12,
to: 12,
type: 'double',
step: 0.25,
prefix: "",
grid: true
});
Ion.RangeSlider realtime update is doing this way: http://jsfiddle.net/IonDen/4k3d4y3s/
var $range1 = $(".js-range-slider-1"),
$range2 = $(".js-range-slider-2"),
range_instance_1,
range_instance_2;
$range1.ionRangeSlider({
type: "single",
min: 100,
max: 1000,
from: 500,
onChange: function (data) {
range_instance_2.update({
from: data.from
});
}
});
range_instance_1 = $range1.data("ionRangeSlider");
$range2.ionRangeSlider({
type: "single",
min: 100,
max: 1000,
from: 500,
onChange: function (data) {
range_instance_1.update({
from: data.from
});
}
});
range_instance_2 = $range2.data("ionRangeSlider");
Related
I had used for loop to iterate nested objects, I am trying to replace forEach with the map function, without success. Can anyone help me with this?
schema.js
const products_schema = {
product_name: {
auto: false,
type: "string",
min: 5,
max: 10,
special_characters: ['_', ' '],
numbers: true,
alphabet: true,
required: true,
correct: ""
},
product_image: {
auto: false,
type: "array:string",
min: 0,
max: 50,
required: true
}
}
const specification_schema = {
brand: {
auto: false,
type: "string",
min: 10,
max: 50,
special_characters: ['_', ' '],
numbers: true,
alphabet: true,
required: true
}
}
let schema = {
products_schema:products_schema,
specification_schema:specification_schema
}
for(var key in schema)
{
var value = schema[key]
Object.keys(value).forEach(key => console.log(value[key].type));
}
"Expected output:"
string
array:string
string
use Object.values then use map to return only type property.
const products_schema = {
product_name: {
auto: false,
type: "string",
min: 5,
max: 10,
special_characters: ['_', ' '],
numbers: true,
alphabet: true,
required: true,
correct: ""
},
product_image: {
auto: false,
type: "array:string",
min: 0,
max: 50,
required: true
}
}
const specification_schema = {
brand: {
auto: false,
type: "string",
min: 10,
max: 50,
special_characters: ['_', ' '],
numbers: true,
alphabet: true,
required: true
}
}
let schema = {
products_schema:products_schema,
specification_schema:specification_schema
}
const mergedObjects = {...products_schema, ...specification_schema};
const output = Object.values(mergedObjects).map(({type}) => type);
console.log(output);
You could use nested Object.values():
const products_schema={product_name:{auto:false,type:"string",min:5,max:10,special_characters:['_',' '],numbers:true,alphabet:true,required:true,correct:""},product_image:{auto:false,type:"array:string",min:0,max:50,required:true}},
specification_schema={brand:{auto:false,type:"string",min:10,max:50,special_characters:['_',' '],numbers:true,alphabet:true,required:true}},
schema={ products_schema, specification_schema }
Object.values(schema).forEach(o => {
Object.values(o).forEach(a => console.log(a.type))
})
If you want to get an array of nested type you could use flatMap
const products_schema={product_name:{auto:false,type:"string",min:5,max:10,special_characters:['_',' '],numbers:true,alphabet:true,required:true,correct:""},product_image:{auto:false,type:"array:string",min:0,max:50,required:true}},
specification_schema={brand:{auto:false,type:"string",min:10,max:50,special_characters:['_',' '],numbers:true,alphabet:true,required:true}},
schema={ products_schema, specification_schema }
const types = Object.values(schema).flatMap(o =>
Object.values(o).map(a => a.type)
)
console.log(types)
If flatMap is not supported, you could simply use the first snippet and push to an array instead of logging it to the console.
const output = [];
Object.values(schema).forEach(o =>
Object.values(o).forEach(a => output.push(a.type))
)
Here Ia m using Kendo-UI with Angular-JS.
Facing an issue while integrating Pagination (pageable) on Kendo grid table, it showing 'No items to display' even if the data (records) are loaded properly.
Not sure whats wrong with it, Any help would be appropriated...
Following is the function I am using to load/init the data grid.
function getProjectsAtAGlance() {
$scope.gridOptions = {
scrollable: false,
sortable: true,
pageable: {
pageSizes: [5, 10, 15, 20, 25, 50]
},
change: function (e) {
$scope.pageSize = $scope.gridOptions.dataSource.pageSize();
},
dataSource: {
serverPaging: true,
transport: {
read: function (options) {
$scope.options = options;
var filters = {
skip: options.data.skip,
take: options.data.take,
sortBy: $scope.sortBy,
projectGlanceIncludeArchived: $scope.includeArchivedProjects,
projectGlanceExcludeProjectsWithNoBudgets: $scope.excludeProjectsWithNoBudgets
};
$http.post("/Home/ProjectsAtAGlanceReport", filters)
.success(function (result) {
var projects = result.projects;
for (var i = 0; i < projects.length; i++) {
var project = projects[i];
project.startDate = moment(projects[i].startDate).format("L");
project.endDate = moment(projects[i].endDate).format("L");
}
options.success(projects);
})
.error(function (error) {
console.log(error);
});
}
},
pageSize: $scope.pageSize,
schema: {
total: function (respose) {
return $scope.data;
},
model: {
fields: {
name: {
editable: false,
nullable: true
},
resourceCount: {
editable: false,
nullable: true
},
clientName: {
editable: false,
nullable: true
},
startDate: {
editable: false,
nullable: true
},
endDate: {
editable: false,
nullable: true
},
projectId: {
editable: false,
nullable: true
},
projectedBudgetPercentage: {
defaultValue: 100
},
defaultValue: {
totalBudget: 0,
totalHours: 0,
burnedBudget: 0,
burnedHours: 0,
projectedBudget: 0,
projectedHours: 0,
projectedHoursPercentage: 0,
remainingBudget: 0,
remainingBudgetPercentage: 0,
remainingHours: 0,
remainingHoursPercentage: 0
}
}
}
}
},
columns: [
{
template: "<div class='name-column'>" +
"<p><a class='highlighted-blue' href='/Projects/ProjectAdmin/{{dataItem.projectId}}'>{{dataItem.name}}</a></p>" +
"<small>{{dataItem.clientName}}</small>" +
"<small ng-if=\"dataItem.startDate !== 'Invalid date'\">{{dataItem.startDate}} - {{dataItem.endDate}}</small>" +
"<small ng-if=\"dataItem.startDate === 'Invalid date'\"><i class='fa fa-exclamation-triangle text-danger'></i> Start date and end date are not defined.</small>" +
"<small>{{dataItem.resourceCount}} Resources</small></div>"
},
{
template: kendo.template($("#kendoProgressBarColumnTemplate").html())
},
{
template: "<accuracy-gauge-per-project accuracy='dataItem.accuracy'></accuracy-gauge-per-project>"
},
{
template:
"<p>{{dataItem.accuracy | percentage:0}} Accurate</p>" +
"<p>{{100-dataItem.accuracy | percentage:0}} Non Accurate</p>"
}
]
};
}
Here is an output snippets for reference.
I think the pageSize attribute needs to be declared within the dataSource like so:
dataSource: {
serverPaging: true,
transport: {... // transport options
},
pageSize: $scope.pageSize // before end of dataSource
},... // more grid stuff
And change what you are returning from schema.total to return response.total as per documentation.
I try to populate chart when user click on button .. and chart is display like this
now the problem i want total i.e. as in image in red circle i write TOTAL : 3 .. 3 is beacuse 2 for MV and 1 for DSB so total is 3
I try this
this is the code which i try
<script type="text/javascript">
var strArray = "[['sfdsdfLi', 9],['Kiwsdfi', 3],['Mixesdfd nuts', 1],['Oranges', 6],['Grapes (bunch)', 1]]";
$(function () {
$('#tabledata').on('click', 'tr', function () {
var row = $(this);
var Id = row.find('td')[0].firstChild.data;
var obj = {};
obj.ID = Id;
GetData(obj);
return false;
});
});
function GetData(obj) {
$.ajax({
type: "POST",
url: "WebForm1.aspx/GetVo",
data: JSON.stringify(obj),
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function (result) {
if (result !== null && result.length == 0) {
$("#cont").hide();
return;
}
strArray = result.d;
var myarray = eval(strArray);
$("#cont").show();
$('#cont').highcharts({
chart: {
borderColor: 'Grey',
borderWidth: 2,
type: 'pie',
options3d: {
enabled: true,
alpha: 45
}
},
title: {
text: 'Data1'
},
position: {
align: 'right',
verticalAlign: 'bottom',
x: 10,
y: -10
},
subtitle: {
text: '3D Chart'
},
plotOptions: {
pie: {
innerSize: 100,
depth: 45,
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.y}',
},
showInLegend: true
}
},
series: [{
name: 'Delivered amount',
data: myarray
}]
});
},
error: function (error) {
alert(error);
}
});
}
</script>
now how i get total ? any solutions
I have a method that get data from database and show it on chart. Its working fine. Now, i need to put some filters on it, and I'm facing dificulties to pass my parameters to the controller.
$("#quadro").click(function () {
Highcharts.setOptions({
lang: {
decimalPoint: ',',
thousandsSep: '.'
}
});
var data1 = $('#data1').val();
var data2 = $('#data2').val();
var empresa = $('#empresa option:selected').text();
$.ajax({
url: 'Painel/QuadroReceitas',
dataType: "json",
type: "GET",
contentType: 'application/json; charset=utf-8',
data: { 'data1': data1, 'data2': data2, 'empresa': empresa },
async: false,
processData: false,
cache: false,
delay: 15,
success: function (data) {
var Categories = new Array();
var FaturadoArray = new Array();
var RecebidoArray = new Array();
var AtrasadoArray = new Array();
for (var i in data) {
Categories.push(data[i].Mes);
FaturadoArray.push(data[i].Receitas);
RecebidoArray.push(data[i].Recebido);
AtrasadoArray.push(data[i].Inad_Atual);
}
var MesArray = JSON.parse(JSON.stringify(Categories));
quadroReceitas(MesArray, FaturadoArray, RecebidoArray, AtrasadoArray);
},
error: function (xhr) {
alert('error');
}
});
});
function quadroReceitas(MesArray, FaturadoArray, RecebidoArray, AtrasadoArray) {
var GlobalRotation = -90;
var GlobalAlign = 'right';
var X;
var Y;
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'column',
realignLabels: true,
animation: false
},
title: {
text: 'Quadro de Receitas'
},
legend: {
align: 'left',
verticalAlign: 'top',
floating: true,
x: 0,
y: 0
},
xAxis: {
categories: MesArray,
crosshair: true,
},
yAxis: {
labels: { enabled: false },
title: { enabled: false },
},
credits: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:,.1f}</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
animation: true,
pointPadding: 0.05, // Defaults to 0.1
groupPadding: 0.05, // Defaults to 0.2
dataLabels: {
enabled: true,
rotation: GlobalRotation,
color: '#FFFFFF',
align: GlobalAlign,
verticalAlign: "top",
y: 10,
inside: false,
crop: false,
style: {
fontSize: '12px',
fontFamily: 'Verdana, sans-serif'
},
formatter: function () {
return Highcharts.numberFormat(this.y, 2);
}
}
},
},
series: [
{ name: 'Faturado', color: '#004a91', data: FaturadoArray },
{ name: 'Recebido', color: '#009147', data: RecebidoArray },
{ name: 'Atrasado', color: '#FF0000', data: AtrasadoArray }
]
});
}
On Controller i have the code as bellow:
[HttpGet]
public JsonResult QuadroReceitas(string data1, string data2, string empresa)
{
if(empresa == "empresa" || empresa == null)
{
empresa = "%";
}
//Chave oChave = new Chave();
DateTime agora = DateTime.Now;
var start = new DateTime(agora.Year, agora.Month, 1).AddMonths(-11);
var end = new DateTime(agora.Year, agora.Month, 1).AddMonths(1).AddDays(-1);
if (data1 == null)
data1 = start.ToShortDateString();
if (data2 == null)
data2 = end.ToShortDateString();
ContasReceberData recData = new ContasReceberData();
List<ContasReceber> receitas = new List<ContasReceber>();
receitas = recData.GetQuadroReceitas(data1, data2, empresa)
.Select(o => new ContasReceber
{
Mes = o.Mes,
Receitas = Math.Round(o.Receitas,2),
Recebido = Math.Round(o.Recebido, 2),
Inad_Atual = Math.Round(o.Inad_Atual, 2)
}).ToList();
return Json(receitas, JsonRequestBehavior.AllowGet);
}
As I told, it is working fine, but without the parameters:
data1, data2, empresa
I tried to change on AJAX to POST and Controller to HttpPost as i read in another topic but didnt work.
Because in your ajax method you set processData=false. set it to true or delete the line of processData and it's work!
var empresa = $('#empresa option:selected').text();
$.ajax({
url: 'Painel/QuadroReceitas',
dataType: "json",
type: "GET",
contentType: 'application/json; charset=utf-8',
data: { 'data1': data1, 'data2': data2, 'empresa': empresa },
async: false,
// processData: false,
cache: false,
delay: 15,
success: function (data) {
var Categories = new Array();
var FaturadoArray = new Array();
var RecebidoArray = new Array();
var AtrasadoArray = new Array();
for (var i in data) {
Categories.push(data[i].Mes);
FaturadoArray.push(data[i].Receitas);
RecebidoArray.push(data[i].Recebido);
AtrasadoArray.push(data[i].Inad_Atual);
}
var MesArray = JSON.parse(JSON.stringify(Categories));
quadroReceitas(MesArray, FaturadoArray, RecebidoArray, AtrasadoArray);
},
error: function (xhr) {
alert('error');
}
});
});
I want to modify json object inside a function and then use the received value at another function. This is as a glimpse what I've coded:
$(document).ready(function () {
var json
$("#ok").click(function(){
function plotReglaFalsa(respuesta) {
json = respuesta
}
....
....
plotReglaFalsa(anyJSON)
function populateTable () {
console.log(json)
}
populateTable()
})
However json is not being modified, I do call functions required to the to the point of json being modified and the console.log statement prints undefined. I also know respuesta is a valid object.
However, plotReglaFalsa is actually a callback argument in an AJAX request, this is my full code:
$(document).ready(function () {
var json
$.plot($("#placeholder"), [ [] ], { yaxis: { show: true, max: 100, min: -100 }, xaxis: { show: true, max: 100, min: -100} });
$("#ok").click(function(){
var args = { algorithm: 'ReglaFalsa.py',
parameters: "\'"+$("#fx").val() + "\' " +
$("#a").val() + " " +
$("#b").val() + " " +
$("#tolerancia").val() + " " +
$("#iteracionesMaximas").val()
}
function plotReglaFalsa(respuesta) {
json = respuesta
var result = []
for (var series in respuesta) {
if (series!="x" && series != "y")
result.push({
data : [ [respuesta[series].a,respuesta[series].F], [respuesta[series].b, respuesta[series].G]]
})
}
result.push({
label: "fx",
color: "#FB2365",
data: _.zip(respuesta['x'], respuesta['y'])
})
var plot = $.plot( $("#placeholder"),
result,
{ selection:{mode: "xy"},
zoom: { interactive: true },
pan: { interactive: true },
grid: { markings: [{ xaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 }, { yaxis: { from: 0.0, to: 0.0 }, color: 'black', lineWidth: 1 }] }
})
plot.getOptions().selection.mode = null
}
getSendingJSON("/plot",args,plotReglaFalsa)
populateTable()
function populateTable () {
console.log(json)
$("body").append("<table id='resultados' class='table table-bordered'><thead><th>i</th><th>a</th><th>F</th><th>b</th><th>G</th><th>w</th></thead><tbody></tbody></table>")
$('#resultados').dynatable({
features: {
paginate: false,
sort: false,
search: false,
perPageSelect: false,
recordCount: false
},
dataset: { records: json }
})
}
})
})
And this is populate table function:
function getSendingJSON(url,reqObject,callBack) {
$.ajax({
type: "get",
data: reqObject,
dataType: "json",
url: url,
success: function(response){
callBack(response);
}
});
}
Understanding that the issue is around the AJAX nature, what's the easiest workaround to assign response to a variable?