Title: Data to Html canvas
Last modified: March 20, 2018

---

# Data to Html canvas

 *  Resolved [jlou](https://wordpress.org/support/users/jlou/)
 * (@jlou)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/data-to-html/)
 * Hi
 * First of all many thanks for this great plugin!
 * My question is: Is it possible to create simple graphics (grid, rectangle and
   lines) using information from a form? If yes how?
 * Thanks
    -  This topic was modified 8 years, 2 months ago by [jlou](https://wordpress.org/support/users/jlou/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/data-to-html/#post-10096041)
 * Hello [@jlou](https://wordpress.org/support/users/jlou/),
 * The “Calculated Fields Form” plugin does not include a chart module, however,
   you can install another of our plugin: “CP Blocks” ([https://wordpress.org/plugins/cp-blocks/](https://wordpress.org/plugins/cp-blocks/)).
   This plugin includes complementary blocks of code you can use with the forms 
   created with the “Calculated Fields Form”, the “Contact Form 7” plugin or directly
   into the content of posts and pages. Some of blocks are free and other should
   be installed with a paid license. The “CP Blocks” plugin includes a Bar Chart
   block, a Pie Chart and a Bubble Chart.
 * However, if you are a javascript programmer you can extend the forms created 
   with the “Calculated Fields Form” entering `<script></script>` tags into the 
   content of “HTML Content” fields.
 * Best regards.
 *  Thread Starter [jlou](https://wordpress.org/support/users/jlou/)
 * (@jlou)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/data-to-html/#post-10096294)
 * Thanks for your prompt response.
    I am in fact creating a calculator for page
   layout. For example, the user will input his desired page width and then will
   choose a page ratio (i.e. 1:2), the form will return the height depending on 
   ratio chosen. And there will be a preview — a rectangle of proportion 1:2 will
   be displayed somewhere on my page (i.e. In the sidebar). Hope my explanation 
   is clear.
    -  This reply was modified 8 years, 2 months ago by [jlou](https://wordpress.org/support/users/jlou/).
    -  This reply was modified 8 years, 2 months ago by [jlou](https://wordpress.org/support/users/jlou/).
    -  This reply was modified 8 years, 2 months ago by [jlou](https://wordpress.org/support/users/jlou/).
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [8 years, 2 months ago](https://wordpress.org/support/topic/data-to-html/#post-10096441)
 * Hello [@jlou](https://wordpress.org/support/users/jlou/),
 * In this case the process is very simple, for example, assuming the number field
   for entering the width is the fieldname1, and there is a dropdown field (fieldname2)
   whose choices are for example:
 * – Text of first choice 1:2, value 2
    – Text of the second choice 1:3, value 3–
   Text of the third choice 2:3, value 1.5
 * The fields’ names, and the choices’ texts and values are hypothetical, only to
   describe the process.
 * The equation associated to the calculated field to estimate the height would 
   be simple:
 *     ```
       fieldname1*fieldname2
       ```
   
 * and that’s all.
 * Print the rectangle is very simple too. If you insert a Div field with a specific
   width and an unique id assigned in your webpage (where you want), for example:
   my-preview
 *     ```
       <div id="my-preview" style="width:150px;border:1px solid #333"></div>
       ```
   
 * The equation would be then:
 *     ```
       (function(){
       jQuery('[id="my-preview"]').height(150*fieldname2);
       return fieldname1*fieldname2;
       })()
       ```
   
 * I’m sorry, but the support service does not cover the implementation of the users’
   projects (forms or formulas). If you need additional support implementing your
   project I can offer you a custom coding service from my private website:
 * [https://cff.dwbooster.com/customization](https://cff.dwbooster.com/customization)
 * Best regards.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Data to Html canvas’ is closed to new replies.

 * ![](https://ps.w.org/calculated-fields-form/assets/icon-256x256.jpg?rev=1734377)
 * [Calculated Fields Form](https://wordpress.org/plugins/calculated-fields-form/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/calculated-fields-form/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/calculated-fields-form/)
 * [Active Topics](https://wordpress.org/support/plugin/calculated-fields-form/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/calculated-fields-form/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/calculated-fields-form/reviews/)

## Tags

 * [drawing](https://wordpress.org/support/topic-tag/drawing/)
 * [graphics](https://wordpress.org/support/topic-tag/graphics/)

 * 3 replies
 * 2 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [8 years, 2 months ago](https://wordpress.org/support/topic/data-to-html/#post-10096441)
 * Status: resolved