Support » Plugin: Calculated Fields Form » JavaScript Implementation

  • Resolved dulicanazi

    (@dulicanazi)


    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/

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author codepeople

    (@codepeople)

    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

    (@dulicanazi)

    thanks it’s working you are great !!

    malpica

    (@malpica)

    How can I use fieldname1 or fieldname2 with this function.? I need use this fields to show a chart

    thanks

    Plugin Author codepeople

    (@codepeople)

    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

    (@malpica)

    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;

    <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

    (@codepeople)

    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.