How to reset its original chart value after legendItem toggle event?
RESET
legendItemClick:
function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
for (var i = 0; i < series.length; i++)
{
if (series[i].index != seriesIndex)
{
series[i].hide();
}
else
{
series[i].show();
}
}
return false;
}
Note: Currently this code works like RADIO button event[toggle]; How to make this work like a CHECKBOX event with a condition where user cannot uncheck both! But can check both the events!!! :-D
I was able to find the solution to the above question from my peer...there might be better way using some API's... here is the link to SOLUTION
legendItemClick: function(event)
{
var seriesIndex = this.index;
var series = this.chart.series;
var visibleCount= 0;
var visibleIndex= 0;
for (var i = 0; i < series.length; i++)
{
if (series[i].visible)
{
visibleIndex =i;
visibleCount++;
}
}
if (visibleCount===1 && visibleIndex === seriesIndex)
{
event.preventDefault();
}
}
Related
I'm working with google maps api v3 and I'm trying to use snap to road with more than 100 points but in addition end up with just one polyline with the whole route that I can put a small animation. The view is a html.erb.
var apiKey = any_key;
var map = handler.getMap();
var drawingManager;
var placeIdArray = [];
var snappedCoordinates = [];
var path = <%= raw(#locations) %>
var markers = <%= raw(#markers) %>
var centerOn = path[0].split(',');
function breadCrumbsGrapher(path) {
handler.removeMarkers(Gmaps.store.markers);
for(var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
var divided = handlePath(path);
if (typeof divided[0] == 'object') {
for(var i = 0; i < divided.length; i++) {
runSnapToRoad(divided[i]);
}
} else {
runSnapToRoad(path);
}
}
function waypointsLimiter(path) {
var path_loc_size = path.length;
var limited = [];
if(path_loc_size > 30) {
var stepper = Math.ceil(path_loc_size/30);
for(var i = stepper; i < path_loc_size; i += stepper) {
limited.push(path[i]);
}
if(limited.indexOf(path[path_loc_size-1]) == -1) {
limited.push(path[path_loc_size-1]);
}
} else {
limited = path;
}
return limited;
}
function handlePath(path) {
var i = 0;
var j = path.length;
if (j > 100) {
var newArray = [],
chunk = j/2;
if (j >= 200) {
chunk = j/3;
} else if (j >= 300) {
chunk = j/4;
} else if (j >= 400) {
chunk = j/5;
} else if (j >= 500 ) {
chunk = j/6;
} else if (j >= 600) {
chunk = j/7;
} else if (j >= 700 || j <= 799) {
chunk = j/8;
} else {
alert('La ruta no puede ser mostrada');
}
for (i, j; i < j; i+=chunk) {
newArray.push(path.slice(i,i+chunk+1));
}
return newArray;
} else {
return path;
}
}
// Snap a user-created polyline to roads and draw the snapped path
function runSnapToRoad(path) {
var path = path.join('|');
$.get('https://roads.googleapis.com/v1/snapToRoads', {
interpolate: true,
key: apiKey,
path: path,
}, function(data) {
processSnapToRoadResponse(data);
drawSnappedPolyline();
});
}
// Store snapped polyline returned by the snap-to-road service.
function processSnapToRoadResponse(data) {
snappedCoordinates = [];
placeIdArray = [];
for (var i = 0; i < data.snappedPoints.length; i++) {
var latlng = new google.maps.LatLng(
data.snappedPoints[i].location.latitude,
data.snappedPoints[i].location.longitude);
snappedCoordinates.push(latlng);
placeIdArray.push(data.snappedPoints[i].placeId);
}
}
// Draws the snapped polyline (after processing snap-to-road response).
function drawSnappedPolyline() {
var symbol = {
path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW,
scale: 3,
strokeColor: '#3B16B3'
};
var snappedPolyline = new google.maps.Polyline({
path: snappedCoordinates,
strokeColor: '#E51E25',
strokeWeight: 3,
icons: [{
icon: symbol,
offset: '0%'
}]
});
snappedPolyline.setMap(map);
animate(snappedPolyline);
zoomToObject(snappedPolyline);
polylines.push(snappedPolyline);
}
function zoomToObject(obj){
var bounds = new google.maps.LatLngBounds();
var points = obj.getPath().getArray();
for (var n = 0; n < points.length ; n++){
bounds.extend(points[n]);
}
map.fitBounds(bounds);
}
function animate(line) {
var count = 0;
window.setInterval(function() {
count = (count + 1) % 600;
var icons = line.get('icons');
icons[0].offset = (count / 6) + '%';
line.set('icons', icons);
}, 70);
}
breadCrumbsGrapher(path);
Also I've tried declaring a variable outside so I can concat all of the coordinates and generate a polyline with it but doesn't seem to work. Actualy that big array ends up being of 2000+ points.
The result that I have with the provided code
After all of that the issue is that I don't know how to merge the polylines to have just one line and being able to animate just that one line. If there's more than 100 coordinates I plot more polylines. In the image you can see that there's 3 icons (one for each polyline) and I need just to draw one line and have 1 icon.
To reproduce the issue just add a key and if you want use this set of coordinates:
https://drive.google.com/file/d/1jLb7Djv5DiSdR3k4QZRSatXBwrohlxcI/view?usp=sharing
function breadCrumbsGrapher(path) {
//mapMarkers();
snappedCoordinates = [];
handler.removeMarkers(Gmaps.store.markers);
for(var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
var divided = handlePath(path);
if (typeof divided[0] == 'object') {
for(var i = 0; i < divided.length; i++) {
runSnapToRoad(divided[i]);
}
} else {
runSnapToRoad(path);
}
console.log(snappedCoordinates);
drawSnappedPolyline();
}
function runSnapToRoad(path) {
var path = path.join('|');
$.get('https://roads.googleapis.com/v1/snapToRoads', {
interpolate: true,
key: apiKey,
path: path,
}, function(data) {
processSnapToRoadResponse(data);
//drawSnappedPolyline();
});
}
I've changed the code but it doesn't work, even though I end up with a 2,557 coordinates array.
I've tried also tried this thinking that this could give me the time to have all coordinates:
async function breadCrumbsGrapher(path) {
//mapMarkers();
snappedCoordinates = [];
handler.removeMarkers(Gmaps.store.markers);
for(var i = 0; i < polylines.length; i++) {
polylines[i].setMap(null);
}
var divided = handlePath(path);
if (typeof divided[0] == 'object') {
for(var i = 0; i < divided.length; i++) {
await runSnapToRoad(divided[i]);
}
} else {
await runSnapToRoad(path);
}
console.log(snappedCoordinates);
drawSnappedPolyline();
}
and:
async function runSnapToRoad(path) {
var path = path.join('|');
await $.get('https://roads.googleapis.com/v1/snapToRoads', {
interpolate: true,
key: apiKey,
path: path,
}, function(data) {
processSnapToRoadResponse(data);
});
}
Thank you in advance.
You are using $.get() to query the Roads API which is an asynchronous call so when you call drawSnappedPolyline() from within your breadCrumbsGrapher function, you most probably don't (yet) have all coordinates in return from your AJAX call(s).
If you have 550 coordinates in your original path, you then know you must call the Roads API 6 times (5 times with 100 points + 1 time with 50 points). You should then be able to set a counter somewhere, to only draw your (complete) Polyline, once you got your 6 responses from the Roads API.
Or you could base that on the length of your final array (compared to the original path) although I don't know what would happen in case some points can't be "snapped".
i'm trying to intercept datetime value in kendo datasource to adjust UTC time offset but i can't find the e.response.Data property
code
var interceptDate = []; // List of intercept member
var onRequestEnd = function (e) {
setIntercept(e); // another function to fill interceptDate from schema
if (e.response.Data && e.response.Data.length) {
var rowsData = e.response.Data;
if (interceptDate.length > 0) {
if (this.group().length && e.type == "read") {
for (var i = 0; i < rowsData.length; i++) {
var gr = rowsData[i];
for (var j = 0; j < interceptDate.length; j++) {
if (gr.Member == interceptDate[j]) {
gr.Key = gr.Key.replace(/\d+/,
function (n) { return parseInt(n) + offsetMiliseconds; }
);
}
addOffset(gr.Items);
}
}
} else {
addOffset(rowsData);
}
}
}
};
in chrome devtools the e.response look like
_defaultPrevented: false
isDefaultPrevented: function (){return this._defaultPrevented===!0}
preventDefault: function (){this._defaultPrevented=!0}
response: Object
odata.count: "4"
odata.metadata: "http://localhost:7000/odata/$metadata#DateIntercept"
value: Array[4]
0: Object
1: Object
2: Object
3: Object
length: 4
__proto__: Array[0]
__proto__: Object
sender: lt.extend.init
type: "read"
__proto__: Object
If you want to modify the returned data, you should use the parse callback in the dataSource's schema. Leaving out irrelevant stuff it would look something like:
new kendo.ui.Grid({
dataSource: new kendo.data.DataSource({
schema: {
parse: function (results) {
for (var i = 0; i < results.length; i++) {
// MODIFY RESULTS HERE. FOR EXAMPLE
results[i].someField = results[i].someField + " Hello World";
}
return results;
}
}
});
});
I have a line chart with a number of series elements on it.
The chart does allow me to click each series in the legend to hide it but I would like to add an extra item that when clicked hides all of the series lines from the chart.
Can someone explain how I would achieve this please?
Thanks
add a button or something you like. follow the example fiddle from highcharts own.
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/members/series-hide/
var chart = $('#container').highcharts(),
$button = $('#button');
$button.click(function() {
var series = chart.series[0];
if (series.visible) {
series.hide();
$button.html('Show series');
} else {
series.show();
$button.html('Hide series');
}
}
In case when you hide all of series, you can add extra serie by addSeries() function.
You could try this:
$('.selectDeselect input').click(function() {
if (chart.series[0].visible) {
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].hide();
}
} else {
for (var i = 0; i < chart.series.length; i++) {
chart.series[i].show();
}
}
})
I'm trying to link two jQuery UI sliders so they'll add up to 100%. I've found the perfect solution for three sliders here on SO, but for some reason I am unable to get the math to add up correctly when modifying this jsFiddle example to strip out the third slider: http://jsfiddle.net/gWbMp/3/
Can anyone help me out in forking this to simply include two sliders instead of three?
Here's the (close) javascript I've ended up with but it's not quite right:
var min = 0;
var max = 100;
$("input").change(function(){
console.log("a");
var index = $(this).attr('class').substring(0,1);
$("#slider_"+ index).slider('value', this.value);
refreshSliders( index - 0 );
});
$('.selector').slider({
animate : true
}, {
min : min
}, {
max : max
}, {
change : function(event, ui) {
totalvalue = $("#slider_1").slider("value") + $("#slider_2").slider("value");
$('.1percent').val($("#slider_1").slider("value"));
$('.2percent').val($("#slider_2").slider("value"));
}
}, {
slide : function(event, ui) {
$('.1percent').val($("#slider_1").slider("value"));
$('.2percent').val($("#slider_2").slider("value"));
}
});
$("#slider_1").slider('value', 10);
$("#slider_2").slider('value', 90);
$('.1percent').val($("#slider_1").slider("value"));
$('.2percent').val($("#slider_2").slider("value"));
function refreshSliders(slidermainin) {
var value1 = $("#slider_1").slider("option", "value");
var value2 = $("#slider_2").slider("option", "value");
var valuechange = (value1 + value2) - 100;
var valuemain = 0, valueother1 = 0;
switch(slidermainin) {
case 1:
slidermain = "#slider_1";
sliderother1 = "#slider_2";
valuemain = value1;
valueother1 = value2;
break;
case 2:
slidermain = "#slider_2";
sliderother1 = "#slider_1";
valuemain = value2;
valueother1 = value1;
break;
}
if (valueother1 === 0) {
if (valueother1 === 0) {
if (valuechange <= 0) {
$(sliderother1).slider('value', valueother1 - (valuechange / 2));
}
} else {
if (valuechange <= 0) {
$(sliderother1).slider('value', valueother1 - (valuechange / 2));
} else {
$(sliderother1).slider('value', valueother1 - valuechange);
}
}
} else {
$(sliderother1).slider('value', valueother1 - (valuechange / 2));
}
}
var bindSliders = function(selector, value) {
$(selector).bind("slidechange slide", function(event, ui) {
event.originalEvent && (event.originalEvent.type == 'mousemove' || event.originalEvent.type == 'mouseup' || event.originalEvent.type == 'keydown') && refreshSliders(value);
});
};
bindSliders("#slider_1", 1);
bindSliders("#slider_2", 2);
I think this can be done much shorter for two sliders
You can rewrite refreshSliders function to calculate second value on the basis of max value
And call it directly on slider "change" and "slide" (or even just second one)
function refreshSliders(thisSlider, ui){
var thisNum = $(thisSlider).attr("id").replace("slider_", "");
var otherNum = (thisNum==1)?2:1;
$('.'+thisNum+'percent').val(ui.value);
if ($("#slider_"+otherNum).slider("value")!=max-ui.value){
$("#slider_"+otherNum).slider("value", max-ui.value);
$('.'+otherNum+'percent').val(max-ui.value);
}
}
have a look at this jsfiddle, i forked it from original one and adjusted a bit: http://jsfiddle.net/paulitto/fBxCm/1/
I have a jqGrid in an ASP.NET MVC View with the option multiselect:true. There are over 200 records displayed in the grid, so I have paging enabled. This works great, but when I navigate from page to page, the selections are lost when I navigate.
Is there a good, clean way to persist the selections so that they are maintained while paging?
Managed it with some javascript trickery:
var pages = [];
onSelectRow: function(rowid, status) {
var pageId = $('#grdApplications').getGridParam('page');
var selRows = [];
if (status) {
//item selected, add index to array
if (pages[pageId] == null) {
pages[pageId] = [];
}
selRows = pages[pageId];
if (selRows.indexOf(rowid) == -1)
{ selRows.push(rowid); }
}
else {
//item deselected, remove from array
selRows = pages[pageId];
var index = selRows.indexOf(rowid)
if (index != -1) {
pages[pageId].splice(index, 1);
}
}
},
loadComplete: function() {
if (pages[$('#grdApplications').getGridParam('page')] != null) {
var selRows = pages[$('#grdApplications').getGridParam('page')];
var i;
var limit = selRows.length;
for (i = 0; i < limit; i++) {
$('#grdApplications').setSelection(selRows[i], true);
}
}
},
user279248 (I know it's an old post, but it's a good question) - all of the row ids are being stored in the selRows arrays in the pages array, so just iterate through them, ie
for (j=0;j<pages.length;j++) {
var selRow = pages[j];
for (k=0;k<selRow.length;k++) {
alert('RowID:'+selRow[k]);
}
}
Hope this helps someone.
Dave - your solution is still going strong two years later! Thanks for the code. My only tweak is elevating the code into functions - useful to apply to multiple grids on the same page.
function maint_chkbxs_oSR(obj_ref, rowid, status, pages) {
var pageId = $(obj_ref).jqGrid('getGridParam','page');
var selRows = [];
if (status) {
//item selected, add index to array
if (pages[pageId] == null) {
pages[pageId] = [];
}
selRows = pages[pageId];
//if (selRows.indexOf(rowid) == -1)
if ($.inArray(""+rowid,selRows) == -1)
{ selRows.push(rowid); }
}
else {
//item deselected, remove from array
selRows = pages[pageId];
var index = $.inArray(""+rowid,selRows);
if (index != -1) {
pages[pageId].splice(index, 1);
}
}
}
function maint_ckbxs_lC(obj_ref, pages) {
if (pages[$(obj_ref).jqGrid('getGridParam','page')] != null) {
var selRows = pages[$(obj_ref).jqGrid('getGridParam','page')];
var i;
var limit = selRows.length;
for (i = 0; i < limit; i++) {
//$('#grid_bucket').setSelection(selRows[i], true);
$(obj_ref).jqGrid('setSelection',selRows[i],true);
}
}
}
You just have to remember to create a dedicated page array for each grid.