JSFiddle - React, Tailwind, and code Playground

by spnz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1007/styles/kendo.kendo.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1007/js/kendo.all.min.js"></script>
<div id="chart"></div>

JavaScript

var categories = ["Jan", "Feb", "March"];

var data = [
    [{
    "Month": "Jan",
    "Title": "Sales Made",
    "Count": 100},
{
    "Month": "Jan",
    "Title": "Refunds",
    "Count": 50}],
    [
    {
    "Month": "Feb",
    "Title": "Sales Made",
    "Count": 150},
{
    "Month": "Feb",
    "Title": "Refunds",
    "Count": 25}],
    [
    {
    "Month": "March",
    "Title": "Sales Made",
    "Count": 50},
{
    "Month": "March",
    "Title": "Refunds",
    "Count": 100}]
                    ];

var dataSource = new kendo.data.DataSource({
    data: data,
    group: {
        field: "Title",
        dir: "asc"
    }
});

dataSource.read();
var view = dataSource.view();
var chartSeries = [];

for (var groupIx = 0; groupIx < view[0].items.length; groupIx++) {
    var groupedMonth = view[0].items[groupIx];
    chartSeries.push({
        data: [
            totalForMonth(groupedMonth, "Sales Made"),
            totalForMonth(groupedMonth, "Refunds")

        ]  ,name:[groupedMonth[0].Title,groupedMonth[1].Title]});
}
console.log(chartSeries);
function totalForMonth(item, title) {
    for (var i = 0; i < item.length; i++) {
        if (item[i].Title == title) {
             return item[i].Count;
        }
    }
}
$("#chart").kendoChart({
    theme: "black",
    seriesDefaults: {
        type: "column"
    },
    tooltip: {
        visible: true
    },
    categoryAxis: {
        categories: categories
    },
    series: chartSeries
});