JavaScript Implementation

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.

thanks it’s working you are great !!

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

thanks

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.

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>

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.