JSFiddle - React, Tailwind, and code Playground

by inikolova

HTML

<html>
<body>
    Hello
    <div id="chart"></div>
    <div id="my-k-grid">
    </div>
     
</body>
</html>

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();

});