<div id="chartscontainer" data-role="view" data-layout="inbox-overview-layout">
    <ul id="button-group" data-role="buttongroup" data-index="0" data-select="selectButton">
        <li data-icon="rewind"></li>
        <li data-icon="play"></li>
    </ul>
    <div data-role="view" id="inbox-liabilitychartdiv" data-init="inbox_liability_drawPieChart"
    data-show="inbox_liability_drawPieChart">
        <div id="inbox-liabilitychart"></div>
    </div>
    <div data-role="view" id="inbox-statementchartdiv" data-init="inbox_statement_drawPieChart"
    data-show="inbox_liability_drawPieChart">
        <div id="inbox-statementchart"></div>
    </div>
</div>
<script>
    function selectButton() {
        alert("in select" + this.current().index());

        var liabilityView = this.element.find("#inbox-liabilitychartdiv");
        var statementView = this.element.find("#inbox-statementchartdiv");
        if (this.current().index() == 1) {
            liabilityView.hide();
            statementView.show();


        } else {
            statementView.hide();
            liabilityView.show();

        }
    }


    function inbox_liabilitypieConfig(id, data, field, categoryField) {

        //alert("in charts" + dumpObject(data));
        $("#" + id).kendoChart({
            theme: $(document).data("kendoSkin") || "default",
            //title: {
            //text: "Your Spending"
            // },
            legend: {
                position: "right",
                //offsetY: -100,
                //offsetX: -50,                
            },
            seriesDefaults: {
                labels: {
                    template: "${ category }",
                    visible: true
                }
            },
            dataSource: {
                data: data
            },
            series: [{
                type: "pie",
                field: field,
                categoryField: categoryField
            }],
            tooltip: {
                visible: true,
                template: "#= kendo.format('{0:P}', percentage)#"
            },
            theme: 'Metro',
            //plotArea: {
            // margin: {
            // left: 5
            //}
            //}
        });
    }

    function inbox_liability_drawPieChart() {
        inbox_liabilityViewModel.inboxLiabilitySource.read();
        var data = inbox_liabilityViewModel.inboxLiabilitySource.data();
        inbox_liabilitypieConfig("inbox-liabilitychart", data, "currentCharges", "nickName");
    }
</script>