create a html page based on json data, that produces tables and ChartJS graphs

Create an html page using javascript and chartJS that receive a json file, be capable to produce 3 graphs for type one and type two and two tables.

Graphs:

The following graphs are one for the payment type 1 and other for the payment type 2. It is provided by the field tipo on json file that can be 1 or 2.

1 -> General Bar chart,

orderer by the payment data (json data_pagamento), create a bar chart, where the x file caption index for each bar is the content of json field endereco. The bar value or size is the json field valor divided by 100. The color of each bar is give by the field data_pagamento and the field pagamento_realizado. The field data_pagamento provide a date in format yyyy-mm-dd. If the current date is greater than data_pagamento and the field pagamento_realizado=0, the color is red. When the field pagamento_realizado=1 the color is green. The color is blue when pagamento_realizado=0 and data_pagamento is greater then current date.

2-> Pie Chart

Blue for the enters that have the pagamento_realizado=0 and data_pagamento is greater then current date.

Green for the json lines that the field pagamento_realizado=1.

Red for the json lines that current date is greater than data_pagamento and the field pagamento_realizado=0.

3-> Point Data (line with data point)

blue line:

A graph with the days of the the month in the x axis (each month has a specific number of days, like 31 for January, 30 for April and so on) and amount of money in the y axis. The graph is accumulative, the value given by field valor divided by 100, have to be entered its correspondent date (given by data_vencimento field).

gray line: Same as blue line, but the value is just added when pagamento_realizado=1 and related to the date in the field data_pagamento.

Table 1-

The table must show all the lines in the json. In a format that will be informed.

There is one table for type 1 and other for type 2 (same as the graphs given by field tipo).

Table 2-

Summarize the values of json files, have to contain:

Total expected to be received in the month:

Total received until now:

Total not payed:

Total to be paid:

There is one table for type 1 and other for type 2 (same as the graphs given by field tipo).

json file example :

[{"id":"162","id_imovel":"2","tipo":"1","valor":"148600","data_vencimento":"2020-06-25","data_pagamento":"2020-06-25","pagamento_realizado":"1","pagamento_notificado":"1","endereco":"John Rederf 78"}]

JavaScript HTML HTML5 CSS

Ταυτότητα Εργασίας: #26541550

Σχετικά με την εργασία