I have the following code, and what I would like to do is update the chart with values coming from an AJAX call on a button push (also on page start). The issue I am having is that the chart will not update or re-render. I have hard coded the values coming in from the server just as a test because I know I can get the values.
require(["dojox/charting/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Lines",
"dojo/ready",
"dojox/charting/themes/Claro",
"dojo/request",
"dojo/dom",
"dojo/on"],
function(Chart, Default, Lines, ready, theme, request, dom, on){
ready(function(){
var policeResChart = new Chart("simplechart");
policeResChart.addPlot("default", {type: Lines, enableCache:true});
policeResChart.setTheme(theme);
policeResChart.theme.plotarea.fill = "";
policeResChart.fill = "";//the broder around the chart
policeResChart.addSeries("data", policeResponses, {stroke:{color:"orange", width:3}});
policeResChart.render();
var myButton = dom.byId("btn");
on (myButton, "click", function(evt){
request.post("test.jsp", {
data:{
color: "blue"
}
}).then(
function(response){
var newData = [
{ y: 1 },
{ y: 1 },
{ y: 1 },
{ y: 31 },
{ y: 1 }];
policeResChart.updateSeries("data", newData);
policeResChart.render();
}//end response
);
});//end onclick
});//ends ready function
});//ends require
whats also really strange is that only 1 render() can be called. so for example if I take the first (the on ready) render out and use the onclick render it will work. Im also noticing that ANYTHING i put after the second render in the onclick does not work. so alert("test") after the second render in the button push does nothing. Im not so sure why.
Ok so, for some strange reason when I use policeResChart.fullRender(); in the button push this works. Can someone explain why? I dont fully understand why the render() did not work.
Anyway, glad its "fixed".
Related
I'm trying to write an aframe component to get a value from the position attribute. But, curiously, when I use the console.log, it first shows {x:0, y:0, z:0}, but when I click, it shows other values (the values that I need {x:5, y:0, z:0}, but I can't get through my code).
Code:
AFRAME.registerComponent('mycomponent', {
schema: {
destination: {type: 'string', default:''}
},
update: function () {
if(this.data.destination){
let destinationEl = document.querySelector(this.data.destination);
let positionEl = destinationEl.getAttribute('position');
console.log(positionEl);
}
}
});
Console
Access the code running here.
This is expected. You're trying to access data from an entity that has not yet initialized. Entities initialize children first and top to bottom
You can put the entity first in the DOM:
<a-box id="obj2"></a-box>
<a-box mycomponent="destination:#obj2;"></a-box>
Make it a child:
<a-box mycomponent="destination:#obj2;">
<a-box id="obj2"></a-box>
</a-box>
Or wait for the entity to load, making code independent of the DOM structure.
var self = this;
if (destinationEl.hasLoaded) {
this.printPosition();
} else {
destinationEl.addEventListener('loaded', function () {
self.printPosition();
});
}
Corrected glitch
Also make sure you're using latest A-Frame. 1.3.0 at the moment of writing this.
Hi guys I am building my game right now and trying to get some text to disappear after a few seconds. I am using Phaser and I am not to sure how to do this.
Currently I have:
Asteroid.time.events.remove(Phaser.Timer.SECOND - 3, this.startInstructions3, this);
My text appears on the page fine:
if (!this.rockmodel.countLiving()) {
Asteroid.time.events.add(Phaser.Timer.SECOND * 3, this.levelIncrease, this);
var startInstructions3 = 'NEXT LEVEL! ';
this.gametext3 = Asteroid.add.text(Asteroid.world.centerX, Asteroid.world.centerY, startInstructions3, lifefont3.thefont3);
this.gametext3.align = 'center';
this.gametext3.anchor.set(0.5, 0.5);
}
Then when I go back to my levelIncrease function i have :
if (this.rockcount < rocksincoming.max) {
this.rockcount += rocksincoming.astup;
}
Asteroid.time.events.remove(Phaser.Timer.SECOND * 3, this.startInstructions3, this);
this.randomrock();
},
endofgame: function () {
Asteroid.state.start(gameobjectstouse.menu);
},
My question is, is it like -3 or is there a set thing you can do in Phaser like duration or something like that? I can't seem to find anything about it.
Thanks.
There's actually an official example that covers this scenario for you.
Your Asteroid.time.events.remove() would actually remove an event, not add a removal event. For example, if you had an event that looped and wanted to remove that event, you would use time.events.remove.
So you want to add an event that triggers after three seconds, so something like the following, instead of your Asteroid.time.events.remove line:
Asteroid.time.events.add(Phaser.Timer.SECOND - 3, this.nameOfFunctionToHideText, this);
Where nameOfFunctionToHideText (or whatever new function you create) would be the one that would remove the text.
I got a HighChart with several 2 series.
Now I want certain points in series 1 to be disabled when I click a link.
This is my code so far:
$('.remove').click(function () {
var chart = $('#plot').highcharts(),
series = chart.series[0];
if (series.data.length) {
chart.series[0].data[0].remove();
}
});
The problem is, that after removing this point, [0] changes to another value and after clicking it again, it goes on and on with deleting.
I just want the points to disappear, this is possible with visible:
visible Since 1.2.0 Read only. The series' visibility state as set by
series.show(), series.hide(), or the initial configuration.
But I just don't manage to implement it the right way in my onClick event.
If I understand you well, you need to keep "place" where the point was? If yes, you can try to use point.update() function and set null value.
Example: http://jsfiddle.net/gd4q4jo0/1/
I solved clicks on a link to delete points like this:
$('.remove').click(function () {
var series = chart.series[0];
var id = $(this).data('id');
if (series.data.length) {
// disable point in graph
chart.series[0].data[id-1].update(
{
y:null
});
}
// delete used tablerow
$(this).closest("tr").fadeOut(50);
});
And I managed to expulse points onClick on the graph with an event, it's working like this:
series: [{
name: 'time',
data: data: [[1, 129386],[2, 123966],[3, 123162],[4, 123245],[5, 124314],[6, 123946],[7, 124156],[8, 123367],[9, 124460],[10, 123366],[11, 123182],[12, 123915],[13, 124627],[14, 123142],[15, 124044],[16, 124346],[17, 123156],[18, 124356],[19, 123511],[20, 124239],[21, 123252],[22, 125169],[23, 125027],[24, 123508],[25, 124065],[26, 122719],[27, 124199],[28, 122968],[29, 124132],[30, 124052],[31, 124383],[32, 123265],[33, 124083],[34, 123855],[35, 124284],[36, 123719],[37, 123213],[38, 124245],[39, 123079],[40, 123721]],
events: {
// if point gets clicked, it'll be deleted
click: function(event) {
console.log(event.point);
var pointId = event.point.x;
$("#hidden-points-table").fadeIn(1000);
$('#hidden-elements').append(pointId + ", ");
event.point.update(
{
y: null
});
// deleting the table row
$("[data-id='"+pointId+"']").closest("tr").fadeOut(50);
}
}
}
Since it was hard to find solutions, I hope this will help some people with it.
This page was really helpful, too.
I stumbled about a strange circumstance.
We use dojo AMD Vers. 1.9. in which dojo.connect is replaced by dojo.on
So far all is okay. Now i want to connect an Eventlistener ( Checkbox is Selected) to the IndirectSelection-plugin of my EnhancedGrid. I search for a solution with dojo.on but just find dojo.connect?!
Is that correct? I mean dojo.connect is deprecated generaly in dojo 1.9?
This is the code i find in the dojo-side:
dojo.connect(grid.selection, 'onSelected'|'onDeselected', function(rowIndex){...})
Reference: http://dojotoolkit.org/reference-guide/1.9/dojox/grid/EnhancedGrid/plugins/IndirectSelection.html#usages
and here's my Code:
if(!registry.byId("GraphGrid")){
grid = new EnhancedGrid({
id: 'GraphGrid',
store: GraphicStore,
query: { ident: "*" },
structure: layout,
rowSelector: '20px',
keepSelection: false,
plugins: {
indirectSelection: {
headerSelector:false,
width:"40px",
styles:"text-align: center;"
}}
},"GridGraphicInMap");
/*Call startup() to render the grid*/
grid.startup();
grid.on("rowClick", function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get a value out of the item
var value = this.store.getValue(item, "geom");
highlightGeometry(value,true);
});
dojo.connect(grid.selection, 'onSelected', getSelectedItems);
}
else {
setTimeout(function(){
grid.setStore(GraphicStore);
}, 1000);
}...
I tried to change it to dojo.on or grid.selection.on('Selected',getSelectedItems); but it doesn't work. Is in this special Case dojo.connect still the right way to connect?
The code above works fine, theres nothing wrong with it.
Regards, Miriam
You can use dojo.connect it wont affect event triggering.
And try using your connect in the following manner:
dojo.connect(grid, 'onSelected', getSelectedItems);
or
dojo.connect(grid, 'onselectionchanged', getSelectedItems);
Please let me know if any of these doesn't work.
I was asked to post this as a question on StackOverflow by http://twitter.com/jonathanjulian which was then retweeted by several other people. I already have an ugly solution, but am posting the original problem as requested.
So here's the back story. We have a massive database application that uses ExtJS exclusively for the client side view. We are using a GridPanel (Ext.grid.GridPanel) for the row view loaded from a remote store.
In each of our interfaces, we also have a FormPanel (Ext.form.FormPanel) displaying a form that allows a user to create or edit records from the GridPanel. The GridPanel columns are bound to the FormPanel form elements so that when a record is selected in the GridPanel, all of the values are populated in the form.
On each form, we have an input field for the table row ID (Primary Key) that is defined as such:
var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true
} /* other fields removed */
];
So, that is all fine and good. This works on all of our applications. When building a new interface, a requirement was made that we needed to use a third-party file storage API that provides an interface in the form of a small webpage that is loaded in an IFrame.
I placed the IFrame code inside of the html parameter of the FormPanel:
var editForm = new Ext.form.FormPanel({
html: '<div style="width:400px;"><iframe id="upload_iframe" src="no_upload.html" width="98%" height="300"></iframe></div>',
/* bunch of other parameters stripped for brevity */
});
So, whenever a user selects a record, I need to change the src attribute of the IFrame to the API URL of the service we are using. Something along the lines of http://uploadsite.com/upload?appname=whatever&id={$id_of_record_selected}
I initially went in to the id field (pasted above) and added a change listener.
var editFormFields = [
{
fieldLabel: 'ID',
id: 'id_field',
name: 'id',
width: 100,
readOnly: true, // the user cannot change the ID, ever.
monitorValid: true,
listeners: {
change: function(f,new_val) {
alert(new_val);
}
}
} /* other fields removed */
];
Nice and simple, except that it only worked when the user was focused on that form element. The rest of the time it failed to fire at all.
Frustrated that I was past a deadline and just needed it to work, I quickly implemented a decaying poller that checks the value. It's a horrible, ugly hack. But it works as expected.
I will paste my ugly dirty hack in an answer to this question.
"The GridPanel columns are bound to
the FormPanel form elements so that
when a record is selected in the
GridPanel, all of the values are
populated in the form."
As I understand it from the quote above, the rowclick event is what actually triggers the change to your form in the first place. To avoid polling, this could be the place to listen, and eventually raise to your custom change event.
Here is the ugly hack that I did to accomplish this problem:
var current_id_value = '';
var check_changes = function(offset) {
offset = offset || 100;
var id_value = document.getElementById('id_field').value || '';
if ( id_value && ( id_value != current_id_value ) ) {
current_id_value = id_value;
change_iframe(id_value);
} else {
offset = offset + 50;
if ( offset > 2500 ) {
offset = 2500;
}
setTimeout(function() { check_changes(offset); }, offset);
}
};
var change_iframe = function(id_value) {
if ( id_value ) {
document.getElementById('upload_iframe').src = 'http://api/upload.php?id=' + id_value;
} else {
document.getElementById('upload_iframe').src = 'no_upload.html';
}
setTimeout(function() { check_changes(100); }, 1500);
};
It's not pretty, but it works. All of the bosses are happy.
If you took a moment to read the source, you would see that the Ext.form.Field class only fires that change event in the onBlur function