Kendo Grid and Chart

by Erik Zanker

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css">
<ul class="nav nav-tabs">
    <li class="active"><a data-target="#chart1tab" data-toggle="tab">Chart 1</a>

    </li>
    <li><a data-target="#chart2tab" data-toggle="tab">Chart 2</a>

    </li>
    <li><a data-target="#chart3tab" data-toggle="tab">Chart 3</a>

    </li>
</ul>
<div id="tabContainer" class="tab-content">
    <div class="tab-pane fade in active" id="chart1tab">
        <div id="chart1"></div>
    </div>
    <div class="tab-pane fade in" id="chart2tab">
        <div id="chart2"></div>
    </div>
    <div class="tab-pane fade in" id="chart3tab">
        <div id="chart3"></div>
    </div>
</div>

JavaScript

function CreateCharts(){
var sharedDataSource = new kendo.data.DataSource({
    data: [{
        id: 1,
        value: 10,
        item: "Item1"
    }, {
        id: 2,
        value: 12,
        item: "Item2"
    }, {
        id: 3,
        value: 15,
        item: "Item3"
    }, {
        id: 4,
        value: 18,
        item: "Item4"
    }, {
        id: 5,
        value: 22,
        item: "Item5"
    }, {
        id: 6,
        value: 11,
        item: "Item6"
    }],
    schema: {
        model: {
            id: "id",
            fields: {
                id: {
                    type: "number",
                    editable: false
                },
                value: {
                    type: "number"
                },
                item: {
                    type: "string"
                }
            }
        }
    }
});


$("#chart1").kendoChart({
    dataSource: sharedDataSource,
    autoBind: false,
    theme: "Bootstrap",
    categoryAxis: {
        field: "item"
    },
    series: [{
        field: "value",
        name: "Value"
    }]
});

$("#chart2").kendoChart({
    dataSource: sharedDataSource,
    autoBind: false,
    theme: "Metro",
    categoryAxis: {
        field: "item"
    },
    series: [{
        field: "value",
        name: "Value"
    }]
});

$("#chart3").kendoChart({
    dataSource: sharedDataSource,
    autoBind: false,
    theme: "Black",
    categoryAxis: {
        field: "item"
    },
    series: [{
        field: "value",
        name: "Value"
    }]
});

sharedDataSource.read();
    
}

$(document).ready(function() {
    
    CreateCharts();

    $(window).on("resize orientationchange", function () {        
        kendo.resize($("body"));
    });
    
    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        kendo.resize($("body"));
    });
    
});