JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<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">
<label for="parking-filter-select">
    Select parking area filter</label>
<select id="parking-filter-select">
</select>
<p>
    <div id="chart-utilization">
    </div>
</p>
<p>
    <div id="chart-arriving">
    </div>
</p>
<p>
    <div id="chart-departing">
    </div>
</p>

JavaScript

var usageData = [];


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

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

$('#parking-filter-select').kendoDropDownList({
    dataSource: usageData,
    change: function(e) {
        var value = $('#parking-filter-select').val();

        var chart = $('#chart-utilization').data("kendoChart");

        chart.dataSource.data(usageData[value].Usage);
        chart.refresh();
    }
});


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


$('#chart-arriving').kendoChart({
    title: {
        text: "Parking arriving for week"
    },
    dataSource: {
        data: usageData[0].Usage
    },
    series: [{
        type: "column",
        field: "Arriving",
        name: "Arrivals"}],
    categoryAxis: {
        field: "Week"
    },
    tooltip: {
        visible: true
    },
    legend: {
        visible: false
    }
});

$('#chart-departing').kendoChart({
    title: {
        text: "Parking deparing for week"
    },
    dataSource: {
        data: usageData[0].Usage
    },
    series: [{
        type: "column",
        field: "Departing",
        name: "Departures"}],
    categoryAxis: {
        field: "Week"
    },
    tooltip: {
        visible: true
    },
    legend: {
        visible: false
    }
});