Help With Stacked Bar Chart

[Randy]

I have messed around a bit with your win 8 examples app and some other threads here, but I can't get it all put together.
At best I'm getting 2 bars per month instead of one bar per month with the 2 dollar amounts stacked on top of each other.

I have a data set with 6 records, each one is a month record, and each month record contains 2 dollar values..
For each month in the data set, I want one value stacked over the other value (see attached image "WhatTelerikStackedChartNeedsToLookLike.jpg")

(1)
From my provided data set, the month is in field name "getStatementDateAbbreviatedMonthName".
The months are already sorted ahead of time, so I want the months to stay in the order already provided by the data set (do not have the chart sort for me.)

(2)
The bottom of the stack for each month should be the light purple color and is in each data set record under the field name "outstandingBalance".

(3)
The top of the stack for each month should be the dark purple color and is in each data set record under the field name "newSpending".

(4)
And if you could please help with this too: Mousing over the tooltip for each stacked month, we need to show a summary (see attached image "whattelerikstackedcharttooltipneedstolooklike.jpg")
The tooltip date is in each data set record under the field name "statementDate", "new spending" field is "newSpending", "Past balance total" is "outstandingBalance", & the bottom total is the field "totalBalance".

(5)
Here is my dataset for you:

var stackedChartSeriesRawData = "[{\"newSpending\":1221.34,\"outstandingBalance\":14984.41,\"totalBalance\":16205.75,\"statementDate\":\"2012-11-08T08:00:00.000Z\",\"includeInAverageBalance\":true,\"getStatementDateAbbreviatedMonthName\":\"Nov\"},{\"newSpending\":203.76,\"outstandingBalance\":15344.75,\"totalBalance\":15548.51,\"statementDate\":\"2012-12-09T08:00:00.000Z\",\"includeInAverageBalance\":true,\"getStatementDateAbbreviatedMonthName\":\"Dec\"},{\"newSpending\":231.76,\"outstandingBalance\":15548.51,\"totalBalance\":15780.27,\"statementDate\":\"2013-01-09T08:00:00.000Z\",\"includeInAverageBalance\":true,\"getStatementDateAbbreviatedMonthName\":\"Jan\"},{\"newSpending\":214.66,\"outstandingBalance\":15780.27,\"totalBalance\":15994.93,\"statementDate\":\"2013-02-06T08:00:00.000Z\",\"includeInAverageBalance\":true,\"getStatementDateAbbreviatedMonthName\":\"Feb\"},{\"newSpending\":231.37,\"outstandingBalance\":15994.93,\"totalBalance\":16226.3,\"statementDate\":\"2013-03-08T08:00:00.000Z\",\"includeInAverageBalance\":true,\"getStatementDateAbbreviatedMonthName\":\"Mar\"},{\"newSpending\":1102.65,\"outstandingBalance\":15365.3,\"totalBalance\":16467.95,\"statementDate\":\"2013-04-08T07:00:00.000Z\",\"includeInAverageBalance\":true,\"getStatementDateAbbreviatedMonthName\":\"Apr\"}]";
var stackedChartSeriesData = JSON.parse(stackedChartSeriesRawData);

And here is my starter javascript that creates the chart using some formatting we already know we want to have.
Thank you so much in advance,
Randy

// Build The RadChart
var chartStatementHistoryStacked = new Telerik.UI.RadChart(document.getElementById("chartStatementHistory"), {
    dataSource: {
        data: stackedChartSeriesData
    },
    series: [
        {
            type: "column",
            stacked: true,
            field: "totalBalance",
            color: "#9C3987",
            labels: {
                visible: true,
                format: "${0}",
                font: "12px Verdana",
                color: "#000000",
                weight: "normal",
                template: "#=vw.Formatter.Currency.toCurrency(value)#"
            }
        }
    ],
    categoryAxis: {
        field: "getStatementDateAbbreviatedMonthName",
        color: "#000000",
        labels: {
            font: "12px Verdana",
            color: "#000000"
        },
        majorTicks: {
            size: 0,
            visable: false
        },
        minorTicks: {
            size: 0,
            visable: false
        }
    },
    valueAxis: {
        field: "totalBalance",
        color: "#9C3987",
        labels: {
            font: "12px Verdana",
            color: "#000000",
            format: "${0}"
        },
        majorGridLines: {
            color: "#FFFFFF",
            width: 0,
            visable: false
        },
        minorGridLines: {
            color: "#FFFFFF",
            width: 0,
            visable: false
        },
        visible: false
    },
    tooltip: {
        visible: true,
        labels: {
            font: "12px Verdana",
            format: "${0}"
        }
    },
    plotArea: {
        border: {
            width: 0,
            color: "#000000"
        }
    },
    legend: {
        visible: false
    },
    seriesColors: ["#9C3987", "#D9B2D6"],
    theme: "light",
    background: "transparent"
});

p.s. You'll probably need to temporarily get rid of our currency formatter - just know that we normally want formatted dollar amounts $0.00
template: "#=vw.Formatter.Currency.toCurrency(value)#"

[Tsvetina]

Hi Randy,

I tested your code and noticed two problems:

1) You have only one series defined, I am not sure if you didn't just miss copying it. Anyway, you need to have separate series defined for the two fields.

2) You defined the property as stacked, while its correct name is stack. If you add a second series and set stack:true to both series, they will display as you require.

series: [
    {
        type: "column",
        stacked: true,
        field: "outstandingBalance",
        color: "#D8B3D5",
        labels: {
            visible: true,
            font: "12px Verdana",
            color: "#000000",
            weight: "normal",
            template: "$#=value.toFixed(2)#",
            padding: -30
        },
        stack: true,
    },
    {
        type: "column",
        stacked: true,
        field: "newSpending",
        color: "#9C3987",
        labels: {
            visible: true,
            font: "12px Verdana",
            color: "#000000",
            weight: "normal",
            template: "$#=value.toFixed(2)#"
        },
        stack: true
    }
]

I also adding padding for the labels of the bottom series, so they do not overlap with those of the top series.

As far as tooltips are concerned, you can use a template function for them and return string containing HTML tags that format the text. The function will receive as an argument and object which contains the whole data item, corresponding to the current data point. This means that you can access all data fields from each record:

tooltip: {
    visible: true,
    template: labelTemplate
}

function labelTemplate(data) {
    var template = ["<strong>" + data.category + ", " + new Date(data.dataItem.statementDate).getFullYear() + " statement</strong>",
    "<hr/><p>New spending: " + data.dataItem.newSpending + "</p>",
    "<p>Past balance total: " + data.dataItem.outstandingBalance + "</p>",
    "<p>   " + data.dataItem.totalBalance + "</p>"].join("");
    return template;
}

You can check the attached image for the result of my modifications. I am also attaching a runnable sample containing the final implementation. Let us know if you have further questions about this scenario.

Additionally, for runnable samples of different scenarios with the controls, you can check our brand new developer SDK, available on GitHub:

win8-html-sdk

They are mostly based on the documentation but are complete runnable projects, so they are easier to try locally.

Regards,
Tsvetina
the Telerik team

[Randy]

As usual, you rock Tsvetina!
I'm back from vacation now, which is why I'm replying so late as "answered".
I see the series structure and the stacked vs. stack.
Thanks for the template for the tooltip too.
You are a big help for us on this, our first Win 8 project!
Randy