Kendo Q2 SP

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="chart"</div>

JavaScript

var data =[
    {
        "stageName": "Validation",
        "stageId": 1,
        "ageGroupName": "Green",
        "ageGroupId": 1,
        "colorValue": "#0000ff", //chaged color
        "recordCount": 3
    },
    {
        "stageName": "Validation",
        "stageId": 1,
        "ageGroupName": "Orange",
        "ageGroupId": 2,
        "colorValue": "#F68B19",
        "recordCount": 0
    },
    {
        "stageName": "Validation",
        "stageId": 1,
        "ageGroupName": "Brown",
        "ageGroupId": 3,
        "colorValue": "#816F59",
        "recordCount": 0
    },
    {
        "stageName": "Validation",
        "stageId": 1,
        "ageGroupName": "Red",
        "ageGroupId": 4,
        "colorValue": "#B0171F",
        "recordCount": 1
    },
    {
        "stageName": "Working",
        "stageId": 2,
        "ageGroupName": "Green",
        "ageGroupId": 1,
        "colorValue": "#71C671",
        "recordCount": 13
    },
    {
        "stageName": "Working",
        "stageId": 2,
        "ageGroupName": "Orange",
        "ageGroupId": 2,
        "colorValue": "#F68B19",
        "recordCount": 1
    },
    {
        "stageName": "Working",
        "stageId": 2,
        "ageGroupName": "Brown",
        "ageGroupId": 3,
        "colorValue": "#816F59",
        "recordCount": 5
    },
    {
        "stageName": "Working",
        "stageId": 2,
        "ageGroupName": "Red",
        "ageGroupId": 4,
        "colorValue": "#B0171F",
        "recordCount": 0
    }
];

$(document).ready(function() {
    $("#chart").kendoChart({
        theme: "metro",
        title : {
            text: "Test Chart"
        },
        legend: {
            position: "bottom"
        },
        dataSource: {
            data: data,
            group: [{
                field: "ageGroupName",
                dir: "asc"
            }]
        },
        seriesDefaults: {
            type: "bar",
            stack: true
        },
        series: [{
            field:...