I have created one web application to produce graph using php, mysql and highchart. All input selection for graph is drop down there are 4 input fields along with date range. it was working fast when the table has less data. Now the table has around 700 MB data so it is not working fast. Then we decided to move select2.js here it is working better. But still some what performance we need... now it takes 16 sec to bring drop down value.
Anyone could you please suggest me how will i get faster performance with select2.js file. if select query has to be optimized according to that please guide me to do that also. Following is the query to take distinct value,
select distinct client from global_stats
Related
Situation:
I'm playing a little by using the Matt Kruse's library I found at the page Table Sorting, Filtering, Etc at the URL http://javascripttoolbox.com/lib/table/source.php.
It works pretty well but I wish to implement a little improvement (maybe it would be better to use the locution "new feature") and I don't know where to start because I'm a newbie in js and that js file uses more advanced programming statements I don't fully understand, not yet at least.
I have a single html file with some tables in it. Some of them are filterable and sortable thanks to that library. The number of tables may vary, the number of columns (fields) in each table may vary as well, and the number of records (rows) of each table may vary as well too. Of course the content is different in each table too.
By placing a specific css class in the th element of the targeted column I choose, I indicate to the Matt Kruse's library to create in that column a html element that is populated of a list of html elements that are computed dynamically by the js it self by picking a distinct and sole value of each record for that column.
When I wish to apply a filter to the table on the basis of certain column, I have just to choose the relative from the corresponding box and the table gets filtered accordingly, as I expect to. It works just hiding the records (the html rows) with not matching criteria in that specific column with a filter applied on it. Of course it is possible to use filters on more than one column at once if needed. It works pretty similarly to MS Excel.
The problem
When I apply a filter to a column the other columns filter drop-down combo boxes (the html elements that contain the compiled options for filtering other columns) continue to show all options instead of hiding those that are filtered in the table and are no more needed. So it becomes pretty tricky especially on complex tables to choose filtering criteria from other columns because the user has to understand by himself what are the criteria that aren't usable because the corresponding rows are already hidden by a filter already applied to another column.
One more thing: when I edit the content of one or more table cells, the filter of the relative column(s) doesn't update to match the editing made, but it seems to be to stay static.
Goal of this question
If I use a spreadsheet (as LibreOffice Calc, or MS Excel, or Google online spreadsheet, or else) when I filter a column other columns' filter drop down menu are filtered as well. If I remove a filter somewhere, other columns filters drop down are updated accordingly.
All this behavior is what I would like to implement into Matt Kruse's library. In this way it would be easier to filter by multiple columns because the boxes containing the filter criteria of the other columns will show just the filter criteria left by the all the previously applied filters.
What I have already tried
I tried to implement something to do that but it was so slow that I was too much ashamed of its execution time that I already deleted the whole algorithm I created.
For comparison using the Matt Kruse's library algorithm implies just few instants to compile all tables data into filter elements (on all tables as well). But the algorithm I've implemented needed more than 30-40 seconds for just one table. Way too inefficient.
Substantially I wrote few "for loops" that for each into each of the filtered table, compares the value of the option with each one of the corresponding column and if finds a mach keeps the option visible, else it hides that element into the . I attached that algorithm to the change event of each , so when I clicked and selected the the event was triggered and all the content of the table was updated. It worked as expected but, as I said, what I implemented was way slower.
So the question is:
How do I modify the Matt Kruse's js file to implement the feature I want keeping the highest possible performance?
(If Matt Kruse is reading this, feel free to pick up this idea and implement the new features needed above: I'm sure it would be greatly appreciated).
Thanks everybody in advance for the contribution.
I have a large data which should be dropdown values in a multiselect.
I tried using http://dotansimha.github.io/angularjs-dropdown-multiselect/#/
But it is taking too long to load.
Please suggest a perfect way to implement this..
I haven't used the component you're using, but the best way to implement a dropdown with huge amount of data is by using server filtering and minLength, in general:
Min length means that you start showing suggestions after he has typed e.g. 3 letters.
Server filtering means that you run a query per letter to the server, to show the suggestions needed for the dropdown. select * from people where name like '%' + value + '%'
I have a simple grid with sorting on. I want to allow users to sort by any column, but at the same time I want one record to always display at last position (that record is recognized by ID). Is there a way to do this?
I'm using ExtJS 4.2.2.
I wouldn't keep a blank record for editing in the grid all the time. What I usually do is to provide the user a means to add record when he needs, let him to edit and save it.
You may have different requirements, anyway, you can see how this logic works here: Editable and Writable ExtJS Grid Example
This approach saves you from solving the sorting problem.
I have a table with many entries (4000 - 5000) with 5 columns. These are paginated and only about 20 rows are shown at a time although all data exists at the client side.
I want the user to filter different column by categories (and if possible using some wildcards), this user input will be taken using something like Form input. Note that i can perform all the operations using Javascript code, however i am unable to understand what kind of UI elements do i need to use for this purpose (I am not from a web dev. background but learning the tricks). I tried using libraries such as selectize, researched some Jquery UI plugins. In fact i also found a spreadsheet specific library (slickgrid.js) but it is slightly beyond my skill to implement.
So in essence is there a simple way to get user input to select categories in a column(s) with all data in client array ? I would love to reach a stage where i may be able to group column categories and use them to give autocomplete/ dropdown menus etc. However i am just trying to figure out a reliable way to translate user input to string to be used in code.
I have this Excel file with over 30 calculation, but i am having doubts about how to create that on the web.
In excel it is very easy, but on the web it must all be made in javascript, and it is not as easy as reference inputs as in excel where you can just say (C4 + C5 / E9 * 1000).
All the calculations has to be calculated in realtime, so that they can se the final price at the end, without submitting it first.
Since some of the inputs depend on others values, how I see it, the formular must be recalculated a lot of times.
Has anybody done something like this before, and did they do it? Right now I can not seem to find any good javascript libraries which can ease the process.
This is a neat grid plugin for jQuery which supports creating "Excel like" Grids on Webpages.
http://www.trirand.com/blog/
https://github.com/tonytomov/jqGrid
http://trirand.com/blog/jqgrid/jqgrid.html
Give each input an "id" attribute (will make the use of getElemetntById possible). Google for "javascript oninput event".
You want to take an Excel spreadsheet and translate that into javascript code that receives the input variables (the ones you have to fill in Excel) and outputs all of them?
The way to do this is describe each Excel cell as a node in a graph. If cell Y needs cell X to perform a computation, then you must have an edge from node X to node Y.
You must then find a topological ordering for the graph (that is, an order of the cells/nodes such that when you try to compute any cell D you have already computed all the cells it depends on). The algorithm to do this is simple and linear in the size of the graph: http://en.wikipedia.org/wiki/Topological_sorting
You can just write javascript code in sequence according to the topological order, and you'll be able to find all the results with having to visit any operation more than once.
There are several js libraries (AngularJS is one I enjoy) which offer real-time databinding. If you set up a few input text boxes (NumberA, NumberB), and have some read-only text areas databound to the formulas you need (NumberA + NumberB/10), you might be able to accomplish this without too much stress.
Of course, this assumes you need only one "row" of information- a recreation of Excel is going to be a mite trickier.