Fetching the values from a calculated field inside script tag

  • Resolved Damn!

    (@greedymind)


    6 years, 11 months ago

    Hello,

    I tried to implement canvasjs charts today. I have this code currently and the chart displays without a problem.

    <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type="text/javascript">
window.onload = function() {
var carb = 30;
var protein = 140;
var fat = 20;
var options = {
	exportEnabled: true,
	animationEnabled: true,
	title:{
		text: "Macro Split Chart"
	},
	
	data: [{
		type: "pie",
		showInLegend: true,
		toolTipContent: "<b>{name}</b>: {y} g",
		indexLabel: "{name}: {y} g",
		legendText: "{name}",
		indexLabelPlacement: "inside",
		dataPoints: [
			{ y: carb, name: "Carb" },
			{ y: protein, name: "Protein" },
			{ y: fat, name: "Fat" }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

}
</script>
</head>
<body>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery-1.11.1.min.js"></script>  
<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>
</body>
</html>

    However, If I replace var protein = 140; with var protein = jQuery('.my-protein').val(); the chart stops working. Please help me with the correct syntax to fetch the values from a calculated field.

    Thanks. Happy xmas.

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

    (@codepeople)

    Hello,

    If .my-protein is the class assigned to an input field in the form the correct syntax would be: jQuery('.my-protein input').val(); because the class names are assigned to the div tag that groups to the field (the fields include their labels, their input tags, the instructions for users, etc.).

    I’m sorry, but if you need additional support integrating ChartJS with the form you should request a custom coding service.

    Best regards.

    Thread Starter Damn!

    (@greedymind)

    Thank you. But that syntax returns 0.

    ref page: damnripped.com/test

    Plugin Author codepeople

    (@codepeople)

    Hello @greedymind,

    I insists, the process is not as simple as you think, there are multiple conditions that your are not considering in your code.

    – Has been loaded the ChartJS library when the equations are evaluated?
    – Have been evaluated the equations when the calculated results are needed by the charts?

    I’m sorry, but the ChartJS library is not part of our plugin, and the integration requires some additional code. If you need additional help to integrate the ChartJS library with the form, I can offer you a custom coding service from my private website:

    https://cff.dwbooster.com/customization

    Best regards.

    Thread Starter Damn!

    (@greedymind)

    Thank you. Like I said, I will request custom coding but I’ll have to wait till the end of this month. Until then I thought I will try my hand at this.

    Thread Starter Damn!

    (@greedymind)

    Hello,

    I tried to load the chart when the radiobox selection changes:

    jQuery(document).on('change', '[id*="fieldname4_"]', function(){

    but now the sliders fail to load. However the chart displays when the radio buttons change.

    Plugin Author codepeople

    (@codepeople)

    Hello @greedymind,

    I’m sorry, but the integration with third party libraries always require of additional code that not depends totally of our plugin.

    Best regards.

    Thread Starter Damn!

    (@greedymind)

    Understood. Thanks for the help so far.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Fetching the values from a calculated field inside script tag’ is closed to new replies.