i want to sort a list of Locations by its Distance(displayed in list).
i already have a code that sould work but since i am that new to the whole mvc thing, i am not really sure where to place it to make it work.
Maybe someone can help me:
var geocoder = new google.maps.Geocoder();
var geo = Ext.create('Ext.util.Geolocation',{
autoUpdate: false,
listeners: {
locationupdate:{
scope: this,
fn: function(geo){
var haversindeDistance = function(lat1,lon1,lat2,lon2){
if(typeof(Number.prototype.toRad)=="undefined"){
Number.prototype.toRad = function(){
return this * Math.PI/180;
}
}
var R = 6371; //km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var lat1 = lat1.toRad();
var lat2 = lat2.toRad();
var a = Math.sin(dLat/2)*Math.sin(dLat/2)+
Math.sin(dLong/2)*Math.sin(dLon/2)*Math.cos(lat1)*Math.cos(lat2);
var c = 2*Math.atan2(Math.sqrt(a),Math.sqrt(1-a));
var d = R*c;
// KM or MIles
//return d*0.621371192; //MIles
return d;
};
var store = Ext.getStore('locationsstore');
store.suspendEvents(true);
store.each(function(location){
var lat2 = parseFloat(location.get(geocoder.geocode( { 'address': sAddress}, function(results, status) { })))||0;
var lon2 = parseFloat(location.get(geocoder.geocode( { 'address': sAddress}, function(results, status) { })))||0;
//var lat2 = parseFloat(location.get('lat'))||0;//try to put geocode on this ish
//var lon2 = parseFloat(location.get('lon'))||0;
if(lat2 && lon2){
var distance = haversineDistance(geo.getLatitude(),geo.getLongitude(),lat2,lon2);
location.set('distance',distance);
}
}, this);
store.resumeEvents();
store.filter('distance',/\d/);
store.sort('distance');//check if it is not done or can not be done somewhere else
list.setMasked(false);
}
},
locationerror:{
scope: this,
fn:function(geo,bTimeout,bPermissionDenied,bLocationUnavailable,message){
console.log([geo,bTimeout,bPermissionDenied,bLocationUnavailable,message]);
if(bTimeout){
Ext.Msg.alert('Timed out getting your location.');
}else{
Ext.Msg.alert('Error getting location. Please make sure location services are enabled on your Device.');
}
list.setMask(false);
}
}
}
});
geo.updateLocation();
i found the Solution.Just adding a Listener to the Navigation/List View should do it. I had too much in the Controller so i decided to put it directly into the View.
Related
I'm using the below code in order to display a photo in slide show, i need to display: name,job and quote for each person, but actually only photos change on time interval specified ...can anyone help?
var img1 = document.getElementById("img1");
var testname = document.getElementById("testname");
var testjob = document.getElementById("testjob");
var testpa = document.getElementById("testpa");
var currentPos = 0;
var images = ["ch1.jpg", "ch2.jpg", "ch3.jpg"]
var testname = [“John Smith” ,”Jan Rosso”,”Raphael Matthew”]
var testjob = [“Manager” ,”Director”,”Supervisor”]
var testpa = [“I like this company”,”It’s amazing”,”Wondeful atmospher”]
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
img1.src = images[currentPos];
testname.value = testname[currentPos];
testjob.value = testjob[currentPos];
testpa.value = testpa[currentPos];
}
setInterval(volgendefoto, 3000);
function test(){
document.getElementById('text').value=document.getElementById('testname').value
}
testName and the others may need to be updated via innerHTML
function volgendefoto() {
if (++currentPos >= images.length)
currentPos = 0;
img1.src = images[currentPos];
testname.innerHtml = testname[currentPos];
testjob.innerHtml = testjob[currentPos];
testpa.innerHtml = testpa[currentPos];
}
trying to extend a chart, so that i can draw lines up to the data point, but this is happening before the default animation. it would look smoother if it applied after.
i have got most of it to work.. but how do i get this to apply after chart animation.
var originalLineDraw = Chart.controllers.line.prototype.draw;
Chart.helpers.extend(Chart.controllers.line.prototype, {
draw: function () {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-1']
var points = this.chart.getDatasetMeta(this.index).data;
for (var i = 0; i < points.length; i++) {
// var point_x = points[i]._model.x;
var point_y = points[i]._model.y;
ctx.beginPath();
ctx.setLineDash([5, 5]);/*dashes are 5px and spaces are 3px*/
ctx.moveTo(xaxis.getPixelForValue(undefined, i), point_y);
ctx.strokeStyle = '#fff';
ctx.lineTo(xaxis.getPixelForValue(undefined, i), yaxis.bottom);
ctx.stroke();
}
}
}
});
Update...
altho the darw is incorrect it still is playing after animation
var verticalLinePlugin = {
renderVerticalLine: function (chartInstance) {
var chart = chartInstance;
var ctx = chart.chart.ctx;
var maxpoint = [];
//loop the datasets
for (var y = 0; y < chart.config.data.datasets.length; y++) {
var dataset = chart.config.data.datasets[y];
if (dataset.hidden)
continue;
var points = chart.getDatasetMeta(y).data;
for (var i = 0; i < points.length; i++) {
var point_y = points[i]._model.y;
if (point_y < 0)
continue;
var point = maxpoint[i];
if (point == undefined) {
maxpoint.push({ id: i, y: point_y });
} else {
if (point.y > point_y) {
point.y = point_y;
}
}
}
}
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-1']
chart.data.datasets.forEach(function (dataset, i) {
var ds = dataset;
var meta = chart.getDatasetMeta(i);
meta.data.forEach(function (element, index) {
var value = maxpoint[i];
ctx.beginPath();
ctx.setLineDash([5, 5]);
ctx.moveTo(xaxis.getPixelForValue(undefined, i), value.y);
ctx.strokeStyle = '#fff';
ctx.lineTo(xaxis.getPixelForValue(undefined, i), yaxis.bottom);
ctx.stroke();
});
});
},
afterRender: function (chart) {
this.renderVerticalLine(chart);
}
};
Chart.plugins.register(verticalLinePlugin);
I made some small changes (non-intuitive!), and the vertical lines now appear after the animation.
Get the x values from the metadata instead of the data.
Either:
var x_point = element._model.x;
or:
var position = element.tooltipPosition();
var x_point = position.x;
Wrap the drawing in if(!hidden){}, then the vertical lines will disapear and reappear with the data. (The ternary assignment fixes a clash if the data starts hidden)
Do you need the value=max[i]? If just drawing the line up to the points, can get the y_point the same as for x.
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-1'];
chart.data.datasets.forEach(function (dataset, i) {
var meta = chart.getDatasetMeta(i);
var hidden = (meta.hidden != undefined) ? meta.hidden : dataset.hidden
if(!hidden){
meta.data.forEach(function (element, index) {
//var value = maxpoint[i];
var x_point = element._model.x;
var y_point = element._model.y;
ctx.beginPath();
ctx.save();
ctx.setLineDash([5, 5])
ctx.strokeStyle = '#fff';
ctx.moveTo(x_point, y_point); // or value.y
ctx.lineTo(x_point, yaxis.bottom)
ctx.stroke();
ctx.restore();
});
}
});
I have a visualization table that has an event listener on select.
The need: I want the user to be able to delete documents on the google drive without having to leave the webpage
The set up: I added a button so that when clicked, I get a confirm alert box that includes the value. Once I click OK, it runs the scripts from the client-side with an event handler. This works perfectly!
The problem: I can move one document at a time but if I need to move 20+ documents it gets really tedious to click rows one after the other. Is it possible to pass multiple values to the successhandler?
google.visualization.events.addListener(archiveChart.getChart(), 'select', function () {
$("#docArchive").on("click", function() {
var selection = archiveChart.getChart().getSelection();
var dt = archiveChart.getDataTable();
if (selection.length > 0) {
var item = selection[0];
var docurl = dt.getValue(item.row, 2);
var docname = dt.getValue(item.row, 1);
var folder = dt.getValue(item.row, 4);
if(confirm("Are you sure you want to archive " + docname + "?") == true) {
archiveChart.getChart().setSelection([]);
return google.script.run.withSuccessHandler(onSuccessArchive).withFailureHandler(function(err) {
alert(err);
}).archiveDoc(docurl,folder);
} else {
archiveChart.getChart().setSelection([]);
}
}});
})
I feel like I might need to add this:
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
I'm struggling a little with understanding what I might need to change (still learning). Any help or guidance is appreciated!
recommend confirming once, for all documents
then loop the selection to archive each document
google.visualization.events.addListener(archiveChart.getChart(), 'select', function () {
$("#docArchive").on("click", function() {
var selection = archiveChart.getChart().getSelection();
var dt = archiveChart.getDataTable();
var docNames = selection.map(function (item) {
return dt.getValue(item.row, 1);
}).join('\n');
if (selection.length > 0) {
if(confirm("Are you sure you want to archive the following document(s)?\n" + docNames) == true) {
for (var i = 0; i < selection.length; i++) {
var item = selection[i];
var docurl = dt.getValue(item.row, 2);
var docname = dt.getValue(item.row, 1);
var folder = dt.getValue(item.row, 4);
return google.script.run.withSuccessHandler(onSuccessArchive).withFailureHandler(function(err) {
alert(err);
}).archiveDoc(docurl, folder);
}
}
archiveChart.getChart().setSelection([]);
}
});
});
Can you help me how to extend Chart.js v2.0. I need to draw some horizontal lines in the charts, something similar to: http://jsfiddle.net/vsh6tcfd/3/
var originalLineDraw = Chart.controllers.bar.prototype.draw;
Chart.helpers.extend(Chart.controllers.bar.prototype, {
draw: function() {
originalLineDraw.apply(this, arguments);
var chart = this.chart;
var ctx = chart.chart.ctx;
var index = chart.config.data.lineAtIndex;
if (index) {
var xaxis = chart.scales['x-axis-0'];
var yaxis = chart.scales['y-axis-0'];
ctx.save();
ctx.beginPath();
ctx.moveTo(xaxis.getPixelForValue(undefined, index), yaxis.left);
ctx.strokeStyle = '#ff0000';
ctx.lineTo(xaxis.getPixelForValue(undefined, index), yaxis.right);
ctx.stroke();
ctx.restore();
}
}
});
var config = {
type: type,
data: jQuery.extend(true, {}, data),
options: this.chartdata.options,
lineAtIndex: 2
};
new Chart(ctx, config);
Options
With chart.js you have 2 options.
You could create a mix chart types (Example Here). This would allow you to add a line charts to create your lines.
You could create a plugin (See Example Below).
Option 2 would be the one I recommend as it allows you to have more control over the appearance of the lines.
The Fix
demo of the plugin
Chart.js now supports plugins. This allows you to add any features you want to your charts!
To create a plugin you will need to run code after an event has occurred and modify the chart/canvas as needed.
The following code should give you a good starting point:
var horizonalLinePlugin = {
afterDraw: function(chartInstance) {
var yValue;
var yScale = chartInstance.scales["y-axis-0"];
var canvas = chartInstance.chart;
var ctx = canvas.ctx;
var index;
var line;
var style;
if (chartInstance.options.horizontalLine) {
for (index = 0; index < chartInstance.options.horizontalLine.length; index++) {
line = chartInstance.options.horizontalLine[index];
if (!line.style) {
style = "rgba(169,169,169, .6)";
} else {
style = line.style;
}
if (line.y) {
yValue = yScale.getPixelForValue(line.y);
} else {
yValue = 0;
}
ctx.lineWidth = 3;
if (yValue) {
ctx.beginPath();
ctx.moveTo(0, yValue);
ctx.lineTo(canvas.width, yValue);
ctx.strokeStyle = style;
ctx.stroke();
}
if (line.text) {
ctx.fillStyle = style;
ctx.fillText(line.text, 0, yValue + ctx.lineWidth);
}
}
return;
}
}
};
Chart.pluginService.register(horizonalLinePlugin);
I have two dynamic texts, both of them are going to generate numbers. If one has a greater value then the other one, a movie clip must be loaded, else, another movie clip must be loaded.
It's also important to note that I need to choose exactly the place that this movie clip will be load.
I create this code, but it's not working.
btn01.addEventListener(MouseEvent.CLICK, fl_ClickToGoToAndStopAtFrame_27);
function fl_ClickToGoToAndStopAtFrame_27(event:MouseEvent):void
{
var texto.text;
function testGuess():void{
if (parseInt(texto.text) == 8)
var fl_MyInstance_3:greenlight = new greenlight();
addChild(fl_MyInstance_3);
}}}
stop();
// timer loading
var timer:Timer = new Timer(2500);
timer.addEventListener(TimerEvent.TIMER, onTimer);
timer.start();
function onTimer(evt:TimerEvent):void {
//primeiro indicador parte
var loader:URLLoader = new URLLoader(new URLRequest("bdaily.txt"));
loader.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(event:Event):void {
var loadedText:URLLoader = URLLoader(event.target);
bdaily.text = loadedText.data;
}
// segundo indicador.
var loader1:URLLoader = new URLLoader(new URLRequest("bmtd.txt"));
loader1.addEventListener(Event.COMPLETE, completeHandler1);
function completeHandler1(event:Event):void {
var loadedText1:URLLoader = URLLoader(event.target);
bmtd.text = loadedText1.data;
}
//terceiro indicador
var loader2:URLLoader = new URLLoader(new URLRequest("bwtd.txt"));
loader2.addEventListener(Event.COMPLETE, completeHandler2);
function completeHandler2(event:Event):void {
var loadedText2:URLLoader = URLLoader(event.target);
bwtd.text = loadedText2.data;
}
//terceiro indicador
var loader3:URLLoader = new URLLoader(new URLRequest("basketdtarget.txt"));
loader3.addEventListener(Event.COMPLETE, completeHandler3);
function completeHandler3(event:Event):void {
var loadedText3:URLLoader = URLLoader(event.target);
basketdtarget.text = loadedText3.data;
}
var loader4:URLLoader = new URLLoader(new URLRequest("basketwtdtarget.txt"));
loader4.addEventListener(Event.COMPLETE, completeHandler4);
function completeHandler4(event:Event):void {
var loadedText4:URLLoader = URLLoader(event.target);
basketwtdtarget.text = loadedText4.data;
}
var loader5:URLLoader = new URLLoader(new URLRequest("basketmtdtarget.txt"));
loader5.addEventListener(Event.COMPLETE, completeHandler5);
function completeHandler5(event:Event):void {
var loadedText5:URLLoader = URLLoader(event.target);
basketmtdtarget.text = loadedText5.data;
}
//condicionais para gerar movieclip condicional
var clp_index = parseInt(bdaily.text) >= parseInt(basketdtarget.text) ? 1 : 2
var new_clp = clp_index == 1 ? new clp_01() : new clp_02()
addChild(new_clp)
var clp_index2 = parseInt(bwtd.text) >= parseInt(basketwtdtarget.text) ? 1 : 2
var new_clp2 = clp_index2 == 1 ? new clp_03() : new clp_04()
addChild(new_clp2)
var clp_index3 = parseInt(bmtd.text) >= parseInt(basketmtdtarget.text) ? 1 : 2
var new_clp3 = clp_index3 == 1 ? new clp_05() : new clp_06()
addChild(new_clp3)
}
try this :
btn.addEventListener(MouseEvent.CLICK, btn_on_Press);
function btn_on_Press(e:MouseEvent):void {
var clp_index = parseInt(txt_01.text) > parseInt(txt_02.text) ? 1 : 2
var new_clp = clp_index == 1 ? new clp_01() : new clp_02()
// to set the new_clp position
new_clp.x = 250 // left position
new_clp.y = 50 // top position
addChild(new_clp)
}
Last Edit :
stop()
var new_clp, new_clp2, new_clp3
var timer:Timer = new Timer(3000)
timer.addEventListener(TimerEvent.TIMER, onTimer)
timer.start()
function onTimer(evt:TimerEvent):void {
var loader:URLLoader = new URLLoader(new URLRequest('bdaily.txt'))
loader.addEventListener(Event.COMPLETE, function(e:Event){
bdaily.text = loader.data
})
var loader1:URLLoader = new URLLoader(new URLRequest('bmtd.txt'))
loader1.addEventListener(Event.COMPLETE, function(e:Event){
bmtd.text = loader1.data
})
var loader2:URLLoader = new URLLoader(new URLRequest('bwtd.txt'))
loader2.addEventListener(Event.COMPLETE, function(e:Event){
bwtd.text = loader2.data
})
var loader3:URLLoader = new URLLoader(new URLRequest('basketdtarget.txt'))
loader3.addEventListener(Event.COMPLETE, function(e:Event){
basketdtarget.text = loader3.data
})
var loader4:URLLoader = new URLLoader(new URLRequest('basketwtdtarget.txt'))
loader4.addEventListener(Event.COMPLETE, function(e:Event){
basketwtdtarget.text = loader4.data
})
var loader5:URLLoader = new URLLoader(new URLRequest('basketmtdtarget.txt'))
loader5.addEventListener(Event.COMPLETE, function(e:Event){
basketmtdtarget.text = loader5.data
})
if(new_clp){
new_clp.parent.removeChild(new_clp)
new_clp = null
}
if(new_clp2){
new_clp2.parent.removeChild(new_clp2)
new_clp2 = null
}
if(new_clp3){
new_clp3.parent.removeChild(new_clp3)
new_clp3 = null
}
trace('new_clp : '+new_clp)
trace('new_clp2 : '+new_clp2)
trace('new_clp3 : '+new_clp3)
var clp_index = parseInt(bdaily.text) >= parseInt(basketdtarget.text) ? 1 : 2
new_clp = clp_index == 1 ? new clp_01() : new clp_02()
addChild(new_clp)
var clp_index2 = parseInt(bwtd.text) >= parseInt(basketwtdtarget.text) ? 1 : 2
new_clp2 = clp_index2 == 1 ? new clp_03() : new clp_04()
addChild(new_clp2)
var clp_index3 = parseInt(bmtd.text) >= parseInt(basketmtdtarget.text) ? 1 : 2
new_clp3 = clp_index3 == 1 ? new clp_05() : new clp_06()
addChild(new_clp3)
}
This is the simplest way, you can optimize it later.