JS Charts and html table overlapping - javascript

using JS charts:
http://www.jscharts.com/
This is the example, of what I am talking about, chart is overlapping table
http://char.web44.net/
I think it has something to do with layout, any suggestions how to fix it?

There is a margin-top of -321px on a div (the jscharts logo) inside of div#graph and it's pulling the content after #graph. You need to set a height on the #graph div, then everything will be pushed down correctly.

Related

Data Labels are getting cut off on the top

Datalabels on the top bars in chart are getting cut off. Could you please provide me some suggestions
It looks like not the issue of chart.js but of the parent div mainly. You are crashing the divs of the container. Try resizing it

How to make TradingView chart show all points without having to scroll?

in this page https://ticr.live/ticker-demo.php
i am showing the data generated roughly in the last 15mins, in a TradingView chart widget.
I wish that all points are visible inside the chart, without the need to scroll the chart left horizontally to see the past values, in case there are many points.
So the whole chart should "fit" exactly the container div.
How is this achieved?
Thanks
Yes, you can fit all your data inside the chart by calling chart.timeScale().fitContent() method.

Radar doesn't fit the div properly, cutting off some of the contents. How can I fix it?

I am using amcharts and I have a grid layout on my page to store 3 elements: List, map and radar chart.
The radar chart doesn't display properly for some reason. It doesn't matter what dimensions and sizes I give to the parent div, it doesn't display the radar with all the labels. It always cuts off some of them.
I couldn't find anything about it in documentation or in here. Here are the results of my stylings: first, second third.
After unsuccessful attempts at altering CSS, I fixed it by adding a title of the chart at the top and label with opacity 0 at the bottom using charts prototypes in JS. I couldn't find any solution in documentation, but to set fixed maxHeight of the radar in pixels. The solution with pixels wouldn't work well with CSS-Grid.
fixed container

Large contents within container size

I went through many posts and couldn't find a solution. (I came across with a similar problem in this post, but I can't really related to my exact situation).
Issue: I have to display a large data table (with more than 30 columns) on a screen. My challenge is - the client doesn't like Horizontal scroll bar of any mean.
I am thinking of splitting a table into pieces and using a simple sliders like Jquery: "serialScroll" or "ContentSlider". However, here is another challenge: for 508 compliance, my table needs to be a single table instead of splitting multiple table in different slides.
I am visioning I need a "view finder" div on top of "large table" with control to shift table the size of div Left and Right, http://img202.imageshack.us/i/tableviewfinderidea.jpg/.
My question is:
Is there a JS or Jquery solution out there doing this? (I seriously searched two weeks without any luck.)
Is there any other recommendation?
using a container div styled with 'overflow:hidden' allows you to do the masking as shown in your graphic. then it's easy to move the masked content by setting it to 'position:absolute' and tweaking the 'left' value.
i put a short example of this online at http://jsfiddle.net/BDZPj/
only thing is, you have to know the height of the content being scrolled, as you have to set a height for the mask too. you could read the height from the table on document.ready though, and apply it to the container initially.
anyway, like 'Pointy' says in the comment above, using a standard scrollbar is surely the best way to do it - sometimes the client has to move, too.

Trouble with a grid alignment

Seems like a simple thing at first, but becoming a bit more complex than I thought. I'm working on a simple portfolio site which I'm doing as one page with jquery to make it look like a full website. Currently my plan has been to have each piece of a content in its own div. I'll have the content, above, on either side and on the bottom. I specifically want to achieve this effect. How can I align these things so that there's a block of text to each of these directions, all aligned and in such a way that if there's window resizing the whole thing doesn't look broken?
I'm not able to imagine what you are looking for. It would help if you post a sample code or a image of what you are looking for. But you could try style="float:left;width:100px" for the DIV tags. All div tags will appear stacked next to each other.
Also ensure you put these child DIV tags in a parent DIV tag with style="overflow:auto"
I do not know what do you mean, but i think you can look for a css floating grid system.
Here for a starting point: CSS: Fun With Floating in the Grid
Search for a grid system and look at the css definitions.

Categories

Resources