I have a radar chart which renders when read from json file. i have used listeners for this purpose. Now, I need this to be upgraded to rest call. I have a rest call which is fired when I click a button. This rest call returns data to a store and data model. I want to render the radar chart using this data. So each time the button is clicked, a new set of data is returned. How can I achieve the rendering of the radar chart each time new data is received?
If any code is needed, please feel free to ask for it.
Thanks.
I am rendering a mock chart initially using listeners. On button click I use a different set of data model, store and listeners (within the button's handler function). This store fires the rest call and loads the new chart each time the button is clicked.
Related
How can I use server side events(sse) in vue? I'm receiving sse from backend and I need to implement that when I receive first event, I will show ringing panel on screen. Then I can accept that call and then show different panel and when I click on hang up I will show again screen like before events. It will be a call centrum.
I created method for receieving and handling event.
setupStream(){
let evtSource = new EventSource('/hzs/events.sse')
evtSource.addEventListener('call_status', event => {
let data = JSON.parse(event.data)
this.channels.push(data);
}, false)
}
Now, when I call I get something like this:
Where first curly brackets are incoming call, second are after I pick up phone and last are after I hang up.
How can I use this in app and show for example green ringing bar on screen based on events? So for every event I need different UI components.
Do I need to use vuex?
Thanks
Is there a way by which I can duplicate or clone dijit widgets?
Basically, idea is to improve page rendering performance by minimizing widget creation time.
We have a single page web application and we do not reload the entire page whenever the user performs any action.
The flow of events is as follows,
The main page is loaded by the browser. It contains a dijit ContentPane which acts as a master container and displays the entire page using various other dijit widgets like textboxes, tabs, datefield, Enhanced grid etc.
The user performs an action (e.g. click on a dijit button)
The application sends an ajax call to server which processes the button click event and generates UI of the next page.
Browser receives successful response from ajax call and calls refresh method of dijit ContentPane. Which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position. (instead of refreshing the entire page)
The user again performs some action and again the refresh method is called which triggers destruction of existing widgets and new set of widgets are created and placed at appropriate position.
Because of such architecture the browser has to destroy existing widgets and recreate them again and again. Which results in slow performance.
The idea is to have a set of widgets always readily available on the browser clone them and place at appropriate position and update them instead of recreating each time.
Yes this is possible with something called _AttachMixin.
Basically there is no getting around the fact that your widgets would need to attach event listeners to the HTML Document. What can be cut out though is the time in the Dijit Widget's lifecycle to generate the DOM. As we well know, simple Dijit widgets like a dijit/form/Button has a div inside a div inside a div etc.
This is explained in detail here http://dojotoolkit.org/reference-guide/1.9/dijit/_AttachMixin.html
Here is an example using Node.JS as a backend. http://jamesthom.as/blog/2013/01/15/server-side-dijit
This is a tough problem and this concept isn't explained very thoroughly. If you have a backend that is not Node.JS you have to manually make the widget string and pass it as a response to your AJAX and an follow the example from the 1st link (Ref Doc)
We have had lots of widgets of our app render nicely within the client side. A far less complicated approach would be to simply show / hide (instead of render and destroy) widgets as and when they are needed. I assume that you app's access policy would focus on data and not which person has access to which widget.
I'm trying to load search results into DataTables control. So after the user inputs some parameter and pressing the 'Search' button, then I would like to see the data loaded in the DataTables control. How do I initiate DataTables to load data through ajax only upon a user triggered event? All the examples I have seen all load data immediately. Thanks.
Use iDeferLoading in the initialisation code to prevent the datatable making a request on the initial page render.
'iDeferLoading': 1
Use fnDraw in your button click event to make the request with the user input as a parameter (see fnServerParams for this)
oTable.fnDraw();
I'm building a Windows 8 Store app in HTML/JS which uses GeoNames & Mediawiki/Wikipedia APIs.
JSON Data from the GeoNames API is populated into a Listview. Oddly, the content in the listview refreshes on its own?
Does anyone have any pointers on what could be wrong?
This refresh happens once every minute. While I'm on any other item in the ListView than the first, the refresh forces back the focus to the very first item in the list view.
I'm using the Geolocator PositionChanged event. I've not set any value explicitly to the ReportInterval property of the Geolocator class.
This is because you have some code that is setting the itemDataSource on the ListView -- is this not because you have some long poll function that is completing, and setting the data again and again?
I have an application that has 3 level of data depth:
list of presentations
presentation detail
presentation slides
Right now when user came to the app he's presented with list loaded from JSONP store. He click on one item and the callback function receives the record. It pushes it into new view - the detail and displays it. User can disclose presentation slides from there - data record is passed from detail again.
Problem is when user refreshes the page or came from URL. If he came to url like /presentations/slides/1, he wants to see the slides for presentation id:1. Problem is that as long as he wasn't at the list, data was not loaded and because it was not loaded, it was not passed to the detail and the detail didn't pass it along to the slides view. So I have no data.
But I still have the ID! Comming from the PHP's Zend Framework, I would call something like: this.store.find(1), but I can't find any way to do this.
How do I load something from the store based on it's record.data.id?
To add more, store.load() seems to work asyncronously, so when I do:
store.load();
store.each(function(rec){console.log(rec);});
It wouldn't work with JSONP store, because the data is not loaded yet. But when I use Chrome Debuger and pause the execution to let the data load, it works :(
You are correct the load is asyncronously so all you have to do is use the callback function of the store. You can find an example here How to get data from extjs 4 store