Title: JavaScript Implementation
Last modified: August 31, 2016

---

# JavaScript Implementation

 *  Resolved [dulicanazi](https://wordpress.org/support/users/dulicanazi/)
 * (@dulicanazi)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-implementation/)
 * Hello i am looking to create a form with a calculate button and after the calculate
   button was press i want the form to display a chart using a code like this:
 *     ```
       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <script type="text/javascript">
       ....
       ....
       </script>
       ```
   
 * I already try this using HTML content but it’s not working.
    Also i am looking
   to know how can i grab a field value and put it in the Script code. Thanks … 
   i hope this can be done with calculated fields form
 * [https://wordpress.org/plugins/calculated-fields-form/](https://wordpress.org/plugins/calculated-fields-form/)

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

 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-implementation/#post-7048845)
 * Hi,
 * The code you are referring is not a visual element, the correct would be:
 * 1. Insert a “HTML Content” with your code, but pay attention, you should define
   a new javascript function, that will be called from the onclick event of the 
   button:
 *     ```
       <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
       <script type="text/javascript">
       function your_function(){
       }
       </script>
       ```
   
 * 2. and then call the new function from the onclick event of the button:
 * `your_function();`
 * and that’s all.
    Best regards.
 *  Thread Starter [dulicanazi](https://wordpress.org/support/users/dulicanazi/)
 * (@dulicanazi)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/javascript-implementation/#post-7048853)
 * thanks it’s working you are great !!
 *  [malpica](https://wordpress.org/support/users/malpica/)
 * (@malpica)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/javascript-implementation/#post-8918949)
 * How can I use fieldname1 or fieldname2 with this function.? I need use this fields
   to show a chart
 * thanks
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [9 years, 2 months ago](https://wordpress.org/support/topic/javascript-implementation/#post-8919478)
 * Hello,
 * If you want get the values of the fields: fieldname1, and fieldname2, into a 
   function that is not part of an equation associated to a calculated field, you
   should use the piece of code:
 * `var v1 = jQuery('[id*="fieldname1_"]').val(), v2 = jQuery('[id*="fieldname2_"]').
   val();`
 * Now the javascript variables v1 and v2 contain the values of the fields: fieldname1,
   and fieldname2 respectively, and you can use them in the function.
 * Best regards.
 *  [malpica](https://wordpress.org/support/users/malpica/)
 * (@malpica)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/javascript-implementation/#post-8931110)
 * I have inserted this code into html field, but don’t display chart. Where is 
   the wrong?
 * <script type=”text/javascript” src=”[https://www.gstatic.com/charts/loader.js”></script&gt](https://www.gstatic.com/charts/loader.js”></script&gt);
 * <script type=”text/javascript”>
    function your_function(){
 * google.charts.load(‘current’, {‘packages’ : [‘corechart’]});
 * google.charts.setOnLoadCallback(drawchart);
 * function drawchart () {
 * var data = new google.visualization.DataTable();
 * var v1= jQuery(‘[id*=”fieldname1_”]’).val();
    var v2= jQuery(‘[id*=”fieldname2_”]’).
   val(); var v3= jQuery(‘[id*=”fieldname3_”]’).val();
 * data.addColumn (‘string’, ‘Topping’);
    data.addColumn(‘number’, ‘Slices’); data.
   addRows ([
 * [‘Mushrooms’, ‘v1’],
    [‘Onions’, ‘v2’], [‘Olives’, ‘v3’], [‘Zucchini’, 1] ]);
 * var options= {‘title’ : ‘How much pizza’,
    ‘width’:400, ‘height’:300 };
 * var chart= new google.visualization.PieChart(document.getElementById(‘chart_div’));
   
   chart.draw(data, options);
 * }
    } </script>
 * <div id=”chart_div” style=”width:400; height:300″></div>
 *  Plugin Author [codepeople](https://wordpress.org/support/users/codepeople/)
 * (@codepeople)
 * [9 years, 1 month ago](https://wordpress.org/support/topic/javascript-implementation/#post-8931201)
 * Hello,
 * In reality how to use Google Charts Api is not part of our plugin, and I cannot
   offer you support for the Google products, so, I recommend you read the Api documentation.
 * However, I will give you some tips about errors that are very evidents in your
   code,
 * First, if you are using the variables: v1, v2, and v3 to define the chart rows,
   don’t close them between single quotes, or they will be managed as the texts:‘
   v1’, ‘v2’, ‘v3’:
 *     ```
       ['Mushrooms', v1],
       ['Onions', v2],
       ['Olives', v3],
       ['Zucchini', 1]
       ```
   
 * Second, you are defining the callback function: “drawchart” private to the “your_function”
   function, so, the “drawchart” function is not accessible from the Google Charts
   Api. If you want to define the callback into the body of the “your_function” 
   function, then you should associate it to the Api as part of a lambda function:
 * `google.charts.setOnLoadCallback(function(){drawchart();});`
 * If you have other doubts or issue using the Google Api Charts, please, contact
   to the Api developers.
 * Best regards.

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

The topic ‘JavaScript Implementation’ 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/)

 * 6 replies
 * 3 participants
 * Last reply from: [codepeople](https://wordpress.org/support/users/codepeople/)
 * Last activity: [9 years, 1 month ago](https://wordpress.org/support/topic/javascript-implementation/#post-8931201)
 * Status: resolved