I am using Angular JS + Kendo UI and OData. I am creating gift order charts by Year, Month, Week and Day. We have the gift purchase date as well as the date that the gift cards were redeemed. For example, in the Month chart I want to show for THIS month, what gift cards were purchased and which were redeemed.
The data looks like this:
{
odata.metadata: "http://.../odata/$metadata#Order",
odata.count: "1",
value:
[
{
OrderID: 5,
MerchantID: 3,
Amount: "100.0000",
PurchaseDate: "2015-04-29T13:23:01.487",
PurchaserZipCode: "02050",
RecipientName: "Test",
Redeemed: true,
RedeemedDate: "2015-08-06T14:50:11.37"
}
]
}
//set the bar chart configuration
$scope.chartConfig = {
legend: {
position: "top"
},
seriesDefaults: {
type: "column",
labels: {
visible: true,
format: "${0}"
}
},
seriesColors: ["#af8520", "#6c5644", "#612751", "#e47f8f", "#eba1ad",
"#009bd7", "#26aadd", "#4db9e3", "#73c8e9", "#99d7ef"],
series: [
{
name: "Purchased",
field: "Amount",
aggregate: "sum",
categoryField: "PurchaseDate"
},
{
name: "Redeemed",
field: "Amount",
aggregate: "sum",
categoryField: "RedeemedDate"
}
],
valueAxis: {
labels: {
format: "${0}"
},
line: {
visible: true
},
axisCrossingValue: 0
},
tooltip: {
visible: true,
format: "${0}",
template: "#= series.name #: $#= value #"
}
};
The HTML element sets the base unit:
<div id="monthchart" k-data-source="monthoforders" kendo-chart k-options="chartConfig" k-category-axis="{ baseUnit: 'weeks'}"> </div>
Unfortunately, the result isn't quite what I want (see attached grid). I only want to show results for this month (i.e. August 2015), so I should only see the redeemed amount bar (since it was redeemed in August), not the purchase bar (because that was in April).
I feel like I am missing something easy in how to tell the chart to only show series data for a particular period (i.e. for the month of August 2015). Is this possible? I was thinking if I could set a min date range it would ignore the purchase data and still show the redeemed data?
Thanks in advance for your time,
Jayme