tracker issue : CF-4201981

select a category, or use search below
(searches all categories and all time range)
Title:

Cfchart not using Chartdata item labels to organize the series

| View in Tracker

Status/Resolution/Reason: To Fix//BugReVerified

Reporter/Name(from Bugbase): Mark Berning / ()

Created: 04/13/2018

Components: Charting/Graphing

Versions: 2016,11.0,2018

Failure Type: Incorrectly functioning

Found In Build/Fixed In Build: CF 2016 Enterprise update 5 build 303689 /

Priority/Frequency: Critical /

Locale/System: English / Linux RHEL 6.4

Vote Count: 0

Problem Description:In a two-series chart, the data in each series is ignoring the item labels to categorize the data. If there are 5 items in the first series and 4 items in the second it does not use the the item label to put the second series data in the correct column. Also if there are differing labels it ignores the item label and just uses the order of  the series. Further if the items are not in the same order it also ignores the item labels.
This is even worse when using queries. Using xaxistype="category" and sortXaxis has no effect. It looks like it completely ignores the labels in the second series and just uses the order.
This is not how it worked in CF10 - I understand it is using a new chart back end. Not only do I have to completely redo all of my chart styling but I also have to redo the queries that create the data.

Steps to Reproduce:
This is just a simple example using <cfchartdata>  but has the exact same effect/bug using <cfchartseries query>

<cfchart format="html" chartHeight="400" xaxis="" chartWidth="600" showLegend="no" title="Two-series chart">
    <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
        <cfchartdata item="Day 1" value="19.2"/>
        <cfchartdata item="Day 2" value="15.2"/>
        <cfchartdata item="Day 3" value="15.1"/>
        <cfchartdata item="Day 4" value="12.6"/>
        <cfchartdata item="Day 5" value="14.2"/>
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
        <cfchartdata item="Day 1" value="39.2"/>
        <cfchartdata item="Day 2" value="35.2"/>

        <cfchartdata item="Day 4" value="32.6"/>
        <cfchartdata item="Day 5" value="34.2"/>
    </cfchartseries>
</cfchart>

OR

<cfchart format="html" chartHeight="400" xaxis="" chartWidth="600" showLegend="no" title="Two-series chart">
    <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
        <cfchartdata item="Day 1" value="19.2"/>
        <cfchartdata item="Day 2" value="15.2"/>
        <cfchartdata item="Day 3" value="15.1"/>
        <cfchartdata item="Day 4" value="12.6"/>
        <cfchartdata item="Day 5" value="14.2"/>
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
        <cfchartdata item="Day 1" value="39.2"/>
        <cfchartdata item="Day 2" value="35.2"/>
        <cfchartdata item="Day 3" value="35.1"/>
        <cfchartdata item="Day 4" value="32.6"/>
        <cfchartdata item="Day 16" value="50"/>
    </cfchartseries>
</cfchart>

OR

<cfchart format="html" chartHeight="400" xaxis="" chartWidth="600" showLegend="no" title="Two-series chart">
    <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red">
        <cfchartdata item="Day 1" value="19.2"/>
        <cfchartdata item="Day 2" value="15.2"/>
        <cfchartdata item="Day 3" value="15.1"/>
        <cfchartdata item="Day 4" value="12.6"/>
        <cfchartdata item="Day 5" value="14.2"/>
    </cfchartseries>
    <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" >
        <cfchartdata item="Day 1" value="39.2"/>
        <cfchartdata item="Day 2" value="35.2"/>
        <cfchartdata item="Day 6" value="50"/>
        <cfchartdata item="Day 4" value="32.6"/>
        <cfchartdata item="Day 5" value="34.2"/>
    </cfchartseries>
</cfchart>
Actual Result:
See testa.7z and testb.pdf

Expected Result:
See testb.7z and testb.pdf

Any Workarounds:
Manually find all of the missing items in both series, add the missing items with NULL or 0 values to the corresponding series and resort so they are in the same order.

Attachments:

Comments:

@Mark I have enclosed an image with comparison with CF9, 10 and 2016. The behavior is same in 10 and the latest. Code used for chart <cfchart format="html" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>
Comment by Dattanand M.
27482 | April 16, 2018 12:04:40 PM GMT
Actually we used format="swf" in CF10 (which we can no longer use in CF2016). You get the same result using png in CF10. Using SWF we get that attached results (make sure you see all results not just the first). Strangely in CF10 and swf/png - it interpolated the missing values/days (IMO it shouldn't) but still added correctly the additional days. See attached testc.pdf for CF10 output. <cfchart format="swf" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart> OR <cfchart format="swf" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 16" value="50"/> </cfchartseries> </cfchart> OR <cfchart format="swf" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 6" value="50"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>
Comment by Mark B.
27483 | April 17, 2018 11:38:37 AM GMT
Here is the code used for png in both CF10 and CF2016 And I attached CF10_png.pdf and CF2016_png.pdf for comparisons. <cfchart format="png" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart with missing Day 3 in second series"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart> OR <cfchart format="png" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart with missing Day 5 but added Day 16 in second series"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 16" value="100"/> </cfchartseries> </cfchart> OR <cfchart format="png" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart added Day 16 in second series"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 3" value="35.1"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> <cfchartdata item="Day 16" value="100"/> </cfchartseries> </cfchart> OR <cfchart format="png" chartHeight="400" chartWidth="600" showLegend="no" title="Two-series chart with Day 6 as the third item in the second series"> <cfchartseries type="bar" serieslabel="WBC" markerstyle="circle" color="red"> <cfchartdata item="Day 1" value="19.2"/> <cfchartdata item="Day 2" value="15.2"/> <cfchartdata item="Day 3" value="15.1"/> <cfchartdata item="Day 4" value="12.6"/> <cfchartdata item="Day 5" value="14.2"/> </cfchartseries> <cfchartseries type="bar" serieslabel="HCT" markerstyle="diamond" color="blue" > <cfchartdata item="Day 1" value="39.2"/> <cfchartdata item="Day 2" value="35.2"/> <cfchartdata item="Day 6" value="100"/> <cfchartdata item="Day 4" value="32.6"/> <cfchartdata item="Day 5" value="34.2"/> </cfchartseries> </cfchart>
Comment by Mark B.
27484 | April 17, 2018 11:55:55 AM GMT
I still do not like the way CF10 plots it either, it filled in or interpolated for the missing data. It should not plot a value where their is no data, it should pass a null for that value.
Comment by Mark B.
27485 | April 17, 2018 12:01:47 PM GMT
Doing a little research on zingchart we should be using Array of Arrarys. See www.zingchart.com/docs/chart-types/bar-charts/#bar__series_array_array and www.zingchart.com/docs/chart-types/line-charts/#line__array_of_arrays Then we don't need to specify the nulls or zeros for the missing data. This can be controlled by the xAxisType and sortXAxis options that currently are not used in CF11 and 2016.
Comment by Mark B.
27486 | April 18, 2018 01:06:04 PM GMT