Conditional bar color with colorFunction

[Finster63Participant]

I have a simple chart.
It has Actual and Plan data, by months.
I would like the actual column to be red if it is more than that months plan, green if it is less than or equal to that month’s plan.

I can get the chart to work if I plug in a value for the colorFunction:

                                        colorFunction: function (value, itemIndex, serie, group) {
                                            return (value > 25) ? '#CC1133' : '#55CC55';
                                        }

But I cannot get it to work if I plug in the Plan datafield (all bars are green):

                                        colorFunction: function (value, itemIndex, serie, group) {
                                            return (value > 'Plan') ? '#CC1133' : '#55CC55';
                                        }

Thoughts?

        $(document).ready(function () {
            

            // prepare chart data
            var sampleData = [

                    { Month: 'Mar 2014', Actual: 10, Plan: 25 },
                    { Month: 'Apr 2014', Actual: 34, Plan: 25 },
                    { Month: 'May 2014', Actual: 23, Plan: 25 },
                    { Month: 'Jun 2014', Actual: 21, Plan: 25 },
                    { Month: 'Jul 2014', Actual: 25, Plan: 25 },
                    { Month: 'Aug 2014', Actual: 33, Plan: 25 },
                    { Month: 'Sep 2014', Actual: 11, Plan: 25 },
                    { Month: 'Oct 2014', Actual: 32, Plan: 25 },
                    { Month: 'Nov 2014', Actual: 14, Plan: 25 },
                    { Month: 'Dec 2014', Actual: 18, Plan: 25 },
                    { Month: 'Jan 2014', Actual: 21, Plan: 31 },
                    { Month: 'Feb 2015', Actual: 25, Plan: 31 }

            ];

                    
                    
             // prepare jqxChart settings

             var settings = {
                title: "SAC Montlhy KPI Graphs",
                description: "Average Age of Contracts Definitized",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                        dataField: 'Month',
                        unitInterval: 1,
                        textRotationAngle: -75,
                        gridLines: { visible: false }
                },
                colorScheme: 'scheme07',
                valueAxis:
                {
                    minValue: 0,
                    maxValue: 40,
                    unitInterval: 5,
                    title: { text: 'Days<br>' },
                    labels: {
                        horizontalAlignment: 'right'
                    }
                },
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 20,
                            series: [
                                        { dataField: 'Actual', displayText: 'Actual', opacity: 1, 
                                        labels: {
                                            visible: true,
                                            verticalAlignment: 'top',
                                            offset: { x: 0, y: -20 }
                                        },
                                        colorFunction: function (value, itemIndex, serie, group) {
                                            return (value > 'Plan') ? '#CC1133' : '#55CC55';
                                        }
                                    }
                                    
                                ]
                        },
                        {
                            type: 'line',
                            series: [
                                    { dataField: 'Plan', displayText: 'Target', opacity: 1, lineWidth: 4 }
                                ]
                        }
                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });

[Peter StoevKeymaster]

Hi Finster63,

> and < are operators for comparing Numbers, not Strings i.e value > ‘Plan’ is not correct. You should use other type of comparison for comparing strings.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Finster63Participant]

I do not want to compare strings.
I want to compare Plan numeric values to Actual numeric values, and have the colorFunction use this comparison to set the column colors.

Do you have a suggestion on how to set the colorFunction so that it evaluates the Actual value to the Plan value?

[Peter StoevKeymaster]

Hi Finster63,

‘Plan’ is a String. If you don’t want to compare strings, then do not use Strings in your colorFunction, use Numbers. Numeric value for example is sampleData[0].Plan, but ‘Plan’ is not numeric value.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[yodaParticipant]

There you go:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='description'>Sample</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdraw.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxchart.core.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var sampleData = [

                    { Month: 'Mar 2014', Actual: 10, Plan: 25 },
                    { Month: 'Apr 2014', Actual: 34, Plan: 25 },
                    { Month: 'May 2014', Actual: 23, Plan: 25 },
                    { Month: 'Jun 2014', Actual: 21, Plan: 25 },
                    { Month: 'Jul 2014', Actual: 25, Plan: 25 },
                    { Month: 'Aug 2014', Actual: 33, Plan: 25 },
                    { Month: 'Sep 2014', Actual: 11, Plan: 25 },
                    { Month: 'Oct 2014', Actual: 32, Plan: 25 },
                    { Month: 'Nov 2014', Actual: 14, Plan: 25 },
                    { Month: 'Dec 2014', Actual: 18, Plan: 25 },
                    { Month: 'Jan 2014', Actual: 21, Plan: 31 },
                    { Month: 'Feb 2015', Actual: 25, Plan: 31 }

            ];

            var settings = {
                title: "SAC Montlhy KPI Graphs",
                description: "Average Age of Contracts Definitized",
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                source: sampleData,
                xAxis:
                {
                    dataField: 'Month',
                    unitInterval: 1,
                    textRotationAngle: -75,
                    gridLines: { visible: false }
                },
                colorScheme: 'scheme07',
                valueAxis:
                {
                    minValue: 0,
                    maxValue: 40,
                    unitInterval: 5,
                    title: { text: 'Days<br>' },
                    labels: {
                        horizontalAlignment: 'right'
                    }
                },
                seriesGroups:
                    [
                        {
                            type: 'column',
                            columnsGapPercent: 20,
                            series: [
                                        { dataField: 'Actual', displayText: 'Actual', opacity: 1,
                                            labels: {
                                                visible: true,
                                                verticalAlignment: 'top',
                                                offset: { x: 0, y: -20 }
                                            },
                                            colorFunction: function (value, itemIndex, serie, group) {
                                                if (isNaN(itemIndex))
                                                    return '#55CC55'; 
                                                
                                                return (value > sampleData[itemIndex]['Plan']) ? '#CC1133' : '#55CC55';
                                            }
                                        }

                                ]
                        },
                        {
                            type: 'line',
                            series: [
                                    { dataField: 'Plan', displayText: 'Target', opacity: 1, lineWidth: 2 }
                                ]
                        }
                    ]
            };

            $('#chartContainer').jqxChart(settings);
        });   
    </script>
</head>
<body>
	<div id='chartContainer' style="width:600px; height: 400px"/>
</body>
</html>

[Finster63Participant]

YODA!!!

Thank you very much!

Works perfectly!!!

[Author]

Posts