kendo charts

by kousei2040

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<ol>
    <li>
        <div class="chart-wrapper">
            <div id="chart1">Hello 01</div>
        </div>
    </li>
    <li>
        <div class="chart-wrapper">
            <div id="chart2">Hello 02</div>
        </div>
    </li>
</ol>
<div id="drillDown" class="chartSettingsModal"></div>

CSS

.chart-wrapper {
    height: 320px;
    cursor: move;
}
.chart-wrapper .k-chart {
    height: 300px;
    cursor: pointer;
}

JavaScript

var data = [{
    Value1: 45.67,
    Value2: 75,
    Value3: 1,
    Date: '2012-01-08',
    Date2: new Date('2012-01-08')
}, {
    Value1: 32.67,
    Value2: 7,
    Value3: 2,
    Date: '2012-02-08',
    Date2: new Date('2012-02-08')
}, {
    Value1: 78.67,
    Value2: 78,
    Value3: 3,
    Date: '2012-03-06',
    Date2: new Date('2012-03-06')
}, {
    Value1: 100.67,
    Value2: 96,
    Value3: 4,
    Date: '2012-04-07',
    Date2: new Date('2012-04-07')
}, {
    Value1: 120.67,
    Value2: 72,
    Value3: 7,
    Date: '2012-05-12',
    Date2: new Date('2012-05-12')
}, {
    Value1: 78.67,
    Value2: 62,
    Value3: 8,
    Date: '2012-06-14',
    Date2: new Date('2012-06-14')
}, {
    Value1: 96.67,
    Value2: 32,
    Value3: 9,
    Date: '2012-07-20',
    Date2: new Date('2012-07-20')
}, {
    Value1: 45.67,
    Value2: 15,
    Value3: 7,
    Date: '2012-08-23',
    Date2: new Date('2012-08-23')
}, {
    Value1: 45.67,
    Value2: 120,
    Value3: 6,
    Date: '2012-09-30',
    Date2: new Date('2012-09-30')
}, {
    Value1: 45.67,
    Value2: 78,
    Value3: 7,
    Date: '2012-10-07',
    Date2: new Date('2012-10-07')
}, {
    Value1: 45.67,
    Value2: 85,
    Value3: 9,
    Date: '2012-11-26',
    Date2: new Date('2012-11-26')
}, {
    Value1: 45.67,
    Value2: 95,
    Value3: 1,
    Date: '2012-12-07',
    Date2: new Date('2012-12-07')
}];

var dataSource1 = new kendo.data.DataSource({
    data: data
});
var getchartSeries = function () {
    var chartSeriesData = [];
    var val1Series = {
        type: "column",
        axis: "Total",
        field: "Value1",
        tooltip: {
            visible: true,
            template: "Highest: #= dataItem.Value2 # <br />Average: #= dataItem.Value1 # <br />Lowest: #= dataItem.Value3 #",
            color: "#000000"
        }
    };

    var val2Series = {
        type: "line",
        missingValues: "interpolate",
        field: "Value2",
        color: "#ffa000",
        dashType: "dash",
        axis:...