Bar Graph populated by Calculated Fields Form

  • Resolved webparkdev

    (@webparkdev)


    5 years, 10 months ago

    Hi,
    I subscribed to CP-blocks plugin after reading a few times in the forums you mentioning that it is an easy solution to get a chart populated by Calculated Fields Form. Apparently, it is not as easy as I expected, so I was wondering if you can help.

    Currently I have bar chart which get values from calculated fields, but it doesn’t update once I change the values.

    What I lack is probably a single line of code which would force bar chart to react to any change.

    My code is:

    <canvas id="canvas1"></canvas>

<Script>
fbuilderjQuery(document).one('showHideDepEvent', function(){

var result = fbuilderjQuery('[id*="fieldname10_"]').val();
var national = fbuilderjQuery('[id*="fieldname2_"]').val()*fbuilderjQuery('[id*="fieldname11_"]').val()*0.5*52;

setBarChartBlock('canvas1', [{label: 'Title 1', value: result, color: '#FEBF18'},{label: 'Title 2', value: national, color: '#222222'}]);
});
</script>

    Thanks in advance!

    The page I need help with: [log in to see the link]

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

    (@codepeople)

    Hello @webparkdev

    The process would be as follows:

    1. Insert a new calculate field in your form that would be used as auxiliary (only to generate and update the chart). So, you can tick the checkbox: “Hide Field From Public Page” in its settings because this calculated field is not relevant in the form’s interface.

    2. Enter the following piece of code as the equation associated to the calculated field:

    
(function(){
    var bar_a = fieldname10, 
        bar_b = fieldname2*fieldname11*0.5*52;
    setBarChartBlock('canvas1', [{label: 'Title 1', value: bar_a, color: '#FEBF18'},{label: 'Title 2', value: bar_b, color: '#222222'}]);
})()

    3. Finally, edit the code into the “HTML Content” field as follows:

    
<canvas id="canvas1"></canvas>

    and that’s all.
    Best regards.

    Thread Starter webparkdev

    (@webparkdev)

    Thank you, that works just fine!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Bar Graph populated by Calculated Fields Form’ is closed to new replies.

Tags