-4

I need to build an UI (HTML 5) with two main components: customized chart drawn in HTML 5 canvas; a table.

The gotcha is that the chart must be aligned with the table. If you horizontally scroll the table, the chart content will scroll too.

enter image description here

One important restriction is that the chart is very customized. I will not be able to use any existing chart component. I will have to code it myself plotting it on canvas.

I am struggling to figure out how to do it. How to trigger a repaint on the canvas during the scroll? How to know the corresponding coordinates on the canvas of the beginning of each table cell? How do I write the HTML/CSS of both components to ensure that the layout will not break on different screen sizes?

I am still planning the project and I am pretty open to use any framework/language.

I need some light here.

Can you help?

Thanks!

Chocksmith
  • 1,188
  • 2
  • 12
  • 40
  • if you use jquery try this https://github.com/flot/flot for the scrolling part it's easy just use `overflow-x: scroll` for the canvas container. – evgeni fotia Jan 28 '19 at 13:08
  • https://stackoverflow.com/questions/36219632/html5-canvas-scrolling-vertically-and-horizontally – Kaiido Jan 28 '19 at 14:21
  • Thanks for your comment, but you guys missed the point. The idea is not to scroll the canvas. The problem is how to paint the canvas synchronized with a scrolled html table. The user will scroll the table below and the canvas must be repaint accordingly. – Chocksmith Jan 28 '19 at 16:02
  • Check the Q/A I linked to, one of the approach there is to repaint the canvas as if it were scrolled, even though it is not. – Kaiido Jan 29 '19 at 04:46

1 Answers1

0

You can get the scroll position with jQuery scrollLeft() and set your canvas repaint function to jquery scroll() so that it's updated whenever the scroll position changes.

table = $('#container')

updatePosition = () => {
  // Synchronize canvas here:
  repaintCanvas(table.scrollLeft());
}

table.scroll(updatePosition);

Here is a demo JSFiddle: http://jsfiddle.net/4eg39bfm/5/

JasonR
  • 401
  • 3
  • 11