This is a migrated thread and some comments may be shown as answers.

Bar Chart Min Date Range

3 Answers 92 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Jayme
Top achievements
Rank 1
Jayme asked on 19 Aug 2015, 01:59 PM

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

 

 

3 Answers, 1 is accepted

Sort by
0
Iliana Nikolova
Telerik team
answered on 21 Aug 2015, 12:11 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Jayme
Top achievements
Rank 1
answered on 21 Aug 2015, 02:11 PM

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!

0
Iliana Nikolova
Telerik team
answered on 25 Aug 2015, 12:34 PM
Hi Jayme,

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

Regards,
Iliana Nikolova
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Jayme
Top achievements
Rank 1
Answers by
Iliana Nikolova
Telerik team
Jayme
Top achievements
Rank 1
Share this question
or