jQuery UI Widgets Forums Chart jqxChart Column type

This topic contains 2 replies, has 2 voices, and was last updated by  Dimitar 9 years, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • jqxChart Column type #64521

    QualiAdmin
    Participant

    I have created a chart and want to set the column series color based on value. I have trying to find a way to do this for over an hour and have given up. Below is the seriesGroups section of the chart settings. When I use this code I get the following error. Error: Object doesn’t support property or method ‘indexOf’

    Please Help, how can I do this.

    seriesGroups:
    [
    {
    type: ‘column’,
    columnsGapPercent: 20,
    seriesGapPercent: 0,
    //toolTipFormatFunction: toolTipCustomFormatFn,
    valueAxis:
    {
    unitInterval: 20,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: true,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    {
    dataField: ‘tota’,
    displayText: ‘Site’,
    //showlabels: true,
    //labelsVerticalAlignment: ‘top’,
    color: function (value) {
    switch (value) {
    case 50:
    return RED;
    break;
    case 60:
    return GRN;
    break;
    case 70:
    return YEL;
    break;
    };
    },
    labelsOffset: { x: 0, y: -20 },
    formatFunction: function (value, itemIndex) {
    var dataItem = source[itemIndex];
    return Math.round(value) + ‘%’ + ‘ [‘ + dataItem.Y + ‘/’ + dataItem.N + ‘]’;
    }
    }],

    jqxChart Column type #64522

    QualiAdmin
    Participant

    ` seriesGroups:
    [
    {
    type: ‘column’,
    columnsGapPercent: 20,
    seriesGapPercent: 0,
    //toolTipFormatFunction: toolTipCustomFormatFn,
    valueAxis:
    {
    unitInterval: 20,
    minValue: 0,
    maxValue: 100,
    displayValueAxis: true,
    axisSize: ‘auto’,
    tickMarksColor: ‘#888888’
    },
    series: [
    {
    dataField: ‘tota’,
    displayText: ‘Site’,
    //showlabels: true,
    //labelsVerticalAlignment: ‘top’,
    color: function (value) {
    switch (value) {
    case 50:
    return RED;
    break;
    case 60:
    return GRN;
    break;
    case 70:
    return YEL;
    break;
    };
    },
    labelsOffset: { x: 0, y: -20 },
    formatFunction: function (value, itemIndex) {
    var dataItem = source[itemIndex];
    return Math.round(value) + ‘%’ + ‘ [‘ + dataItem.Y + ‘/’ + dataItem.N + ‘]’;
    }
    }],

    jqxChart Column type #64526

    Dimitar
    Participant

    Hello QualiAdmin,

    This functionality can be achieved with the colorFunction callback. Please refer to the following demo to see it in action: http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxchart/javascript_chart_series_conditional_colors.html?arctic.

    Best Regards,
    Dimitar

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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.