Creative ideas for display large amount of text on web page - javascript

I have a 2 column table in a database 1,000 rows long(All integer data).
The display will allow for the user to delete a certain range of data from the table.
What I am looking for is a creative way to display all the data so the user can get to different parts of it really fast. Maybe displaying different chunks at once, represent with bar graphs or zooming the scope in/out would be really cool.
Any ideas,suggestions, examples at all are appreciated. Please just throw them out here for brainstorming.
Note: I am limited to JS, xml, html and C
Thanks!

By mouse scroll resize the text.
Add drag'n'drop for moving text block.
Example: user resizes it to a smaller chunk by mouse weal then moves it by using drag'n'drop.
It is possible to implement such thing with jQuery/JavaScript

Use a double slider with a min and max display range. Here is an example of one based on MooTools. Moving the slider controls will adjust which range of values are displayed in the table.

Could implement something that functions like google maps where you can easily zoom in and out and set points wherever you need that stay when you change elevation.

you can format the html with <h1>, <h2>, <h3> and <p> tags, and use jquery to collapse the paragraphs, leaving headings of major sections.
I did this with documentation i was working on and it worked out great.

I'm a fan of the JavaScript bookmarklet demoed in this video: http://www.youtube.com/watch?v=GPZ8YNgyl_I
The bookmarklet itself is available here: http://t_trace.wed.macserver.jp/overview.html

If you have used WinMerge, you could develop something like the location pane in the left that shows a full preview of the changes in files. It can be used to navigate very fast
Here's a screenshot. (Image too large to inline it here)

Assuming the integer data come in ranges, a common approach is to show how much data there is in each range as a horizontal bar. You click the range to zoom in, until you see the actual data, or click the X to delete.
ID Range
[X] 1-1000 xxxxxxxxxxxxxxxxxxxxx
[X] 1001-2000 xxxxxxxxx
[X] 2001-3000 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
A further refinement is to use colour on the horizontal bars to show data density. For instance red = lots of data, yellow = less

Related

Calculating width and height of an element to be on one screen, unknown number of elements

I have project where I would like to display sensor readings from the building. It contains temperature, date and name of the room. It is in one small simple square.
I would like it to be displayed on the TV monitor( I am unaware of what the resolution will be, but that can be calculated with JS).
Problem is, I don't know how many readings there are going to be and I need to show them all on the screen(Since it is going to be on monitor without possibility to scroll). I don't know how to calculate their dimension so they would fit. I didn't find any miraculous css property for this so I am fine with creating some JS function. However, I don't have an idea where to start. I would know the number of sensors and resolution, that is all. This number of readings will change over time though.
Any JS libraries that could do this? If none, what function should I write?
Edit: Touffy's solution works great! I found this article for others in needs: Dynamic number of rows and columns with CSS Grid Layout and CSS variables
You can probably decide which browser will be used for this sort of application, so you can pick one that supports CSS Grid Layout. With that, you can do what you want without any JavaScript by specifying the grid container to take the whole viewport (100vh and 100vw), and letting it arrange the grid items with the constraints you like (number of columns, spacing…).

Small HighCharts disappear

I want this highchart - http://jsfiddle.net/zPDca/ inside a popup. But if i decrease its width to lets say to 200 px, it dissapers. Any suggestions!
It looks like 251 px is the lower limit for the width.
This was probably a decision the developers made due to readability. Think about it:
This is a stock chart and it contains the "detail" view and a navigator view, you have export enabled and by default you are showing the buttons, the default selection buttons for zooming are also shown. Wouldn't this be really crowded for the user? Why not use a different kind of chart (standard highchart maybe) that shows latest data and gives user option to expand view. This would save a lot of space in the view.
Things you can try:
Remove the export buttons (you can write your own extension to still do exporting without useing the built-in buttons)
Remove the "Zoom" text
Change chart to be less "busy" overall
Having a data visualization is all about quickly seeing the data you need - not necessarily seeing all the options you may need in a tight space. If this chart is to be used for continuous monitoring you can strip it of all option settings but have it use the options set by the user in a "primary/setup" chart.
Look this example http://jsfiddle.net/zPDca/1/
It's working well.
If you take a look the reference you can see that it can be calculated by the containing element. So you just have to remove width from your chart as you can see on my example.
Okay I got the answer. Versions higher than 1.1.5 do not allow charts smaller than certain dimension. I do not know why. But I'm detouring right now by using version 1.1.5.

