I'm doing a market/stocks watch web project.
At the server side I have a Servlet and Service on a cometd-jetty implementation.
The Service (CometD Client publisher) sends a JSON published data. i.e. [{"Stock Code":"ABC"},{"Stock Code":"DEF"}]. Time interval of published data is almost every second or even less.
At Front-end, I'm using cometd javascript implementation to fetch the data and render it in html table using jquery.
Questions:
1.) What is the best way to render the data in a table (using datatables plugin) with very fast receiving of data from publisher/cometd server (less than a second each message)?
2.) How can I indicate change in price through hi-lighting table cell when stock price changes? I'm trying to figure this out using js or jquery?
Your help is very much appreciated!
1) The DataTables plugin can use a JavaScript array as its data source. You'll have some sort of method that's processing incoming data; push that into a JS array and then call .dataTable() with that as your source.
2) Inside the DataTables initialization object you can set callback functions at various stages. One of these is fnRowCallback, which allows you to modify the row and the cells within, based on the available data. Grab the data, run your comparison function, and when the conditions are met, modify the cell.
For both questions, there should be sample code available at DataTables.net.
Related
i have the below scenario:
There is an arraylist of Java Pojo which stores data from db. The pojo has 3 fields and after fetching the data from db, the size of arralist is 250. I am storing that data in application scope. Its a spring mvc application.
I have created an end point in a controller class which filters the arralist using collection streams and returns the list of string as json.
I have implemented jquery autocomplete at frontend jsp and javascript, and i am fetching the source from this end point through ajax call.
My question is, whether ajax call approach is good or should i filter the data at the javascript code only.
After implementing ajax, the xhr call is taking on an average 300ms in local.
Note: IE11 support is also needed.
So I found this Pie Chart that I would like to use on my website (http://canvasjs.com/docs/charts/chart-types/html5-pie-chart/)
I've already adapted the code to where it establishes a connection to the MySQL database gets the information I need from and I've saved those as variables in PHP and displays them within the Pi chart. So far so good!
Now I've really like to make this a little bit more real-time as the information changes quite rapidly, so I was thinking, of having the jQuery update its information on a regular basis. Preferably every 1000ms or so. How would I go about achieving this?
Thanks for your suggestions!
Basically you will need to establish an ajax data flow:
your main page will contain only the graph, but skip the data
request the data by sending an ajax request to a separate page
the data page should return your data object in JSON format (use json_encode())
With periodicalupdater you can update your data in the interval of your choice and automatically adjust this interval to reduce the load on your server.
There's a worked example in the documentation: http://canvasjs.com/docs/charts/how-to/live-updating-javascript-charts-json-api-ajax/
Basically, you need to use JavaScript and more specifically Ajax to query the server continuously and fetch new data in JSON format. Then update the chart using the brilliantly named 'updateChart' method. :)
I've developed a web application with the concept of Single Page Application but none of the modern techs and frameworks.
So I have a jQuery page that dynamically requests data to localhost - a Laravel instance that compiles the entries in the DB (within a given time interval).
So the client wants to see all the entries for last week, the app works fine. But if he wants to see the results for the whole last month... well, they're so many that the default execution time of the php ins't enough to process all the data (30 seconds). I can easily override this, of course, but then the jQuery client will loop through these arrays of objects and do stuff with them (sort, find, sum...). So I'm not even sure jQuery can handle this many data.
So my question can be broken in two:
Can laravel ->paginate() be used so the ajax request of jQuery can also chunk the data? How does this work (hopefully in a manner that doesn't force me to rewrite all the code).
How could I store large amounts of information on the client? It's only temporary but the users will hang around for a considerable amount of time on my webpage, and I don't want them to wait 5 minutes every time they press a button
Thanks.
If you want to provide an interface to a large amount of data stored in a backed, you should paginate the data. This is a standard approach, so I'm sure your client will be ok with that.
Using pagination is pretty simple - see the docs for Laravel 5.0 here: http://laravel.com/docs/5.0/pagination
In order to paginate results in the backend, you need to call paginate($perPage) on your query instead of get() in your controller, like that:
$users = User::whereIsActive(true)->paginate(15);
This will return paginated result with 15 records per page. Page number will be taken from page parameter of the request. In order to get 3rd page of users, you'll need your frontend jQuery app to send a request to URL like:
/users?page=3
I don't recommend caching data in the frontend application. The data can be changed by some other user and you won't even know about it. And with pagination, your requests should be lightweight enough to stop worrying about a request sent to fetch every page of results.
Not sure if you're subscribed to laracasts but Jeffery Way is amazing in explaining features of Laravel and I highly recommend his videos.
In short you can paginate the results, then on the view when you call the foreach on your items you can array_chunk() the results to display them how you need to. But the paginated results are going to be fetched using a query in the URL, and i'm not sure that is what you want if you're already using a lot of jQuery to keep everything on the same page.
https://laracasts.com/lessons/crazy-simple-pagination
But assuming you're already paginating the results with whatever jQuery you've already written for the json data...
You could also use a query scope to get the data you need to for the amount of time to scope to create a simple api to use with ajax. I think that's probably what you're looking for.
So here's what I would do assuming you're already doing some pagination manually with your javascript.
Create a few query scopes to filter the data for different lengths of time
Create simple routes to fetch results from URI using the query scopes
Get the json data from the route preforming an ajax requests to the URIs created
More information on Query Scopes: http://laravel.com/docs/5.1/eloquent#query-scopes
I currently have a spring mvc app that gets a list of users from a database and displays their information in a table using JSP to basically loop through each object in the list and create a table row for them.
Each user has an expiry date attribute as part of their record in the database. What I want to achieve is basically a button that when toggled shows or hides all users that have expired (i.e. their expiry date is less than today's date).
For this I am trying to use AJAX calls to my controller to fetch me all users expired or not OR only users that haven't expired depending on how the button is toggled.
What I would like help on is the best way to achieve this as I can think of a few nasty ways of doing it like having a separate page and refreshing but I am confused on a few things.
Should I just ditch the JSP looping through to make the table and make a method in JavaScript that creates that table when given the data? If so how do I get the data from the controller to JavaScript, can an AJAX call to a controller return me a list of my user objects?
My best guess is that instead of adding a list of objects to a model and letting JSP do the work, that I instead return a JSON with the data and use JavaScript to build the table. I can then call an update method to re-build the table.
You are correct. You have 2 options:
Have AJAX call return html (i.e. jsp) for the table and then replace
the body of the table
Use JavaScript to build the table and then
update the table with AJAX call which returns JSON.
If you want to get more sophisticated, you could use a JavaScript framework like Knockout.js which would let you mark up the table and refresh the table without too much of JavaScript writing.
Blurgh I'm not sure why this question has received so much attention, especially now in the days of angular but if you are struggling with this then I would strongly recommend the following library:
https://www.ag-grid.com/
I'm fairly new in web design/code and I'm trying to figure out/learn how to write script that would execute my table filter. As I found out this would be easiest to do in PHP since all data comes from table itself (and not MySQL DB).
Here is example of HTML with test table and some filters I would like to implement, but I've been having problem with writing PHP script which would work properly.
http://www.bonemachineonline.com/test
(I uploaded example on my own site)
I would appreciate if someone could help me out with this in anyway! Writing example or explaining how/what to do. Anything is more than appreciate!
Try using jquery dataTable().
You can refer the below link
Jquery-dataTable()
You have 3 approaches for data filtering.
If the table is filtered by default, and all the data are not loaded, take the (1) or (2).
If you load the whole table each time, take the (3).
Approaches
(1) Server side, with page reloading : your user checks filters, then clicks on a submit button. You get all the checked filters and you send it to your PHP. Server side, you retrieve the filters and remake your query (SQL or other in your case).
(2) Server side, with AJAX : exactly the same mechanism, but you send the filters to your PHP with an AJAX request, wait a response, remove your table and remake a table with the new data.
(3) Client side, with JavaScript only : when your user checks a filter, you trigger the change event and hide the matched elements in the table.
Some tips
For the approaches (2) and (3), jQuery could be very useful.
For the approach (3), you can use a library. Here: 35+ Useful jQuery Filter and Sort Plugins.
For the approach (1), if in your case the data are in a PHP array, you have a lot of functions to manipulate this array in function of your filters. Here: Array Functions - Table of Contents.