I'm making an add-on for a fundraising site where it automatically updates the amount raised without having to refresh. I'm able to get the new amount without a problem, but instead of fading in/out when updated, I wanted to make it count up to the new number like Google Analytics does on the real time stats page.
I've tried using a for loop to increment up but I think the problem is adding a delay. any ideas?
There are two things you need: live data, and a way to show it.
For the data, you can either poll your server on a regular basis, or use something such as websockets (or one of the many ways of emulating that behavior). What you choose depends on your needs, and what is available server-side. I personally would use Node.JS with Socket.IO. It's very compatible, and can provide you with near-real-time updates.
Now for displaying it, you can do something simple such as "animating" a number in a DIV. There are also handy gauges and what not in the Google Visualization API.
Related
I am working on a website, and want to allow my user to work without having to click save to manually save their data (similar to how Google Docs allow you to work without having to press save). I was able to achieve this by using a on change event in JQuery and using AJAX to post to the server every time that event occurred. The only problem is that this results in MANY requests to the server. How do I achieve the same result, while reducing the number times requests are sent to the server.
Any help would be greatly appreciated!
Thanks!
The terms you are looking for a “throttle” and “debounce”. There are numerous solutions (e.g., jQuery plugins such as https://code.google.com/archive/p/jquery-debounce/ – disclaimer: I haven’t used jQuery in years, and therefore have no experience with this plugin), but reading a little bit about it, this is not hard to implement it yourself. In case you use RxJS (not likely in a project that still uses jQuery), there are also methods debounce and throttle in it.
Have you thought about using a timer? For example you could still use the on change event, but instead of transmitting on every change you could start a count-down and only if the user didnt typed for for example 10 seconds you transmit.
On my website, users enter some personal information, including ZIP code. This information will be passed to a function that will determine the display of the next page.
The problem is that the function utilizes an underlying statistical model, for which zip codes have too many possible values (~43,000) to be useful. I want to map zip codes to something broader, like designated market area (DMA has around 200 possible values).
But using Google Analytics and BigQuery, I already have the user's DMA before they even enter their ZIP code. Is there a way to access that information while they are still on the page so I can input it to the function?
In case you are wondering if you can use Google Analytics Information in realtime (not quite clear from the question), that will not work - GA does not work in realtime; data processing time is announced as 4 hours for the "premium" version to 24 hours to the standard version, and even if it's often faster you probably do not want to build you business on an undocumented feature that might or might not work as expected.
Also API limits make realtime data retrieval unfeasible even for smaller sites.
If however you have a stash of precomputed data that can be linked to the current user via an identifier (clientId or similar) it would probably be best to export this to external storage as suggested by Willian Fuks.
Since you mentioned personal data, keep in mind that this must not be stored within Google Analytics as per Google's TOS.
(not quite an answer, more like some thoughts of mine)
I don't think that running queries in BQ for each user you find in production is a good approach.
Costs will increase considerably, performance will not be satisfactory by any means in this scenario and you might start hitting quotas limits for jobs against a single table.
One possibility that might work is having your back-end use some google analytics client for retrieving data from G.A. Still, you should check if the quotas are appropriate for you.
Another possibility (I suspect this might be the best option) that you may consider for your scenario is using Google Datastore. It might suit your needs quite well; you could have some table from BigQuery being exported to Datastore and have your back-end system query it directly for the user DMA.
I would like to have a page where a restaurant can log in and see all of their current reservations/take-out orders, and I want this page to automatically update when someone (from another computer) makes a reservation or places an order. The idea is that the restaurant would leave this page open at all times to show their current status. What is the best way to do this? Can it be done without refreshing the page?
I wasn't even sure how to refer to a setup like this, so I wasn't really able to find much using Google. Is there a word for this type of setup?
I am using rails, and I am considering using AngularJS for the front end. Any suggestions?
There are two approaches to solving this.
The first, oldest, simplest is that your webpage contains some javascript that will poll the server at regular intervals (e.g. every 10-30 seconds), to check if something has changed and then add the changed data (e.g. reload a partial).
The second approach is a bit cleaner, and it allows the server to push the changed data to the connected clients, only when it is changed.
There are a few available approaches/libraries for this:
use websockets
use pusher
use juggernaut The author of juggernaut had deprecated it, in favor of using HTLM5 SSE (server sent events). Read more.
The advantage of using polling is that it is easy, works on every browser, but you have to write more code yourself, you will put some kind of load on your server, even if data has not changed (although the load is minimal).
The push-technologies are newer, work very clean, less code is needed. But some work only in newer browser (most of the times not really an issue), and some require extra support/setting up on your server-side.
On that note: pusher is really easy to get started with, and if your load is limited, it is free.
There are still a lot of others, but this should get you started in the right direction.
I'm sure this problem has multiple solutions. I am currently designing a web application to feature an interface similar to what you would see in a Facebook Activity Stream, in terms of how the content loads.
I want the page to:
Load a given number of objects initially
Load the next set of objects once the user reaches the object at the bottom of the screen, AKA when object, say, 15, becomes visible onscreen, I want to load 15 more objects, and do the same when object 30 appears etc.
I have, in my database, potentially hundreds of thousands of these entries, and I want to make sure the user only has to load a given number at a time to reduce stress on the servers etc.
Since I'm using Django, I figured this would be some really cool JS mixed with django-template language, but I'm not really sure.
Is this more of a CSS problem?
Where do I start in thinking of this? What technologies should I consider? Are there any well known modules I can take advantage of here?
Thanks for your time.
I take it as you are confident in your Django skill.
If you want to do yourself, then jQuery and jQuery.ajax are 2 things you need to read carefully. Basically you need to check with jQuery if the user scroll to the end of the page, then make ajax call to Django to fetch new data and append to bottom of the page.
If you want to use a ready made package, I think Django endless pagination will do the job.
Alright, Here it goes:
I'm currently implementing a software which autorefresh/autopull/autoreload the data to keep the screen live by using AJAX.
This is actually working, but I know I´ve used the simplest approach which is:
SetInterval (javascript)
Call the Refresh Method over and over each n seconds.
Read the Json Data, rebuild the HTML and update it.
This can also be done by just calling a SetTimeOut (javascript) and the end of the AJAX request.
In the refresh method I internally check that it´s not being called simultaneously, etc.
However... this is the simplest approach, it works but, in slow computers, firefox and ie, I can see this activity sometimes freezes the browser, and I know this might not be necessary because of the AJAX call, but how "intensive" is the javascript operation overall... but, after running a profiler, Overall javascript (using jquery by the way) seem to be fine. Also if I disable the autorefresh, the browser wont freeze by short seconds in slow computers.
I decided to investigate how several of the majors AJAX applications works out there.
Facebook for instance.. they do a request all the time, every N seconds, interpret the JSON and update the screen, but, google docs... I can seem to find any request.. This is maybe because: they are just telling the javascript debugger engine that they do not want their request to be logged??, or, are they using another approach to the refresh dilemma?
I read in another answer here at stackoverflow, that Google Docs keeps an open connection..
Can this be the answer? http://ajaxpatterns.org/HTTP_Streaming
What do you guys know about this?
Just as a side note, the application I´m developing is meant to be accessed by thousands of users at a time, and I know the JavaScript refresh routine only tells a little part of the history, but the Server Side Application and the database is currently supporting such a load according to the stress tests I did by using several thousands of virtualized stations. I just want to know what you think about the client browser problem specifically.
Regards and
If you are still reading this..
Thanks you for your time.
I suspect they're using WebSockets. Browser support is flaky, so your mileage may vary with this approach.
You may also want to look at APE (ajax push engine), which is a decent implementation of long polling with a client/server architecture.
You can read up on Long Polling. But then you'll have to handle dropped connections etc.