JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.metro.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<label for="parking-filter-select">
    Select parking area filter</label>
<select id="parking-filter-select">
</select>
<p>
    <label for="chart-type">Chart type</label>
    <select id="chart-type"></select>
<p>
    <button onclick="doRefresh();">Refresh</button>
</p>
<p>
    <div id="chart-utilization">
    </div>
</p>

JavaScript

var usageData = [];
var chartTypes = [{type: "column"}, {type: "bar"}, {type: "line"}, {type: "area"}];

for (j = 0; j < 5; j++) {
    var data = [];
    for (i = 0; i < 12; i++) {
        data.push({
            Max: j + 1,
            Capacity: j + 1,
            Arriving: j + 1,
            Departing: j + 1
        });
    }

    usageData.push({
        text: j,
        value: j,
        Usage: data
    });
}

var sharableDS = new kendo.data.DataSource({ data: usageData[0].Usage});

$('#chart-type').kendoDropDownList({
    dataSource: chartTypes,
    dataTextField: "type",
    dataValueField: "type",
    change: function(e){
        var value = $('#chart-type').val();

        var chart = $('#chart-utilization').data("kendoChart");
        
        chart.options.seriesDefaults.type =value ; 
        for (var i = 0; i < chart.options.series.length; i++) {
            chart.options.series[i].type = value ;
        }
        chart.refresh();
    }
});
$('#parking-filter-select').kendoDropDownList({
    dataSource: usageData,
    dataTextField: "text",
    dataValueField: "text",
    change: function(e) {
        var value = $('#parking-filter-select').val();
        sharableDS.data(usageData[value].Usage);
    }
});


$('#chart-utilization').kendoChart({
    title: {
        text: "Parking utilization for week"
    },
    dataSource: sharableDS ,
    series: [{
        type: "column",
        field: "Max",
        name: "Max utilization"}],
    categoryAxis: {
        field: "Week"
    },
    tooltip: {
        visible: true,
        template: "${Max} of ${Capacity}"
    },
    legend: {
        visible: false
    }
});



window.doRefresh = function()
{
    //$('#chart-utilization').data("kendoChart").data(usageData[0].Usage);
    $('#chart-utilization').data("kendoChart").refresh();
}