Defining color for Kendo UI Stacked and Grouped Bar Chart

Question

I'm looking to get this in a chart with Kendo, but they don't have any examples using a datasource.

I'm currently using a hack to get this without a datasource, but being able to use the datasource could provide me with many benefits.

Here's my code so far:

var graph_data = [
    {'date': '2013-02-22T00:00:00', 'color': 'white', 'y_value': 1, 'name': 'name01'},
    {'date': '2013-02-23T00:00:00', 'color': 'orange','y_value': 1, 'name': 'name01'},
    {'date': '2013-02-22T00:00:00', 'color': 'red',   'y_value': 1, 'name': 'name02'},
    {'date': '2013-02-23T00:00:00', 'color': 'grey',  'y_value': 1, 'name': 'name02'},
    {'date': '2013-02-22T00:00:00', 'color': 'black', 'y_value': 1, 'name': 'name03'},
    {'date': '2013-02-23T00:00:00', 'color': 'blue',  'y_value': 1, 'name': 'name03'}
]
var unique_names = 3;
var series = [];
for(var i = 0; i < unique_names; i++){
    series.push({'field':'y_value', 'type':'bar'});
}
$('#chart').kendoChart({
    'dataSource':{
        'data':graph_data,
        'group': {
            'field':'name',
            'dir':'asc'
        },
        'schema':{
            'model':{
                'fields':{
                    'name':{'type':"string"},
                    'date':{'type':'date'},
                    'y_value':{'type':'number'},
                    'color':{'type':'string'}
                }
            }
        }
    },
    'seriesDefaults' : {
        'colorField':'color',
        'stack':true,
        'gap':0.1
    },
    'series': series,
    'categoryAxis': {
        'field': 'name'
    }
});

score 3 · Accepted Answer · answered Mar 02 '13 at 18:24

3

I changed my configuration to group by the dates and that magically worked.

$('#chart').kendoChart({
'dataSource':{
    'data':graph_data,
    'group': {
        'field':'date',
        'dir':'asc'
    },
    'schema':{
        'model':{
            'fields':{
                'name':{'type':"string"},
                'date':{'type':'date'},
                'y_value':{'type':'number'},
                'color':{'type':'string'}
            }
        }
    }
},
'seriesDefaults' : {
    'colorField':'color',
    'stack':true,
    'gap':0.1
},
'series': [{'type':'bar', 'field':'stack_value', 'stack':true}],
'categoryAxis': {
    'field': 'name'
}
});

answered Mar 02 '13 at 18:24

notbad.jpeg

3,308
1
32
37

Beauty is no need to define 'colorField':'color', if you have valid color code for the the field color in your JSON, it works automatically. – Dev Oct 27 '13 at 10:48
We've had mysterious and undocumented behavior happen in kendo before, so we just wanted to make sure that wasn't the problem. – notbad.jpeg Nov 02 '13 at 01:03

Defining color for Kendo UI Stacked and Grouped Bar Chart

1 Answers1