CMS Development

stephenlindell
Participant

Charts.js with submitted form data

I'm trying to show a radius chart with form data that is calculated in the onFormSubmit function. The chart won't render and I can't figure out why because there are no javascript errors. I've tested the chart code and it works, 

https://jsfiddle.net/stephenlindell/79c13zw3/

 

The form is showing the correct submitted data, but the chart is empty. I can't figure out if it's due to a js conflict or something else. 

 

Here is a link to the page I'm testing this out. 

 

http://www.waypointus.com/lifecycle-locator

 

And here is the code I'm using to show the form on the landing page:

<script>
hbspt.forms.create({
portalId: '172936',
formId: 'd615ce30-b986-4843-bc78-721bda5e40aa',
onFormSubmit($form){
calcscore();

showChart();
}

});

 

</script>

 

Any help with this would be greatly appreciated. 

0 Upvotes
2 Replies 2
DaniellePeters
Top Contributor

Charts.js with submitted form data

It looks like your syntax is slightly off. onFormSubmit is a property not a function. Its value is a function. Try this:

<script>
    hbspt.forms.create({
        portalId: '172936',
        formId: 'd615ce30-b986-4843-bc78-721bda5e40aa',
        onFormSubmit: function($form){
            calcscore();
            showChart();
        }
    });
</script>

 

stephenlindell
Participant

Charts.js with submitted form data

Thanks a lot for the suggestion. It seems that the result is the same though. The calcscore() function is running, but the chart does not render. There must be a js conflict that's preventing it from rendering, but I just can't figure out where or why. 

0 Upvotes