No Categories Data Message (aka like .net grid's NoRecordsTemplate)

[Randy]

Windows Store Telerik Rad Components for HTML/WinJs v. 2013.2.611
(upgrading to newest Telerik controls is not an option at this point)

We have a stacked bar chart with 3 categories (3 months of data).
The business would like to show a message to the customer if one (or more) of the months have no data to chart.
See .jpg attachment and my code example below.

In the example, Sept 2013 has no data to chart (but it could be any of the 3 months or one or more of the months.
I know that your .NET Data grids have a "NoRecordsTemplate" and I was wondering if something similar is possible with your WinJS charts.

If it can be done, it would be nice to control where the "you have no transactions this month" message shows up (vertical alignment to bottom or center or top - don't know what the business wants yet, just that they want a message if possible.)

HTML

<div id="chartSpendCashFlow"></div>

JS

// Build the RadChart
var rawTelerikExampleData = "[{\"date\":\"September 2013\",\"scheduledIn\":0,\"scheduledOut\":0},{\"date\":\"August 2013\",\"scheduledIn\":0,\"scheduledOut\":176.84},{\"date\":\"July 2013\",\"scheduledIn\":560,\"scheduledOut\":851.45}]"
var rawTelerikExampleArray = JSON.parse(rawTelerikExampleData);

var _arrayMax = rawTelerikExampleArray.length - 1;

var newData = [];

for (var x = _arrayMax; x > -1 ; x--) {
    newData.push(rawTelerikExampleArray[x]);
}

var hubSpendDepositDataSeries1 = newData.map(function (item) {
    return item.scheduledIn;
});

var hubSpendWithdrawalDataSeries2 = newData.map(function (item) {
    return item.scheduledOut;
});

var hubSpendCashFlowCategoriesData = newData.map(function (item) {
    return item.date;
});

var chart = new Telerik.UI.RadChart(document.getElementById("chartSpendCashFlow"), {
    seriesDefaults: { type: "column" },
    series: [
        {
            data: hubSpendDepositDataSeries1, name: "Deposits", color: "#9EC457",
            labels:
            {
                font: "15px Verdana",
                color: "#000000",
                format: "+ ${0:N2}",
                visible: true
            }
        },
        {
            data: hubSpendWithdrawalDataSeries2, name: "Withdrawals", color: "#F8A72C",
            labels:
            {
                font: "15px Verdana",
                color: "#000000",
                format: "- ${0:N2}",
                visible: true
            }
        }
    ],
    valueAxis: [{
        name: 'deposits',
        labels: {
            visible:false
        },
        line: {
            visible: true,
            color:'gray'
        },
        majorGridLines: {
            visible: false
        },
        majorTicks: {
            size:0
        },
        minorGridLines: {
            visible: false
        }
    }],
    categoryAxis: {
        categories: hubSpendCashFlowCategoriesData,
        color: "#000000",
        labels: {
            font: "20px",
            color: "#000000"
        },
        majorTicks: {
            visible: false
        },
        minorTicks: {
            visible: false
        },
        line: {
            visible: true,
            color:'gray'
        }
    },
    tooltip: {
        visible: false,
    },
    plotArea: {
        visible:false
    },
    legend: {
        visible: false
    },

    theme: "light",
    background: "transparent"
});

Thanks!

[Tsvetina]

Hello Randy,

RadChart does not currently have such feature. In the upcoming Q3 release, there will be a new feature that allows you to display notes for certain points of the category and value axes that can be useful for such a scenario.

With the version that you use, you would need a work around. For example, replace zero values with very small ones, e.g. 0.1, so a label is displayed for the series (while the bar itself is too small to be visible). Then you can customize this label with a template that says there is no data. If you decide to try such approach and have any questions about the implementation, let us know.

Regards,
Tsvetina
Telerik

[Randy]

Thanks Tsvetina.