How to show values in a chart?

  • Resolved Damn!

    (@greedymind)


    6 years, 11 months ago

    Hello,

    I’m looking to implement a chart based on the values from cff. How do I go about it? I looked at chartjs.org and not sure where to start.

    The scenario I have is quite simple, I have 3 fields that needs to be shown in a pie chart. Please suggest.

    Thanks.

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

    (@codepeople)

    Hello @greedymind,

    You can insert a couple of <script></script> tags into a “HTML Content” field to include the ChartJS library in your webpage, and a <canvas> tag where display the chart, and finally, you should call the methods of the ChartJS library from the equations associated to the calculated fields.

    As ChartJS is not part of our plugin, any question about ChartJS should be send the its developers.

    If you need additional help, we can offer you a custom coding service from our private website:

    https://cff.dwbooster.com/customization

    Best regards.

    Thread Starter Damn!

    (@greedymind)

    Hello,

    I tried to implement canvasjs charts today. I have this code currently and I’m having problem with fetching the value of the calculated field. 

    <!DOCTYPE HTML>
<html>
<head>
<script>
window.onload = function () {
var carb = jQuery('.my-carb').val();
var protein = jQuery('.my-protein').val();
var fat = jQuery('.my-fat').val();
var options = {
	animationEnabled: true,
	title: {
		text: "Macro Split Chart"
	},
	data: [{
		type: "doughnut",
		innerRadius: "40%",
		showInLegend: true,
		legendText: "{label}",
		indexLabel: "{label}: #percent%",
		dataPoints: [
			{ label: "Carbohydrates", y: carb },
			{ label: "Protein", y: protein },
			{ label: "Fat", y: fat }
		]
	}]
};
$("#chartContainer").CanvasJSChart(options);

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

    However, If I replace these var protein = jQuery('.my-protein').val(); with numeric values like these var protein = 33; the chart works. Please help me with the correct syntax to fetch the values.

    Thanks.

    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.

    Plugin Author codepeople

    (@codepeople)

    Hello @greedymind,

    We have published two new blocks in the “CP Blocks” plugin to generate Bar and Pie Charts into the Calculated Fields Forms.

    Best regards.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘How to show values in a chart?’ is closed to new replies.