CN109032476B - Method for displaying big data set in graphical user interface - Google Patents
Method for displaying big data set in graphical user interface Download PDFInfo
- Publication number
- CN109032476B CN109032476B CN201810890050.XA CN201810890050A CN109032476B CN 109032476 B CN109032476 B CN 109032476B CN 201810890050 A CN201810890050 A CN 201810890050A CN 109032476 B CN109032476 B CN 109032476B
- Authority
- CN
- China
- Prior art keywords
- scroll
- canvas
- determining
- size
- user
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
The present invention discloses a method of displaying large data sets in a graphical user interface, the graphical interface being included in a computer system having a screen and having hardware configured to receive user input, the method comprising: creating a visualization that includes a control in a browser, wherein the control includes a canvas; determining the size of a canvas; performing visual display, and displaying a scroll bar in the visualization; receiving a user scroll input, determining whether the user scroll input represents a long scroll or a short scroll; when the scroll bar is in long scroll, calculating a scroll ratio from the position of a scroll bar sliding block; in calculating the scroll ratio, determining whether the scroll ratio is equal to 100%; upon determining that the scroll ratio is equal to 100%, populating a last page in the canvas with a last data block from the big data set; when the rolling proportion is determined to be less than 100%; and upon determining that the user scroll input represents a short scroll, populating the page in the canvas with a next data block from the large dataset.
Description
Technical Field
The invention relates to the technical field of big data, in particular to a method for displaying a big data set in a graphical user interface.
Background
Visualizations are software components (software components are also called controls or widgets) used in a GUI to display data, emphasizing certain aspects of the data and de-emphasizing others. Visualization allows data to be presented in a perspective that is meaningful to the user, whether these be a presenter or consumer of the data. In the case of "big data," the user may need to zoom in on a small portion of the data. The data may be presented in a data grid (spreadsheet, list, table) along rows, columns, pages and possibly other coordinates, or in an image along x and y pixel coordinates, in a gantt chart or other chart, in a graph, or in any other visualization format known in the art.
The visualizations may be pre-compiled as software components in a particular software development environment, or they may be generated on the fly, for example in a web page or other HTML related document, possibly using an interpreted language such as JavaScript.
When creating visualizations for large data, developers may encounter limitations presented by the target GUI. For example, it is impractical to display a complete spreadsheet of one million rows and one million columns on a computer display. For example, a spreadsheet will have one trillion cells, but modern 8K displays have only 7,680 x 4,320-33,177,600 pixels. For example, the spreadsheet problem per trillion rows and columns may get worse.
Visualization in Web browsers or multi-platform applications-typically implemented in HTML and JavaScript-encounters various limitations from the browser itself or the browser controls utilized, such as relating to the maximum canvas size of the display element, the maximum size of the integer used internally, or the maximum memory available. The scrolling functionality of HTML Document Object Model (DOM) elements provides further limitations.
To address this issue, developers rely on virtual browsing or virtualized canvas to display a subset of data. Some developers display a portion of the data series and retrieve more data as the user scrolls towards its end. However, these methods do not provide the user with a good ability to scroll or sufficiently mask them from the browser limitations problem described above.
Disclosure of Invention
The present invention proposes a method of displaying a large dataset in a graphical user interface, wherein the graphical interface is comprised in a computer system having a screen and has hardware configured for receiving user input, the method comprising:
creating a visualization that includes a control in a browser, wherein the control includes a canvas;
determining the size of a candidate canvas according to the size of the large data set;
determining a maximum canvas size supported by a browser;
adjusting the size of the canvas according to the size of the candidate canvas and the size of the maximum canvas;
populating at least one page in the canvas with initial data blocks from the big data set;
displaying a visualization on a computer screen and displaying a scroll bar in the visualization;
receiving a user scroll input, wherein the user scroll input may represent a long scroll or a short scroll;
determining whether the user scroll input represents a long scroll or a short scroll;
upon determining that the user scroll input represents a long scroll, calculating a scroll ratio from the scrollbar slider position;
in calculating the scroll ratio, determining whether the scroll ratio is equal to 100%;
upon determining that the scroll ratio is equal to 100%, populating a last page in the canvas with a last data block from the big data set;
upon determining that the scroll ratio is less than 100%, populating a page in the canvas with data blocks of the big data set location calculated from the size of the big data set multiplied by the scroll ratio; and
upon determining that the user scroll input represents a short scroll, the page in the canvas is populated with the next data block from the large dataset.
The method of (a), wherein determining the maximum canvas size comprises searching for a control that is continuously set in the browser in a series of test heights and widths, and checking whether the browser returns accurate values for the test heights and widths.
The method of (a), wherein determining the candidate canvas size comprises calculating a number of big data set rows times an average row height and a number of big data set columns times an average column width.
The method of (a), wherein determining the size of the canvas comprises determining the smaller of the maximum canvas size and the candidate canvas size.
The method of (a), wherein the initial data block is consistent with one or more adjacent data pages in the big data set.
The method further comprises adding a scroll event listener capable of receiving and acting upon user scroll input.
The method of (a), wherein the user scroll input indicates a short scroll if there is any rendering data at the resulting new layout position and indicates a long scroll if there is no rendering data at the resulting new layout position.
The method of (a), wherein the scrollbar slider resolution is at least 1000 times coarser than the resolution of the large dataset.
The method further includes discarding canvas page data that is no longer in the preload region of the canvas.
The method of (a), wherein the browser supports hypertext markup language (HTML).
The method of (a), wherein the control comprises an HTML document object model (HTML DOM) element.
Drawings
The invention will be further understood from the following description in conjunction with the accompanying drawings. The components in the figures are not necessarily to scale, emphasis instead being placed upon illustrating the principles of the embodiments. In the drawings, like reference numerals designate corresponding parts throughout the different views.
FIG. 1 is a schematic diagram of a method of displaying a large data set in a graphical user interface of the present invention.
Detailed Description
In order to make the objects, technical solutions and advantages of the present invention more apparent, the present invention is further described in detail below with reference to embodiments thereof; it should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention. Other systems, methods, and/or features of the present embodiments will become apparent to those skilled in the art upon review of the following detailed description. It is intended that all such additional systems, methods, features and advantages be included within this description, be within the scope of the invention, and be protected by the accompanying claims. Additional features of the disclosed embodiments are described in, and will be apparent from, the detailed description that follows.
The first embodiment is as follows:
as shown in fig. 1, a schematic diagram of a method for displaying a large data set in a graphical user interface of the present invention, wherein the graphical interface is included in a computer system having a screen and has hardware configured to receive user input, the method comprising:
creating a visualization that includes a control in a browser, wherein the control includes a canvas;
determining the size of a candidate canvas according to the size of the large data set;
determining a maximum canvas size supported by a browser;
adjusting the size of the canvas according to the size of the candidate canvas and the size of the maximum canvas;
populating at least one page in the canvas with initial data blocks from the big data set;
displaying a visualization on a computer screen and displaying a scroll bar in the visualization;
receiving a user scroll input, wherein the user scroll input may represent a long scroll or a short scroll;
determining whether the user scroll input represents a long scroll or a short scroll;
upon determining that the user scroll input represents a long scroll, calculating a scroll ratio from the scrollbar slider position;
in calculating the scroll ratio, determining whether the scroll ratio is equal to 100%;
upon determining that the scroll ratio is equal to 100%, populating a last page in the canvas with a last data block from the big data set;
upon determining that the scroll ratio is less than 100%, populating a page in the canvas with data blocks of the big data set location calculated from the size of the big data set multiplied by the scroll ratio; and
upon determining that the user scroll input represents a short scroll, the page in the canvas is populated with the next data block from the large dataset.
The method of (a), wherein determining the maximum canvas size comprises searching for a control that is continuously set in the browser in a series of test heights and widths, and checking whether the browser returns accurate values for the test heights and widths.
The method of (a), wherein determining the candidate canvas size comprises calculating a number of big data set rows times an average row height and a number of big data set columns times an average column width.
The method of (a), wherein determining the size of the canvas comprises determining the smaller of the maximum canvas size and the candidate canvas size.
The method of (a), wherein the initial data block is consistent with one or more adjacent data pages in the big data set.
The method further comprises adding a scroll event listener capable of receiving and acting upon user scroll input.
The method of (a), wherein the user scroll input indicates a short scroll if there is any rendering data at the resulting new layout position and indicates a long scroll if there is no rendering data at the resulting new layout position.
The method of (a), wherein the scrollbar slider resolution is at least 1000 times coarser than the resolution of the large dataset.
The method further comprises discarding canvas page data that is no longer in the preload region of the canvas.
The method of (a), wherein the browser supports hypertext markup language (HTML).
The method of (a), wherein the control comprises an HTML document object model (HTML DOM) element.
Example two:
a tangible, non-transitory computer-readable information storage medium comprising instructions adapted to instruct a computer to display a visualization in a graphical user interface in a browser on a computer screen, comprising:
creating a visualization that includes a control in a browser, wherein the control includes a canvas;
determining the size of a candidate canvas according to the size of the large data set;
determining a maximum canvas size supported by a browser;
adjusting the size of the canvas according to the size of the candidate canvas and the size of the maximum canvas;
populating at least one page in the canvas with an initial data block from the data set;
displaying a visualization on a computer screen and displaying a scroll bar in the visualization;
receiving a user scroll input, wherein the user scroll input may represent a long scroll or a short scroll;
determining whether the user scroll input represents a long scroll or a short scroll;
upon determining that the user scroll input represents a long scroll, calculating a scroll ratio from the scrollbar slider position;
in calculating the scroll ratio, determining whether the scroll ratio is equal to 100%;
upon determining that the scroll ratio is equal to 100%, populating a last page in the canvas with a last data block in the data set;
upon determining that the scroll ratio is less than 100%, populating a page in the canvas with data blocks of the data set locations calculated from the size of the data set multiplied by the scroll ratio; and
upon determining that the user scroll input represents a short scroll, the page in the canvas is populated with the next data block from the data set.
The storage medium of (a), wherein determining the maximum canvas size comprises searching for a control to be continuously set in the browser in a series of test heights and widths, and checking whether the browser returns accurate values for the test heights and widths.
The storage medium of claim, wherein determining the candidate canvas size comprises calculating a number of large data set rows times an average row height and a number of large data set columns times an average column width.
The storage medium of (a), wherein determining the size of the canvas comprises determining the lesser of the maximum canvas size and the candidate canvas size.
The storage medium of, wherein the initial data block is consistent with one or more adjacent data pages in the big data set.
The storage medium further comprises a scroll event monitor which can receive and act on scroll input of a user.
Example three:
a system for displaying large datasets in a graphical user interface, comprising:
a client computer including a graphical user interface in a browser;
a database storing large datasets; and
an application server connected to the database and the client computer via at least one network, wherein the application server is adapted to retrieve data from the database and to transmit the retrieved data to the client computer;
wherein the client computer includes a software program comprising instructions executable by the client computer to perform a method comprising:
creating a visualization that includes a control in a browser, wherein the control includes a canvas;
determining the size of a candidate canvas according to the size of the large data set;
determining a maximum canvas size supported by a browser;
adjusting the size of the canvas according to the size of the candidate canvas and the size of the maximum canvas;
populating at least one page in the canvas with initial data blocks from the big data set;
displaying a visualization on a client computer screen and displaying a scroll bar in the visualization;
receiving a user scroll input, wherein the user scroll input may represent a long scroll or a short scroll;
determining whether the user scroll input represents a long scroll or a short scroll;
upon determining that the user scroll input represents a long scroll, calculating a scroll ratio from the scrollbar slider position;
in calculating the scroll ratio, determining whether the scroll ratio is equal to 100%;
upon determining that the scroll ratio is equal to 100%, populating a last page in the canvas with a last data block from the big data set;
upon determining that the scroll ratio is less than 100%, populating a page in the canvas with data blocks of the big data set location calculated from the size of the big data set multiplied by the scroll ratio; and
upon determining that the user scroll input represents a short scroll, the page in the canvas is populated with the next data block from the large dataset.
The system of (a), wherein determining the maximum canvas size comprises searching for a control that is continuously set in the browser in a series of test heights and widths, and checking whether the browser returns accurate values for the test heights and widths.
The system of (a), wherein determining the candidate canvas size comprises calculating a number of big data set rows times an average row height and a number of big data set columns times an average column width.
The system of (a), wherein determining the size of the canvas comprises determining the smaller of the maximum canvas size and the candidate canvas size.
The system of (a), wherein the initial data block is consistent with one or more adjacent data pages in the big data set.
The method further comprises adding a scroll event listener capable of receiving and acting upon user scroll input.
Although the invention has been described above with reference to various embodiments, it should be understood that many changes and modifications may be made without departing from the scope of the invention. That is, the methods, systems or devices discussed above are examples. Various configurations may omit, substitute, or add various procedures or components as appropriate. For example, in alternative configurations, the methods may be performed in an order different than that described, and/or various stages may be added, omitted, and/or combined. Also, features described with respect to certain configurations may be combined in various other configurations. Different aspects and elements of the configuration may be combined in a similar manner. Furthermore, many of the elements that follow as technology develops are merely examples and do not limit the scope of the disclosure or claims.
Specific details are given in the description to provide a thorough understanding of the exemplary configurations including implementations. However, configurations may be practiced without these specific details, for example, well-known circuits, processes, algorithms, structures, and techniques have been shown without unnecessary detail in order to avoid obscuring the configurations. This description provides example configurations only, and does not limit the scope, applicability, or configuration of the claims. Rather, the foregoing description of the configurations will provide those skilled in the art with an enabling description for implementing the described techniques. Various changes may be made in the function and arrangement of elements without departing from the spirit or scope of the disclosure.
Further, although each operation may describe the operation as a sequential process, many of the operations can be performed in parallel or concurrently. In addition, the order of the operations may be rearranged. There may be other steps in a process. Furthermore, examples of the methods may be implemented by hardware, software, firmware, middleware, code, hardware description languages, or any combination thereof. When implemented in software, firmware, middleware or code, the program code or code segments to perform the necessary tasks may be stored in a non-transitory computer-readable medium such as a storage medium and the described tasks are performed by a processor.
It is intended that the foregoing detailed description be regarded as illustrative rather than limiting, and that it be understood that it is the following claims, including all equivalents, that are intended to define the spirit and scope of this invention. The above examples are to be construed as merely illustrative and not limitative of the remainder of the disclosure. After reading the description of the invention, the skilled person can make various changes or modifications to the invention, and these equivalent changes and modifications also fall into the scope of the invention defined by the claims.
Claims (6)
1. A method of displaying a large dataset in a graphical user interface included in a computer system having a screen and having hardware configured to receive user input, the method comprising: creating a visualization that includes a control in a browser; wherein the control comprises a canvas;
characterized in that the method further comprises
Determining the size of a candidate canvas according to the size of the large data set; determining a maximum canvas size supported by a browser; adjusting the size of the canvas according to the size of the candidate canvas and the size of the maximum canvas;
populating at least one page in the canvas with initial data blocks from the big data set; displaying a visualization on a computer screen and displaying a scroll bar in the visualization;
receiving a user scroll input, wherein the user scroll input may represent a long scroll or a short scroll; determining whether the user scroll input represents a long scroll or a short scroll;
upon determining that the user scroll input represents a long scroll, calculating a scroll ratio from the scrollbar slider position; in calculating the scroll ratio, determining whether the scroll ratio is equal to 100%; upon determining that the scroll ratio is equal to 100%, populating a last page in the canvas with a last data block from the big data set; upon determining that the scroll ratio is less than 100%, populating a page in the canvas with data blocks of the big data set location calculated from the size of the big data set multiplied by the scroll ratio; and upon determining that the user scroll input represents a short scroll, populating a page in the canvas with a next data block from the large dataset;
wherein determining the maximum canvas size comprises searching for controls that are continuously set in the browser in a series of test heights and widths, and checking whether the browser returns accurate values for the test heights and widths;
the initial data block is consistent with one or more adjacent data pages in the big data set; further comprising adding a scroll event listener capable of receiving and acting upon user scroll input, the user scroll input representing a short scroll if there is any rendering data at the resulting new layout position and representing a long scroll if there is no rendering data at the resulting new layout position.
2. The method of claim 1, wherein determining a candidate canvas size comprises calculating a number of large data set rows times an average row height and a number of large data set columns times an average column width.
3. The method of claim 1, wherein determining the size of the canvas comprises determining the smaller of the maximum canvas size and the candidate canvas size.
4. The method of claim 1, wherein the scrollbar slider resolution is at least 1000 times coarser than the resolution of the large dataset.
5. The method of claim 1, further comprising discarding canvas page data that is no longer in the preload region of the canvas.
6. The method of claim 1, wherein the browser supports hypertext markup language; the control includes an HTML document object model element.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810890050.XA CN109032476B (en) | 2018-08-07 | 2018-08-07 | Method for displaying big data set in graphical user interface |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201810890050.XA CN109032476B (en) | 2018-08-07 | 2018-08-07 | Method for displaying big data set in graphical user interface |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN109032476A CN109032476A (en) | 2018-12-18 |
| CN109032476B true CN109032476B (en) | 2021-08-27 |
Family
ID=64649057
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201810890050.XA Active CN109032476B (en) | 2018-08-07 | 2018-08-07 | Method for displaying big data set in graphical user interface |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN109032476B (en) |
Families Citing this family (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN112380821B (en) * | 2020-11-17 | 2024-05-28 | 北京字跳网络技术有限公司 | Graphic display method and device and electronic equipment |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN106570142A (en) * | 2016-11-04 | 2017-04-19 | 北京神州绿盟信息安全科技股份有限公司 | Data rendering method and device |
| CN107102855A (en) * | 2017-04-11 | 2017-08-29 | 福建中金在线信息科技有限公司 | A kind of content loading method and device |
| CN107368295A (en) * | 2017-06-07 | 2017-11-21 | 努比亚技术有限公司 | A kind of terminal wallpaper generation method, terminal and computer-readable recording medium |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10635286B2 (en) * | 2016-10-23 | 2020-04-28 | Oracle International Corporation | Visualizations supporting unlimited rows and columns |
-
2018
- 2018-08-07 CN CN201810890050.XA patent/CN109032476B/en active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103399866A (en) * | 2013-07-05 | 2013-11-20 | 北京小米科技有限责任公司 | Webpage rendering method, device and equipment |
| CN106570142A (en) * | 2016-11-04 | 2017-04-19 | 北京神州绿盟信息安全科技股份有限公司 | Data rendering method and device |
| CN107102855A (en) * | 2017-04-11 | 2017-08-29 | 福建中金在线信息科技有限公司 | A kind of content loading method and device |
| CN107368295A (en) * | 2017-06-07 | 2017-11-21 | 努比亚技术有限公司 | A kind of terminal wallpaper generation method, terminal and computer-readable recording medium |
Also Published As
| Publication number | Publication date |
|---|---|
| CN109032476A (en) | 2018-12-18 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US9043698B2 (en) | Method for users to create and edit web page layouts | |
| US10642471B2 (en) | Dual timeline | |
| CN106155654B (en) | Method and device for shielding webpage operation and electronic equipment | |
| CN113536173B (en) | Page processing method and device, electronic equipment and readable storage medium | |
| CN103336787B (en) | A kind of method and apparatus for scaling webpage | |
| CN103631474A (en) | System and method for controlling graph moving | |
| CN112667330A (en) | Page display method and computer equipment | |
| CN106648571B (en) | Method and device for calibrating application interface | |
| CN112464121A (en) | Data loading method and device, computer equipment and storage medium | |
| JP6395160B2 (en) | Document layout of electronic display | |
| US10437452B2 (en) | Information processing apparatus for displaying content on a screen of a display device | |
| CN113204401B (en) | Browser rendering method, terminal and storage medium | |
| US10635286B2 (en) | Visualizations supporting unlimited rows and columns | |
| CN109032476B (en) | Method for displaying big data set in graphical user interface | |
| US20170270218A1 (en) | Mapping of Defined Regions Within a Webpage | |
| EP3043251A1 (en) | Method of displaying content and electronic device implementing same | |
| US20160209988A1 (en) | Information Input Device, Control Method and Storage Medium | |
| US20150154160A1 (en) | System and method for displaying image on webpage according to visible area | |
| CN113742612A (en) | Data rendering method and device, electronic equipment and storage medium | |
| CN111522610A (en) | Information display method, device and equipment | |
| CN111143635A (en) | Method for displaying big data set in graphical user interface | |
| CN113096217B (en) | Picture generation method and device, electronic equipment and storage medium | |
| CN111222302A (en) | Webpage rendering control method, control device and computer readable medium | |
| CN114117274A (en) | Data rendering method and device, computer equipment and storage medium | |
| CN110515618B (en) | Page information input optimization method, equipment, storage medium and device |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| TA01 | Transfer of patent application right | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20210809 Address after: No.2688 Xiyuan Avenue, modern industrial port (south area), Pidu District, Chengdu, Sichuan 610000 Applicant after: AOSTAR INFORMATION TECHNOLOGIES Co.,Ltd. Address before: Room 501, block a, building 3, service outsourcing base, new Changhai center, 29 Bancang South Road, Changsha Economic and Technological Development Zone, Changsha City, Hunan Province, 410100 Applicant before: CHANGSHA TUOPU LUCHUAN NEW MATERIAL TECHNOLOGY Co.,Ltd. |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |