JSFiddle - React, Tailwind, and code Playground

by OnaBai

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.blueopal.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.aspnetmvc.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.web.min.js"></script>
<div id="example" class="k-content">
<div id="treeview" class="demo-section"></div>

    <div id="myChart"></div>
</div>

JavaScript

var tree= $("#treeview").kendoTreeView({
    checkboxes: {
        checkChildren: true
    },
    dataSource: [{
        
        id: 2, text: "select all", expanded: true,  items: [
            { id: 3, text: "closeA"  },
            { id: 4, text: "closeb"  },
            { id: 5, text: "closec" },
             { id: 6, text: "closec" },
             { id: 7, text: "closec" }
        ]
    }]
}).data("kendoTreeView");

             

function updateChks(){
    var checkboxes = $('#treeview input:checkbox');
    var selected = checkboxes.filter(':checked');
    checkboxes.not(selected).prop('disabled', selected.length > 1)
}

$('#treeview').on('click', 'input:checkbox', updateChks);




var series = [{
    name: "Close",
    field: "closeA",
    axis: "A"
},
              
              {
                  name: "Close",
                  field: "closeb",
                  axis: "B"
              },
              {      name: "Close",
               field: "closec",
               axis: "B"
              }];

function redrawChart () {
    var chart = $("#myChart").data("kendoChart");
    
    var checkedSeries = [];
    
    $("#treeview").find(":checked").each(function() {
        var nodeText = $(this).parent().parent().text();
        
        $.each(series, function(index, series) {
            if (series.field == nodeText) {
                checkedSeries.push(series);
            }
        });
    });
    
    chart.options.series = checkedSeries;
    chart.refresh();
};

$("#treeview").on("change", redrawChart);

var tmpData2 = [
    {
        "date": new Date(2012, 6, 6, 11, 46, 00),
        "closeA": 33,
         "closeb": 243,
         "closec": 405,
        "symbol": "2. AAPL",
        "axis": "A",
        "signal": "A33"
    },
    {
        "date": new Date(2012, 6, 7, 11, 46, 00),
        "closeA": 382.2,
          "closeb": 345,
         "closec": 234,
        "symbol": "2. AAPL",
        "axis": "A",
        "signal": "A28"
    },
    {
       ...