CFCHART displaying y-axis numbers in whole

Question

I am trying to use cfchart to display numbers of messages and all works well but when I have a small amount of numbers it breaks it into decimals. Is there a way we can make it always set to whole numbers?

Here is the code:

<cfchart format="#display#" type="bar" show3d="no" showlegend="false" chartHeight="300" chartWidth="220">
       <cfchartseries  colorlist="##E18014,green,red" type="bar">
             <cfchartdata item="Calls Made" value="#voice_messages.TotalMessages#">

             <cfchartdata item="Successful" value="#voice_messages.ReceiptsReceived#">
             <cfif #voice_messages.DeliveryFailures# neq "0">
             <cfchartdata item="Bus/No Ans" value="#voice_messages.DeliveryFailures#">
             </cfif>
       </cfchartseries>
</cfchart>

And here is a pic of the graph

I looked all over on Stack and the web but didn't find anything. Any help would be greatly appreciated.

Thanks!!

Answer 1

<cfchart> has an attribute called yAxisValues. It accepts an array of values. For this situation, once I had my data, I would do something to produce a suitable array to use for this attribute.

Answer 2

Verify whether the chartdata values voice_messages.TotalMessages, voice_messages.ReceiptsReceived and are infact integers. Use something like:

<cfset displayChart=false>

<cfif    (isNumeric(voice_messages.TotalMessages) and voice_messages.TotalMessages gte 0)
     and (isNumeric(voice_messages.ReceiptsReceived) and voice_messages.ReceiptsReceived gte 0)
     and (isNumeric(voice_messages.DeliveryFailures) and voice_messages.DeliveryFailures gte 0)>

    <cfset numberOfMessages=int(voice_messages.TotalMessages)>
    <cfset numberOfReceipts=int(voice_messages.ReceiptsReceived)>
    <cfset numberOfFailures=int(voice_messages.DeliveryFailures)>

    <cfset displayChart=true>
</cfif>

<cfif displayChart>
    <!--- You may have to increase the chartWidth to make room for all the labels--->
    <cfchart format="png" type="bar" show3d="no" showlegend="false" chartHeight="300" chartWidth="300">
       <cfchartseries  colorlist="##E18014,green,red" type="bar">
             <cfchartdata item="Calls Made" value="#numberOfMessages#">

             <cfchartdata item="Successful" value="#numberOfReceipts#">
             <cfif numberOfFailures neq 0>
                <cfchartdata item="Bus/No Ans" value="#numberOfFailures#">
             </cfif>
       </cfchartseries>
   </cfchart>
<cfelse>
    Sorry, chart cannot be displayed because chartdata are not all integers.
</cfif>

In any case, you should realize that the labels in the display you have shown do not correspond to those in the code.

Answer 3

I shall now give you another answer. It is an answer of last resort, because it involves a changing ColdFusion server settings. Perhaps the reason you cannot easily find it on the web. Again, please be warned beforehand: it is a change of server setting. So back up your files!

ColdFusion 2018 (my version) uses the settings for ZingCharts to configure style in cfcharts. You will find the relevant files at C:\ColdFusion2018\cfusion\charting\styles. You want to edit the style file for bar charts.

Open in a text editor the file C:\ColdFusion2018\cfusion\charting\styles\bar. It has JSON format.

Locate the element "scale-y". It begins with:

"scale-y" : { "format" : "%v", "font-size" : 16, ... and so on.

Prepend to it the key-value pair "decimals" : 0. The result should be:

"scale-y" : { "decimals" : 0, "format" : "%v", "font-size" : 16, ... and so on.

This will ensure that the y-axis will have 0 decimal places.

Save the file and restart ColdFusion for the changes to take effect.

You have now configured the y-axis in cfchart's bar charts to no longer have decimals.

You will have noticed that the element "scale-y" is a sub-element of "graphset". Should you be interested in knowing more about their settings, then go to https://www.zingchart.com/docs/api/json-configuration/graphset