JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.dataviz.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
 <div id="listview" data-role="listview" data-selectable="true" data-bind="source: listSource" data-template="template"></div>

<script type="text/x-kendo-tmpl" id="template">
    <div>
        #= Name #<Br/>
        <div style="height: 400px;" class="chart" 
            data-role="chart" 
            data-series="[{ field: 'Hours' }]" 
            data-category-axis="{ field: 'Label' }" 
            data-series-defaults="{ type: 'column' }" 
            data-bind="source: Activity">
        </div>
    </div>
</script>

JavaScript

var viewModel = kendo.observable({
    listSource: [
        { Name : "Employee 1" },
        { Name : "Employee 2" }
    ],
    Activity : [
      { Label : "Jan" , Hours: 10},
      { Label : "Feb" , Hours: 5}
    ]
});

kendo.bind(document.body.children, viewModel);
kendo.bind($(".chart"), viewModel);