k-panelbar & k-chart

by valchev

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.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.metro.min.css">
<ul id="panelbar">
    <li>Chart
        <div id="chart"></div>
    </li>
    <li>
        Projects
        <ul>
            <li>New Business Plan</li>
            <li>
                Sales Forecasts
                <ul>
                    <li>Q1 Forecast</li>
                    <li>Q2 Forecast</li>
                    <li>Q3 Forecast</li>
                    <li>Q4 Forecast</li>
                </ul>
            </li>
            <li>Sales Reports</li>
        </ul>
    </li>
</ul>

CSS

#panelbar {
   width: 60%;
   margin: 0 auto;        
}

.k-tooltip {
    margin-left: -100px;
}

JavaScript

$("#chart").kendoChart({
    title: {
        text: "Internet Users"
    },
    legend: {
        position: "bottom"
    },
    seriesDefaults: {
        type: "column"
    },
    series: [{
        name: "World",
        data: [15.7, 16.7, 20, 23.5, 26.6]},
    {
        name: "United States",
        data: [67.96, 68.93, 75, 74, 78]}],
    valueAxis: {
        labels: {
            format: "{0}%"
        }
    },
    categoryAxis: {
        categories: [2005, 2006, 2007, 2008, 2009]
    },
    tooltip: {
        visible: true,
        template: "#= category # value: #= value # %"
    }
});

$("#panelbar").kendoPanelBar({
    expandMode: "single"
});