Embed a google chart within a form that reacts to entered field values

  • Profile Image
    Asked on May 08, 2014 at 10:14 PM

    Hi, I would like to embed a Google chart (pie chart) into my form which so far appears to work if I use the source code to embed my jotform within my own webpage's html (as opposed to using iframe method), and inserting the proper head/body html as outlined on the example code from the Google charts page: https://developers.google.com/chart/interactive/docs/gallery/piechart#3D

    My question is: is it possible, using the method mentioned above, to pass along variables that are entered in the form into the Google chart?  The numbers for the chart are grabbed from the part of the code that goes in the <head> section of the html and I'm not sure how to pass along jotform field value to there?

    This is for a mortgage calculator I'm building in jotform and I'd like to show the calculated payment results broken down into a pie chart (principal & interest, taxes, insurance, etc each showing as a "slice" of the pie). Similar to the calculator available at Zillow http://www.zillow.com/mortgage-calculator/

  • Profile Image
    Answered on May 09, 2014 at 02:09 AM


    Thank you for contacting us.

    As you know, we do not have integration with Google Chart. I think that requires extensive knowledge of javascript in order to connect entered values into Google Chart which is a little more complex to achieve. You can try to play around using your form source code and the provided samples on the chart API page.

    By the way, I just found out that you can create a mortgage calculator widget here http://www.zillow.com/webtools/widgets/MortgageCalculatorWidget.htm. You can use this and add it to your form.

    Feel free to let us know if you need further assistance about this.

    Thank you!

  • Profile Image
    Answered on May 09, 2014 at 09:00 PM

    Thanks I am aware of the Zillow widget and that is actually what we use on our site currently, however we are wanting to create our own branded calculator as the Zillow one is designed to send the visitor to Zillow and away from our site, which is bad for lead gen. I like the idea of using jotform as the new form calculation widget makes it easy to program. Also none of the widgets allow proper calculation of mortgage insurance based on loan type (FHA, VA, conventional, USDA). With jotform I can build a "one-size-fits-all" mortgage calculator using conditions. Plus I can actually include a submit form to have user email the calculation to themselves which captures the email for us.

    I'm having a little more success using the image chart (URL string) API Google provides. But it looks like it will only work to pass the form variables to the chart by embedding as an image into the email (or perhaps have the results appear on a thank you page instead of the actual form itself). This still beats building it from scratch in JavaScript I think.

  • Profile Image
    Answered on May 10, 2014 at 05:56 AM


    If you are trying to embed the chart onto the form itself then I am sorry to say that we are on a dead end here. JotForm fields cannot interact with external elements unless you modify the form's source code by yourself.

    Again, sorry about that.