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 class="selectorclass_group1">
    <div id="ctl00_ContentPlaceHolder1_ucMonth_ctl00_divChart" class="selectorclass_group1" ></div>    
<div/>

<div style="display:none;" class="selectorclass_group1" >
    <div id="ctl00_ContentPlaceHolder1_ucMonth2_ctl00_divChart"  ></div>
</div>
    
<div style="display:none;" class="selectorclass_group1" >
    <div id="ctl00_ContentPlaceHolder1_ucMonth2_ctl02_divChart"  ></div>
</div>
    
<div style="display:none;" class="selectorclass_group1" >    
    <div id="ctl00_ContentPlaceHolder1_ucMonth2_ctl03_divChart"  ></div>
</div>    
    
<div style="display:none;" class="selectorclass_group1" >
    <div id="ctl00_ContentPlaceHolder1_ucMonth2_ctl05_divChart"  ></div>
</div>
  
<div style="display:none;" class="selectorclass_group1" >
    <div id="ctl00_ContentPlaceHolder1_ucMonth2_ctl06_divChart"  ></div>
</div>

JavaScript

jQuery('#ctl00_ContentPlaceHolder1_ucMonth_ctl00_divChart').kendoChart({
    title: {
        text: "Overall Score out of 100",
        align: "left",
        font: "18px Arial, Verdana, sans-serif",
        color: "#444"
    },
    seriesDefaults: {
        type: "line",
        missingValues: "interpolate"
    },
    transitions: false,
    legend: {
        position: "bottom"
    },
    valueAxis: {
        min: 70,
        max: 80,
        plotBands: [{
            from: 70,
            to: 75,
            color: "#f5f5f5"},
        {
            from: 80,
            to: 85,
            color: "#f5f5f5"}]
    },
    series: [{
        name: "eClinicalWorks EMR (Over 75 Physicians)",
        color: "#004990",
        width: 1,
        markers: {
            background: "#004990"
        },
        data: [76.02, 76.26, 75.9, 77.43, 76.55, 75.83, 75.72, 74.08, 75.35, 75.71, 75.28, 75.58, 76.11]},
    {
        name: " Ambulatory EMR (Over 75 Physicians)",
        color: "#da7633",
        width: 1,
        markers: {
            background: "#da7633"
        },
        data: [73.81, 73.52, 73.59, 73.49, 73.41, 73.51, 73.72, 73.27, 74.23, 73.99, 73.97, 73.83, 73.79]}],
    categoryAxis: {
        labels: {
            rotation: -45,
            step: 1,
            skip: 0
        },
        categories: ["Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec", "Jan - 2012", "Feb", "Mar"]
    }
});
jQuery('#ctl00_ContentPlaceHolder1_ucMonth2_ctl00_divChart').kendoChart({
    title: {
        text: "Sales & Contracting",
        align: "left",
        font: "18px Arial, Verdana, sans-serif",
        color: "#444"
    },
    seriesDefaults: {
        type: "line",
        missingValues: "interpolate"
    },
    transitions: false,
    legend: {
        position: "bottom"
    },
    valueAxis: {
        min: 75,
        max: 85,
        plotBands: [{
            from: 75,
            to: 80,
            color: "#f5f5f5"},
        {
            from:...