chart groupNameTemplate

by valchev

HTML

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

JavaScript

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            //using jsfiddle echo service to simulate JSON endpoint
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: {
                // /echo/json/ echoes the JSON which you pass as an argument
                json: JSON.stringify([
                    {"year":2008, "month": "May", "value": 22},
                    {"year":2008, "month": "June", "value": 34},
                    {"year":2008, "month": "July", "value": 31},
                    {"year":2009, "month": "May", "value": 62},
                    {"year":2009, "month": "June", "value": 45},
                    {"year":2009, "month": "July", "value": 52},
                    {"year":2010, "month": "May", "value": 67},
                    {"year":2010, "month": "June", "value": 64},
                    {"year":2010, "month": "July", "value": 59},
                    {"year":2011, "month": "May", "value": 42},
                    {"year":2011, "month": "June", "value": 47},
                    {"year":2011, "month": "July", "value": 46}
                ])
            }
        }
    },
    schema: {
        model: {
            fields: {
                year: {type: "number"},
                month: {type: "string"},
                value: {type: "number"}
            }
        }            
    },
    group: { field: "year" }
});
    
$("#chart").kendoChart({
    dataSource: dataSource,
    seriesDefaults: {
        type: "line"
    },
    series: [{
        field: "value",
        name: "Value",
        groupNameTemplate: "#= series.name # for #= group.field # #= group.value #"
    }],
    categoryAxis: {
        field: "month"   
    },
    tooltip: {
        visible: true,
        format: "{0}%"
    }
})