Displaying Form Data as a visual chart

This topic has 3 replies, 2 voices, and was last updated 6 years, 1 month ago by @mindspark.

Viewing 4 posts - 1 through 4 (of 4 total)

Author

Posts
November 25, 2018 at 4:14 AM #12232

@mindspark
Participant

Hi Anh!

I just submitted another question about performing calculations using form data and then displaying the results in numerical format. This question is an extension of that previous thread.

I'm building a complex CPT that uses several different custom fields to collect data. The goal is to take the collected data and then generate a nice and well-organized file, and part of the output will also be financial information.

So, not only do I need to perform calculations, but I would also like to display certain data in a visual manner - like graphs and charts.

I'm expecting you to tell me that I will need to use a third party solution for this, but I'm hoping you might help me by pointing me in a direction with something that you know will integrate with MB?

Add New Note to this Reply

November 27, 2018 at 7:14 AM #12268

@mindspark
Participant

any updates here?

Add New Note to this Reply

November 27, 2018 at 2:12 PM #12287
Anh Tran
Keymaster
Hi Neil,

As I answer in the other topic, showing the value of custom fields in a different way need some coding. In this case, you want to display in a chart or graph, then the steps will be:
- Download a chart/graph library required CSS/JS. Depends on which library you use, the files are different.
- Enqueue a chart/graph library's JS/CSS. This can be done in the theme with wp_enqueue_script and wp_enqueue_style.
- Get the field values (via helper functions).
- Output the values in the format required by the chart/graph library. If they required the data in JavaScript, you need to use wp_localize_script to enqueue the data.
- Write some custom JS to initialize the graph/chart.
That might sound complicated, but the whole process is just trying to pass the data of custom fields to the JS of the library. Depends on which library you use, the code might be different.

Add New Note to this Reply
November 28, 2018 at 4:44 AM #12305

@mindspark
Participant

Thanks Anh!

Add New Note to this Reply
Author

Posts

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.