I would like to build a view layout that that breaks the screen into (3) vertical divisions.
- Top-most region to display a chart for a selected subject (35%)
- Middle region to display a slidebox for users to select subjects (15%)
- Bottom region to display a scrollable list of notes related to selected subject (50%)
I have been struggling with the layout and really need some help to get things setup. I am using Chart.js for the data presentation in a donut/pie chart. I have a codepen setup now w/ some dummy data. I just use a modulo on t he index to bounce between (2) datasets. In practice, the data would come from a service and be tied to the subject index selected in the slidebox. Help from any CSS/layout gurus or anyone that has monkeyed around w/ the Chart.js module would be greatly appreciated.
link to the code pen: http://codepen.io/jeffleus/pen/WbXEgy
on a side note, there is something wrong w/ the slidebox in my codepen and it doesn’t want to slide on click/drag so I put buttons in the header connected to the delegate to allow advancing the slides.