Display Static Data from mongoDb on webpage

Data will be provided by a MongoDB database called myDB and a collection called theCol. Five fields will be provided: “theDate”, “river”, “up”, “dn”, and “dir”. Additionally, an image file will be provided to be displayed on the page which will be labeled according to the date it corresponds to. The date format will be ‘yyyy-mm-dd’. To generate the charts seen above, note that for each river“up” and “dn” will both be between 0 and 1 and “up” and “dn” will sum to 1. That is, up + dn = 1 where 0 <= up <= 1 and 0 <= dn <= 1. Then, the green region above represents “up” as a fraction of 1 and the red region above represents “dn” as a fraction of 1. For example, if “up” is 0.8, then 80% of the bar will green and 20% of the bar will be red. The user should be able to specify up to 5 tickers that they want to display in the top left portion of the screen under the heading “Following”. The top left portion of the page will allow the user tab between selecting tickers to follow and displaying the barcharts for the selected tickers. The bottom left portion will display the normalized bar charts for the rivers with the five highest values of “up” for the given date under the heading “Top 5 Probability Up”. Similarly, the bottom right portion of the page will display the normalized bar charts for the river with the five highest values of “dn” for the given date under the heading “Top 5 Probability Down”. The top right portion of the page will display the supplied image file in the following name format yyyymmdd_FA.jpg. Please refer to attached document for further details of the graphics