kendo ui chart example

kendo ui chart example





Code Sample for HTML 5

<div class="panel panel-primary">
    <div class="panel-heading">
        <h3 class="panel-title lg-11">Data Usage<a href="#"><i class="fa fa-refresh pull-right"></i></a> </h3>
    </div>
    <div class="panel-body">
        <div class="row">
              <div id="dataChart"></div>
        </div>
    </div>
</div>


Code Sample for jQuery

<script type="text/javascript">
    function dataUsageChart() {
        var dataSource = [2000, 4000, 3000, 7000, 10000, 11000, 14000, 14000, 12000, 20000];
        var category = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

        $("#dataChart").kendoChart({
            legend: {
                position: "right"
            },
            chartArea: {
                height: 200,
                width: 520
            },
            seriesDefaults: {
                type: "line",
                style: "smooth"
            },
            series: [{
                name: "Data",
                data: dataSource
            }],
            valueAxis: {
                labels: {
                    format: "{0} MB"
                    //font: "16px Verdana"
                },
                line: {
                    visible: true
                },
                axisCrossingValue: -10
            },
            categoryAxis: {
                categories: category,
                majorGridLines: {
                    visible: true
                }
            },
            tooltip: {
                visible: true,
                format: "{0}%",
                template: "#= series.name #: #= value #"
            }
        });
    }

    $(document).ready(function () {
        dataUsageChart();
    });
    $(document).bind("kendo:skinChange", dataUsageChart);
</script>


It might help you
http://www.telerik.com/aspnet-mvc/charts

ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Google Amazon and Flipkart Book Store!

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.
ASK Questions
SQL Server NodeJs TypeScript JavaScript Angular SQL Server My Book