I want to be able to change the min and max values in the Kendo RadialGauge "on the fly" with ajax. Do I need to destroy the gauge first and create a new one, or could I possibly just change current gauge and redraw it with min, max, and pointer values?
I have a typical gauge using Razor engine:
#(Html.Kendo().RadialGauge()
.Name("TotalCostGauge")
.Pointer(pointer => pointer.Value(0))
.Scale(scale => scale
.MinorUnit(5)
.StartAngle(-50)
.EndAngle(230)
.Max(100)
.Labels(labels => labels.Position(GaugeRadialScaleLabelsPosition.Inside))
.Ranges(ranges =>
{
ranges.Add().From(180).To(180).Color("#c20000");
}
)
)
)
Using ajax I want to be able to update those values:
$.ajax({
type: "GET",
dataType: "json",
url: 'Controller/GetStuff/',
success: function (data) {
var totalCostGauge = $("#TotalCostGauge").data("kendoRadialGauge");
var totCostOptions = totalCostGauge.options;
//TODO: I want to be able to do something like this
totCostOptions.scale.max = data.Max;
totalCostGauge.value(data.TotalCost);
totalCostGauge.redraw();
},
error: function (error) {
}
});
I went through the documentation and could not see that the Min and Max values could be changed, however the pointer value can be changed via ajax.
Eventually I found out that I was going at this all wrong. This is actually what I needed to do:
$.ajax({
type: "GET",
dataType: "json",
url: 'Controller/GetStuff/',
success: function (data) {
$("#TotalCostGauge").kendoRadialGauge({
scale: {
max: data.Max, // This is actually what I should have done :)
startAngle: -50,
endAngle: 230,
labels: {
format: "C0",
font: "8px Arial,Helvetica,sans-serif"
},
ranges: [{
from: 0,
to: 0,
color: "green"
}]
}
});
var totalCostGauge = $("#TotalCostGauge").data("kendoRadialGauge");
totalCostGauge.value(data.Cost);
totalCostGauge.redraw();
},
error: function (error) {
}
});
Related
Recently im working on c3 charts its actually working great
but i had a problem with dynamically get multiple data in DB
Multiple XY Lines chart
X had to be in string
I actually want multiple xy values and x values had to be string
After a long period i dont get any ideas
I tried json method in ajax
$.ajax({
type: "POST",
url: "../Home/timechart",
data: Getdata,
contentType: "application/json; chartset=utf-8",
dataType: "json",
success: function (response) {
successClass(response)
},
});
function successClass(jsondata) {
var data = {};
var mvalue = [];
var mdatetime = [];
var TagID = [];
jsondata.forEach(function (e) {
mvalue.push(e.mvalue);
mdatetime.push(e.mdatetime);
if (TagID != e.TagID) {
TagID.push(e.TagID);
}
})
//alert(objvalue)
// alert(objdate)
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
/* ['x'].concat(mdatetime),*/
[TagID].concat(mvalue)
]
},
axis: {
x: {
type: 'category',
categories: mdatetime,
tick: {
rotate: -25,
multiline: false
},
height: 130
}
},
legend: {
position: 'outer-center'
}
});
}
}
});
});
i can get a chart in single dynamic value but dont know how to get multiple y values and same x value in it
I'm using ajax to pull in data from a php file (which returns json).
I'm wondering, can you have results pulled from Ajax and loads on click without having to search? so essentially you click the field, it drops down with all the elements from Ajax. Couldn't find in the documentation.
Code:
jQuery('.producttypesajax').select2({
allowClear: true,
placeholder: {
id: '',
text: 'Search by Product Type'
},
ajax: {
url: base + '/appProductTypeSearch.php',
dataType: 'json',
delay: 250,
data: function( params ) {
return {
q: params.term // search term
};
},
processResults: function( data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 1
});
jQuery('.producttypesajax').on('select2:select', function (e) {
var data = e.params.data;
});
https://select2.org/data-sources/ajax
I believe there's no native solution for this, but I managed to do it somehow.
Since Select2 accepts Arrays as a data source, you can make an Ajax request returning your Json object and use it as an "Array".
Sample code:
$.ajax({
url: url,
type: 'get',
dataType: 'json',
success: function (jsonObject){
$('#mySelect').select2({ data: jsonObject });
}
});
It worked for me. Hope it helps.
What data structure is select2 (v4.0.3) expecting from the server and how should it be handled?
The question is asked on the official FAQ here, but there is no answer.
I have tried several variations of data structure, but based on this tutorial and this jsFiddle, have assumed what should be returned from the server is a list/array of objects/dicts, eg:
matches = [{"id":"1", "tag":"Python"},{"id":"2", "tag":"Javascript"},{"id":"3", "tag":"MongoDB"}]
I have tried this format with the following Javascript:
$("#my_select").select2({
ajax: {
url: "/tag_search",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term // search term
};
},
processResults: function (data) {
return {
results: data.matches
};
},
cache: true
},
minimumInputLength: 2,
tags: true,
tokenSeparators: [",", " "],
maximumSelectionLength: 5
});
Firebug results for search on Py:
The search area just displays this:
I am expecting all matches to be showing in the dropdown below the search area.
Solution that worked for me:
Rename json key (it has to be text), so server response is:
[{"text": "Python", "id": 1}]
(after coming across this document).
I also just returned the list itself from the server, rather than making the list a dict value.
Javascript
$("#my_select").select2({
ajax: {
url: "/tag_search",
dataType: 'json',
delay: 250,
data: function (params) {
return {
q: params.term // search term
};
},
processResults: function (data) {
return {
results: data
};
},
cache: true
},
minimumInputLength: 2,
tags: true,
tokenSeparators: [",", " "],
maximumSelectionLength: 5
});
UPDATE I've also updated the mapping to include pin as the examples seem to suggest. Also, here's an temporary instance with some data to work with: https://21991e47cdc7caa8000.qbox.io/profiles/lead/_search
I've followed the instructions by ElasticSearch. Using this request:
$.ajax({
url: 'https://21991e47cdc7caa8000.qbox.io/profiles/lead/_search',
method: 'GET',
data: {
sort: [{
_geo_distance: {
"pin.location": [49.8998, -97.1375],
order: "asc",
unit: "km"
}
}]
},
success: function(response) {
console.log(response);
}
});
Does not return with calcuated distance or sorted by distance. I've also tried using "location".
Here's my mapping: https://21991e47cdc7caa8000.qbox.io/profiles/lead/_mapping
Any ideas?
I've managed to get it working, Please see the difference,
I converted data as json before quering, and added some configuration( changed dataType to json, and request type to POST, as we know GET request generally don't have body, only POST request does.
var request = {
sort: [{
_geo_distance: {
"pin.location": [
49.8998, -97.1375],
order: "asc",
unit: "km"
}
}]
};
$.ajax({
url: 'https://21991e47cdc7caa8000.qbox.io/profiles/lead/_search',
type: 'POST',
crossDomain: true,
dataType: 'json',
data: JSON.stringify(request),
success: function (response) {
console.log(JSON.stringify(response));
}
});
Hope this helps.
I've tested, and it should work for you too.
The example given uses pin.location, not location or lead.location.
Additionally, pin.location is an array of length 2, not an object with two fields as you are using it. This seems pretty counter-intuitive to me, as the location field in most other api calls is an object like you are using.
Try this:
$.ajax({
url: "https://myhostedes.com/profiles/lead/_search",
method: "GET",
data: {
"sort": [{
"_geo_distance": {
"pin.location": [49.8998, -97.1375],
"order": "asc",
"unit": "km"
}
}]
},
success: function(response) {
console.log(response);
}
});
Note: I don't have access to an elastisearch instance at the moment, so I haven't been able to run this yet.
I am trying to bind the text box and the JQuery AutoComplete feature. When I checked the Firebug AJAX Request & Response it returns like the following. But the textbox is not showing any items. Could you please advise me, what I am doing wrong? Thanks.
Here is my coding:
$("#<%= TextBox1.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
type: "POST",
dataType: "json",
data: {
'LocationID': "10543",
'Search': request.term
},
success: function (data) {
response($.map(data.d, function (item) {
return {
value: item.FullDrugName,
id: item.DrugID
}
}))
}
});
},
delay: 1,
minLength: 2,
select: function (event, ui) {
alert(ui.item.id);
}
});
DataType property is representing the type of data that you're expecting back from the server.
you define data type as json but server returns you a xml output. You should change your DataType property to xml
In addition to #fealin's answer, you're going to need to change the way you process the xml response. It doesn't look like you have a d property on the return data, and you also need to look for the correct nodes in the XML structure and pull out their text to build the response array that you return to the widget.
Based on the XML you've provided, it might look something like this:
$("#<%= TextBox1.ClientID %>").autocomplete({
source: function (request, response) {
$.ajax({
url: "/contractors/web_services/wsSM.asmx/SearchDrugs",
type: "POST",
dataType: "json",
data: {
'LocationID': "10543",
'Search': request.term
},
success: function (data) {
response($(data).find("Drug").map(function (_, el) {
var $el = $(el);
return {
label: $el.find("FullDrugName").text(),
value: $el.find("DrugID").text()
};
}));
});
},
delay: 1,
minLength: 2,
select: function (event, ui) {
alert(ui.item.id);
}
});
Here's an example that's just using the XML string (without an AJAX request): http://jsfiddle.net/J5rVP/29/