Interactive chart in submission form

[Laurent]

Hello,

I'm a new user in Caspio and I don't know Javascript very good.

I'm working for a client in Real estate and I need to copy a plugin originaly implemented in Wordpress with an interactive doughnut chart related to inserted datas : https://protect-finance.ch/#calculateur

I would like to make a similar application with Caspio.

At this point I have found a code that design the kind of chart I need BUT when we load the page, it generates a popup that asks the parameter values ([@Fonds], [@Prix]...) WHILE I would like that the chart automaticaly changes when we modify the values in the related fields.

I've tried to insert and [@InsertRecordID], GetElementbyName, .onkeyup or ,onchange but nothing seems to work.

Here's the code I have :

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script><script type="text/javascript">
      google.charts.load("current", {packages:["corechart"]});
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Values', 'options'],
          ['Prix',     [@Fonds]],
          ['Revenus',  [@Prix]],
          ['Fonds',  [@Revenus]],
        ]);

        var options = {
          title: 'Capacité Financière',
          pieHole: 0.4,
        };

        var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
        chart.draw(data, options);
      }
    </script>
<div id="donutchart" style="width: 900px; height: 500px;"></div>
 

Could anyone help me please?

Thanks a lot in advance

 

 

 

[Nuke354]

I would suggest consulting with the Professional Services Team for these kinds of customizations: https://www.caspio.com/services/professional-services/

It also seems like you're using a format similar to an app parameter so I think this is why parameters are being asked on preview (this won't show when deployed).

[Laurent]

Thank you for your answer.

I'm still working on it, but I found other ways to do it with canvas.

It's still not what I'd like, but I'm aproaching to the goal.

Best regards