jQWidgets Forums

April 11, 2016 at 1:24 pm colorFunction for conditional colors #83355

Participant

Hi!

I had an “Eureka” moment this morning and it worked.

Here’s the colorFunction I had to use to fix it, where el_2 is another field of the csv “row”.


 colorFunction: function (value, itemIndex, serie, group) { if (isNaN(itemIndex)) return '#55CC55'; return (dataAdapter.records[itemIndex]['el_2'] > 0) ? '#CC1133' : '#55CC55'; }

I do have another problem though as the page now returns this error message:
“Error: Invalid value for <path> attribute d=”M87.5,387.5 QNaN,NaN 153.5,377.5 QNaN,NaN 153.5,377.5 ”

The following code, generates this error message too. It’s coming from the “javascript_chart_column_range.htm” example, where i add 2 fields in the data. el_1 and el_2. el_1 is a value i want displayed on the chart as a scatter point and el_2 is a 0 or 1 value that has to be used to specify the scatter point color.


<!DOCTYPE HTML>
<html lang="en">
<head>
    <title id='Description'>Chart with Range Column Series</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.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 () {
            // prepare the data

            var data = [
                { "month": "Jan", "min": -1.9, "max": 3.7, "avg": 0.2, "el_1": -4.0, "el_2": 1 },
                { "month": "Feb", "min": -0.9, "max": 5.9, "avg": 1.1, "el_1": -2.7, "el_2": 1 },
                { "month": "Mar", "min": 0.8, "max": 9.8, "avg": 4.9, "el_1": 2.1, "el_2": 0 },
                { "month": "Apr", "min": 4.1, "max": 13.9, "avg": 8.7, "el_1": 8.9, "el_2": 0 },
                { "month": "May", "min": 8.0, "max": 18.4, "avg": 13.1, "el_1": 14.1, "el_2": 0 },
                { "month": "Jun", "min": 11.3, "max": 22.2, "avg": 16.6, "el_1": 22.8, "el_2": 1 },
                { "month": "Jul", "min": 13.3, "max": 25.3, "avg": 18.4, "el_1": 14.1, "el_2": 0 },
                { "month": "Aug", "min": 13.0, "max": 24.4, "avg": 17.6, "el_1": 13.1, "el_2": 0 },
                { "month": "Sep", "min": 10.3, "max": 20.8, "avg": 14.3, "el_1": 11.8, "el_2": 0 },
                { "month": "Oct", "min": 6.6, "max": 14.9, "avg": 9.2, "el_1": 10.9, "el_2": 0 },
                { "month": "Nov", "min": 2.1, "max": 8.4, "avg": 4.2, "el_1": 10.0, "el_2": 1 },
                { "month": "Dec", "min": -0.5, "max": 4.5, "avg": 1.5, "el_1": 3.7, "el_2": 0 }
                ];

            var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis) {
                var dataItem = data[itemIndex];
                return '<DIV style="text-align:left"><b>Month: ' +
                        categoryValue + '</b><br />Min: ' +
                        dataItem.min + '°<br />Max: ' +
                        dataItem.max + '°<br />Average: ' +
                        dataItem.avg + '°</DIV>';
            };

            // prepare jqxChart settings
            var settings = {
                title: "Weather in Geneva, Switzerland",
                description: "Climatological Information about Geneva",
                enableAnimations: true,
                showLegend: true,
                padding: { left: 5, top: 5, right: 5, bottom: 5 },
                titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
                enableCrosshairs: true,
                source: data,
                colorScheme: 'scheme05',
                xAxis:
                {
                    dataField: 'month',
                    unitInterval: 1,
                    gridLines: {
                        step: 3
                    }
                },
                valueAxis:
                {
                    minValue: -5,
                    maxValue: 30,
                    unitInterval: 5,
                    title: { text: 'Temperature [C]<br>' },
                    labels: {
                        horizontalAlignment: 'right',
                        formatSettings: { sufix: '°' }
                    }

                },
                seriesGroups:
                    [
                        {
                            type: 'rangecolumn',
                            columnsGapPercent: 50,
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            series: [
                                    { dataFieldTo: 'max', displayText: 'Temperature Range', dataFieldFrom: 'min', opacity: 1 }
                                ]
                        },
                        {
                            type: 'spline',
                            toolTipFormatFunction: toolTipCustomFormatFn,
                            series: [
                                    { dataField: 'avg', displayText: 'Average Temperature', opacity: 1, lineWidth: 2 }
                                ]
                        },
						{
                            type: 'scatter',
                            series: [
                                    { dataField: 'el_1', displayText: 'Element 1', symbolSize: 3, colorFunction: function (value, itemIndex, serie, group) { if (isNaN(itemIndex)) return '#55CC55'; return (data[itemIndex]['el_2'] > 0) ? '#CC1133' : '#55CC55'; }	}
                                ]
                        }

                    ]
            };

            // setup the chart
            $('#chartContainer').jqxChart(settings);
        });
    </script>
</head>
<body class='default'>
    <div id='chartContainer' style="width:850px; height:500px">
    </div>    
</body>
</html>