Bar Chart Min Date Range

[Jayme]

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

 

 

[Iliana Dyankova]

Hi Jayme,

You could set categoryAxis range via its min / max values. As an example: 

//....
categoryAxis: {
    type: "date",
    baseUnit: "weeks",
    min: new Date("2015-08-03"),
    max: new Date("2015-08-31")
}

Regards,
Iliana Nikolova
Telerik

 

 

[Jayme]

That is exactly what I was looking for - thank you!  

The charts have so much great capability that makes it easy and fast to consume API data without having to add new methods to an API - information like what you have above should be added to your documentation if it is not in there already (maybe in a manipulating data or scenarios area?).

Thanks again!

[Iliana Dyankova]

Hi Jayme,

Both min / max options are documented - check the following links: 
- categoryAxis.min
- categoryAxis.max

Regards,
Iliana Nikolova
Telerik