Saving d3 chart states for users - javascript

The project I'm working on involves financial data, my issue specifically pertains to chart visualizations with d3.js. So my back-end is in PHP using Laravel and my front-end will request data through an AJAX call to my back-end and it will send data to the client in the response.
I then use d3.js to visualize the data in various graphs. Because this is async and uses async GET requests, I don't have any specific URL path to navigate to in order to 'save' a state. Navigating away from this page will cause a reset for anything a user might have entered.
I am wondering if there is a way to easily integrate some sort of method for saving a chart's state. I am thinking maybe cookies could be something to look into? The user can add various technical indicators such as moving averages and there is technically no limit to how many indicators they would like to show. As a result, a user can concoct some complex charts--all of which would be reset anytime a user wants to refresh the page or in the off-chance they accidentally hit the back button.
I already have user registration on the website so I could also consider just saving chart states on my end, as well, and fetching them when a user navigates to the charts page. I have access to both a MongoDB database and a MySQL database.
I've never done anything like this before since this is my first time I'm working with a deployed app and the first time I've really needed to consider something like this.
Multiple charts also are depicted on this page, if that makes any difference.

Related

How to change JavaScript page functionality after user is authenticated without reloading page

I have a single webpage that uses an API to query backend for data, which is returned and plotted in a few figures. Backend is Node.js with Express.
The appearance of the figures is controlled through a set of JS functions that are loaded when the page initially loads.
After the user has been on the page for 30 seconds, I want to ask them to login or register by displaying a modal over the page.
If the login is successful, I'd like to close the modal and have new functionality available to the user, including changing the behavior of the original JS functions that were loaded when the user first arrived. But, I'd like to do this without reloading a new page with a separate set of JS functions.
I'm a relative newbie at this and have been having a hard time figuring out the right way to accomplish this.
I thought maybe there was a way to update the original JS function file by submitting an API get request and using the response to overwrite replace/overwrite the non-authenticated version. Then user would have access to new functionality without having reloaded the page.
But, I can't seem to find anything that would support this as the correct approach, or even whether this would be possible.
Really need help on which direction to go.

AJAX - How can I build a notification system, that is constantly getting updated, without slowing down my website too much?

I am a beginner to web development, and I am trying to do a notification system with AJAX and jQuery.
In my web application, I have a comment system where you can mention another user. After a comment mentioning a certain user has been written, a new entry on my notifications table will be added, containing the comment, the id of the user who commented and the id of the user(s) who will receive the comment. After the notification is stored in the database, I want the person that was mentioned to receive the notification.
To that effect, I decided to use AJAX. Using the setTimeout() method, I am sending an AJAX request to the database every 2 seconds, and with that, I can display the notifications visually to the user that is meant to receive them.
My only concern is that this will slow down the site once I connect it with a server.
So, I was looking for a way that would allow me to implement a notifications system without slowing the site too much, since the one that I am using currently doesn't seem very efficient.
I would appreciate any help.

Prevent database mining when users have full access

I am currently in a situation as follows -
I am currently hosting a private webapp, which involves the sending of AJAX calls to the database server and displaying the results. (REST Architecture)
Users can query the database by toggling various buttons, which correspond to a specific query that performs the above operation.
Users have access to the entire database (product feature). However, we only allow the retrieval of a small portion of the database in a single call.
However, I do not want the user to be a able to create a bot that is able to recreate the entire database in a short period of time. At the moment, a user could easily do so by duplicating the HTTP request (access to JS script/packet analyzer).
I have considered the following solutions -
Bot detection algorithms
Captcha
iframe
disabling the ability to read source code/JS files with a custom browser
I would like to find out if any of these solutions are feasible, or if there are any better alternatives/architecture available. I just want to prevent the scrapping of the database.
Please help! Thank you!

Graphite or multiple query with AJAX call?

In general I want to know the possible benefits of Graphite. For now I have a web app that receives data directly from JavaScript Ajax call and plots the data using high chart.
It first run 20 different queries for each graph using Python from my SQL database.
And sends each result data to HighChart library using GET Ajax call.
And HighChart adds plot to each graph in realtime.
There is no need to save data because I need only realtime plotting within certain time range. Data outside time range just plushes.
But when I see the 20 Ajax calls in one page I feel like I am doing this in an inefficient way although it gets the job done.
So I looked at the Graphite but it is hard for me to decide which is better. Since I will pull up all data from present SQL table I don't need another storage. But everybody says graphite performs fast but I would still need to instantiate 20 different graphite graphs. Please give me some guidance.
What would you do if you have to visualize 20 different realtime graphs in one page concurrently each of which receives its own query data?
Maybe better is call one ajax which gets all data and then prepare parser which will return data for each chart.

How google doc sync two document at the same time?

I am making a cooperation application like google docs, but I found this is different to do on the web. The problem is, when the user typing, another user should see the update at the same time. But what actually behind the screen? Is that when the user have an action, it sent a http request, and write into database. At the same time, another user get the action from database, and rendering the result that the user just type. If use this way to implement, the database need to keep read and write.....apart from this solution, how can I sync two people work on the fly? Thank you.
Check out something like this http://pusherapp.com/
Or http://www.tornadoweb.org/
Both are good at real time pushes without constant AJAX requests that will put a lot of strain on your server

Categories

Resources