Chart throws an error when using the color function

[j.hartmannParticipant]

Hello,

i’ve got a problem with the jqwidgets version 3.7.0. I’m using a flipped bar chart with ranged columns to show a project schedule. I want to use the colorFunction of the series to apply different colors to the bars. This is the rendered code on the page:

   <div id="chartContainer" style="width:100%; height: 480px;"></div>
    var data = [
    {
        Task: 1fst Task",
        TaskName: "Task: 1fst Task",
        From: getMilliseconds(2015, 1, 1),
        To: getMilliseconds(2015, 1, 31),
        Task_State: 'Status: 0 %',
        Task_Done: 'False'
    },    
    {
        Task: "Testproject",
        TaskName: "Testproject",
        From: getMilliseconds(2015, 1, 1),
        To: getMilliseconds(2015, 5, 31),
        Task_State: '0 from 1 Tasks done',
        Task_Done: 'false'
    }];

    function getMilliseconds(year, month, day)
    {
        return new Date(year, month-1, day).getTime();
    }

    function getDDMMYY(ticks)
    {
        var date = new Date(ticks);
        var yy = date.getFullYear();
        var mm = date.getMonth() +1;
        var dd = date.getDate();
        if (mm < 10) mm = "0" + mm;
        if (dd < 10) dd = "0" + dd;
        return dd + "." + mm + "." + yy;
    }

    function getDayTicks(days)
    {
        return days * 86400000;
    }

    var toolTipCustomFormatFn = function (value, itemIndex, serie, group, categoryValue, categoryAxis)
    {
        return '<DIV style="text-align:left"><b>' + data[itemIndex].TaskName +
                '</b><br />Start: ' + getDDMMYY(value.from) +
                '<br />Ende: ' + getDDMMYY(value.to) +
                '<br />' + data[itemIndex].Task_State;
    };

    function renderChart()
    {
        var settings = {
            title: "Testproject",
            description: "Overview",
            enableAnimations: false,
            showLegend: false,
            showBorderLine: true,
            source: data,
            colorScheme: 'scheme07',
            xAxis:
            {
                dataField: 'Task',
                textRotationAngle: 90,
                unitInterval: 1,
                gridLines: { visible: false }
            },
            seriesGroups:
                [{
                    orientation: 'horizontal',
                    type: 'rangecolumn',
                    toolTipFormatFunction: toolTipCustomFormatFn,
                    valueAxis:
                    {
                        flip: true,
                        minValue: getMilliseconds(2015, 1, 1),
                        maxValue: getMilliseconds(2015, 5, 31),
                        unitInterval: getDayTicks(3),
                        formatFunction: function (value)
                        {
                            if ((value / getDayTicks(2)) % 2 == 0)
                            {
                                return getDDMMYY(value);
                            }
                            return "";
                        },
                        textRotationAngle: -75
                    },
                    series: [{
                        dataFieldFrom: 'From',
                        dataFieldTo: 'To',
                        useGradientColors: false,
                        colorFunction: function (dataValue, itemIndex, serie, group) {
                            //Implement Color condition
                            return '#00FF00';
                        }
                    }],
                    bands: [{
                        minValue: getMilliseconds(2015, 3, 10),
                        maxValue: getMilliseconds(2015, 3, 11),
                        color: '#FF0000',
                        opacity: .5,
                        lineWidth: 1
                    }]
                }]
        };
        $('#chartContainer').children().remove();
        $('#chartContainer').jqxChart(settings);
    }

If I include the

colorFunction

just like in the example above I get a javascript exception thrown, that says that the field

From

is undefined. This is the part of the minified script that causes the error:

_getDataValue:function(b,e,d)
{
    var c=this.source;
    if(d!=undefined&&d!=-1)
    {
        c=this.seriesGroups[d].source||c
    }
    if(c instanceof a.jqx.dataAdapter)
    {
    c=c.records
    }
    if(!c||b<0||b>c.length-1)
    {
        return undefined
    }
    if(a.isFunction(e))
    {
        return e(b,c)
    }
    return(e&&e!="")?c[b][e]:c[b]
}

The variable

c

contains my data,

b

is undefined and

e

is ‘From’.
How can I call the colorFuntion without this error?

[Peter StoevKeymaster]

Hi j.hartmann,

The provided code is not sufficient for testing your scenario. Please, prepare and share jsfiddle.net sample if you wish someone from our team to look at it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[j.hartmannParticipant]

Here is a working fiddle. The chart will display nothing until the

colorFuntion

is removed.

[Peter StoevKeymaster]

Hi j.hartmann,

Send us a support request to support@jqwidgets.com and we’ll provide you an updated file.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[j.hartmannParticipant]

I have sent you a mail.

Thanks for your help.

[j.hartmannParticipant]

Did you receive my e-mail? Currently I’m waiting for your response and the project is due tomorrow.

Regards

[Peter StoevKeymaster]

Hi j.hartmann,

We received your email and will prepare you a minified file for tomorrow morning.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[j.hartmannParticipant]

Thank for your help.

[Peter StoevKeymaster]

Hi j.hartmann,

We just sent you an email with the updated file.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Author]

Posts