Line chart

by anup1986

HTML

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

CSS

#wrap {
    margin: 50px;
}

JavaScript

$(document).ready(function () {
    function addDays(daysToAdd) {
        var today = new Date(),
            newDate = new Date();

        newDate.setDate(today.getDate() + daysToAdd);
        var year = newDate.getFullYear(),
            month = (newDate.getMonth() + 1 < 10) ? '0' + (newDate.getMonth() + 1) : (newDate.getMonth() + 1),
            day = (newDate.getDate() < 10) ? '0' + newDate.getDate() : newDate.getDate();

        return year + '-' + month + '-' + day;
    };
    
    var categories = [
        addDays(-6),
        addDays(-5),
        addDays(-4),
        addDays(-3),
        addDays(-2),
        addDays(-1),
        addDays(0),
    ];

    var values = {
        name: 'Andreas',
        tooltip: {
			        visible: true,
			        template: "<b>Mood Score: </b>#= value #<br/><b>Mood: </b> #= dataItem.Name # "
			    },
        data: [{
            "Name": "Good",
                "DateReported": addDays(-7),
                "valueX": 75
        }, {
            "Name": "Good",
                "DateReported": addDays(-6),
                "valueX": 75
        }, {
            "Name": "Normal",
                "DateReported": addDays(-1),
                "valueX": 50
        }, {
            "Name": "Bad",
                "DateReported": addDays(0),
                "valueX": 25
        }]
    };

    var values2 = {
        name: 'Rikard',
        data: [{
            "Name": "Awesome!",
                "DateReported": addDays(-7),
                "valueX": 100
        }, {
            "Name": "Awesome!",
                "DateReported": addDays(-5),
                "valueX": 100
        }, {
            "Name": "Good",
                "DateReported": addDays(-3),
                "valueX": 75
        }, {
            "Name": "Awesome!",
                "DateReported": addDays(0),
                "valueX": 100
        }]
    };

    var valueAxisData = [{
        value: 5,
        label: {
            position: "outside",
            text:...