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.


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"}]

Skills: JavaScript, HTML, HTML5, CSS

See more: create html page embedded video flash, create html page mysql coldfusion, using microsoft access reports create html page, chart.js examples, chart js update data example, chartjs data format, google charts, chart.js data from database, create graph in html code example, chart.js data from json file, canvas js, coldfusion create html page, virtuemart create html form based payment module, create html page indesign, create html page illustrator, class create html page, create html page photoshop file, create html page photoshop, create html page imageready, can create html page oscommerce

About the Employer:
( 8 reviews ) São Carlos, Brazil

Project ID: #26541550

Awarded to:


Hello sir. I am interested in your post. I am applying with experiences similar with your project in previous projects. [login to view URL] [login to view URL] More

$20 USD in 7 days
(3 Reviews)

6 freelancers are bidding on average $45 for this job


Hi there I can use the attached json file to create the charts page with chartjs Thanks so much Ngan L

$100 USD in 3 days
(450 Reviews)

Hi I have just checked this job carefully Your job description is very careful, I think That's Okay I can help you I'd like to discuss this project in more details over chat. Please contact me I am always online.

$50 USD in 1 day
(7 Reviews)

****javascript chart expert.*** Hi, i can start just now i have a creative and professional full-stack developer team having more than 5+ years of professional experience as a senior developer in this field. Our main a More

$20 USD in 2 days
(5 Reviews)

Hi! I am happy to put my bid on your project. I have read your requirement carefully and I am confident in this project. I am a skillful and experienced web developer, I have a tons of experience with PHP /MySQL / Mar More

$50 USD in 1 day
(2 Reviews)

Dear Client, I am a senior web developer and have much interest in your project. So I think that I can finish your work perfectly as you need.I have many experiences for Json, HTML5, CSS3, Angular, Vue.js, Jquery, Aja More

$30 USD in 1 day
(0 Reviews)