How do I access separate points/sections on a single image in html/javascript?

I am learning to develop mobile applications, quite in the initial phase.
This query is not related to mobile but more to html/css/js.(for
I intend to make a simple game, where a picture is seen, a few options are available and the user can drag and drop these options onto the image.
eg. There is an image of a plant > options are #leaf #stem #flower #bud
The user must drag and drop the correct option to the correct place on the image to get points. i.e Drag the #leaf option onto the leaf of the plant.
Now my problem is the image, the separation of these points, I can't figure out how to do it.
Query in short: How do I access separate points/sections on a single image in html/js for above purpose?
Query (longer version)
I did a little search and realised I can slice the image and recreate it using multiple images, I tried this, it sort of works but it has a a lot of drawbacks:
1)More images mean more space, combined size of the split images was about 1.5x the original image(this is just splitting it into 4 images)
2)For a complex picture, the number of images to slice into is large and hard to manage in css(n00b==me) as they don't just need to be split into a simple X*Y grid but a much more complex split depending on the object in the image.(realised when I was trying to do a simple cell structure img)
3)More images also means more http requests(in case the app is WebView based) which will increase loading time.
It just seemed liked too much of a hassle, there must be a better way.
Then I saw css sprites , I dont need to combine my images like sprites are intended for, rather the reverse. Just access parts of my pre-existing image, as separate objects.I haven't tried this(working on it) and and I haven't seen this being done either, or maybe its being done and I'm not seeing.
Please help guys, my problem is quite simple(I think) , I think I'm just not getting the correct google search terms.
If anybody has any ideas,links, resources and also any clarifications as I may not have put up my problem as clearly as I'd like to, please do reply.
regards,
Rahul Agarwal
You could try to place transparent divs over the main image using absolute position and fixed dimensions. Those divs will be assosiated to the possible options, and when a user drops an option over some specific div, you'll know what points to give.
Little demo using two divs and an animated scaling to show that the positioned divs will scale according to their parent:
http://jsfiddle.net/VK3A8/
fiddel with image:
http://jsfiddle.net/8qLFc/4/

Javascript/jQuery legend widget

Is there a JS/jQuery widget that would allow me to display a simple legend that contains for example a small colored rectanlge and a text label next to it?
In this specific case the legend would show meanings behind different color codes in an inline jQuery UI datepicker widget, which would be customized to enable multiple selections by a user and showing different colors for specific days.
In fact, the thing that I need would look exactly like the list of SO sites at the footer of this page (but ideally listed vertically next to the picker). So if there is no ready-made solution I guess I'll try and look at this page source.
You have to hand it to the StackOverflow crew. Their method for creating the legends is pretty clever. Basically, they use the character ■ (ASCII 254) in place of any image or div. They insert it in a span, which is styled with a font size and color property. Next to it is a styled anchor tag. Rinse and repeat.
What is particularly clever about it is that it all fits inline in a div and lines up on the baseline! Let me say that again: it lines up on the baseline! So there is no disparity in image offsets, etc. A tip of the hat to the UI engineer who made it that simple. Thanks for calling my attention to that, or I probably never would have looked and learned.
EDIT: ASCII 254 is incorrect. The actual value yielded by "■".charCodeAt(0) is 9632 and is probably some flavor of Unicode. Same look and shape, but different value.

Paging Alternatives

I'm working on a project that returns paged results with volumes potentially in the hundreds of pages. I've been playing around with more usable ways to perform paging than the standard fisrt/last/next/previous links and jump-to text box. One alternative I had was to have a scrolling list of pages. I'd display 5 to 7 links at a time, centered around the current page, but add onhover actions to buttons on either side to scroll through the numbered list. This allows users to jump way ahead in the page count if they like without the combersome "Jump to" textbox. Does anyone have any better ideas?
If not, I'm trying to decide on a way to implement the above functionality, but I'm not sure how to display only a section of a div (with the div being the full list of links.) Any ideas?
You might find Endless Pageless an interesting read.
Depending on the data you can categorize it different ways and display an index. Pages is one way. Calendar is another, etc..
basically Master/Detail view.
Another option is to use a slider control that displays the current page (and/or record range) numbers in a caption bubble.
You could use a dropdown list containing page numbers.

Categories