JSFiddle - React, Tailwind, and code Playground

by inikolova

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.dataviz.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.web.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.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.dataviz.min.css">
    Hello
    <div id="chart"></div>
    <div id="my-k-grid">
    </div>

JavaScript

function createChart() {

    var iPercentageReviewed = 25;
    var batchTileReportChartData = [{
        id: 1,
        Type: "Reviewed",
        Percentage: iPercentageReviewed},
    {
        id: 2,
        Type: "Not Complete",
        Percentage: 100 - iPercentageReviewed}]
      var batchTileReportChartDataSource = new kendo.data.DataSource({
        data: batchTileReportChartData,
        schema: {
            model: {
                id: 'id'
            }
        }
    });

    $("#chart").kendoChart({
        dataSource: batchTileReportChartDataSource,
        series: [{
            type: 'pie',
            field: 'Percentage',
            categoryField: 'Type',
            padding: 0}],
        seriesColors: ["#00a813", "#BBB"],
        legend: {
            visible: true,
            position: "bottom",
            color: "#DDDDDD"
        }


    });
}

function createGrid() {
    $("#my-k-grid").kendoGrid({
        columns: [
            {
            field: "FirstName",
            title: "First Name"},
        {
            field: "LastName",
            title: "Last Name"}],
        dataSource: {
            data: [
                {
                FirstName: "Joe",
                LastName: "Smith"},
            {
                FirstName: "Jane",
                LastName: "Smith"}]
        },
        selectable: "multiple, row"
    });
}


$(document).ready(function() {

    // Initialize the chart with a delay to make sure
    // the initial animation is visible
    createChart();
    createGrid();

});