KendoUI Tester - Chart label rotation

by rodneyhickman

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/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.322/styles/kendo.datavis.min.css">
<div  >
    <div id='chart'  ></div>
</div>

JavaScript

jQuery(function() {

    var myData = [
        {
        "product1": 86.61,
        "product2": 85.23,
        "marketsegment": 80.17,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "4"},
    {
        "product1": 87.61,
        "product2": 84.23,
        "marketsegment": 81.12,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "3"},

    {
        "product1": 87.91,
        "product2": 85.53,
        "marketsegment": 81.57,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "4"},
    {
        "product1": 88.22,
        "product2": 85.23,
        "marketsegment": 81.90,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "4"},
    {
        "product1": 88.61,
        "product2": 86.13,
        "marketsegment": 79.17,
        "date": "Mar 2011",
        "surveyCountProduct1": "2",
        "surveyCountProduct2": "5"},

        ];

    jQuery('#chart').kendoChart({
        title: {
            text: "Overall Score out of 100",
            align: "left",
            font: "18px Arial, Verdana, sans-serif",
            color: "#444"
        },
        seriesDefaults: {
            type: "line",
            missingValues: "interpolate"
        },
        legend: {
            position: "bottom"
        },
        tooltip: {
            visible: true,
            template: "<b>#= series.name #</b><br/>#= dataItem.date #<br/>#= value #<br/>Survey Count= #= dataItem.surveyCountProduct1 #"
        },
        valueAxis: {
            min: 75,
            max: 95,
            plotBands: [{
                from: 75,
                to: 80,
                color: "#f5f5f5"},
            {
                from: 85,
                to: 90,
                color: "#f5f5f5"},
            {
                from: 95,
                to: 100,
                color: "#f5f5f5"}]
        },
       ...