StockChart options

[Tayger]

Hello

I'm collecting user actions on day level and would like to display those in a StockChart (column mode). This works all fine in StockChart but I struggle with these questions:

• With the scroll wheel the chart can go down to daytime that I won't display. Is it possible to restrict/block daytime display so that 'day' is the lowest possible date level? (baseUnit on "days" doesn't block daytime)
• Is it possible to not display (hide) days in the time axis on which the user hasn't done any actions?
• Is it possible to dynamically sum up values moving to next higher time period? Example: User has these actions amount by date (yyyymmdd):
  20190103 : 12
  20190115 : 24
  20190123 : 7
  On day view the user would see in StockChart the values 12, 24, 7. When the user scrolls into month view he should see the amount of actions in January 2019: 43

I was trying to find these options in the API documentation of StockChart but couldn't find these options. Maybe possible in combination(?).

Regards

[Nikolay]

Hello Farai,

Thank you for the provided information about your case.

Kendo UI Chart supports custom panning and zooming. Please review the below demo for more details:

• https://demos.telerik.com/kendo-ui/bar-charts/custom-pan-and-zoom

You could achieve hiding the label for the columns with no data by setting a filter to the DataSource:

dataSource:{
              data: data,
              filter:{ field: "nuclear", operator: "isgreaterthan", value: "0" }
            },

You could see this approach implemented in the below Dojo demo:

• https://dojo.telerik.com/ATAxiWIr/5

Regarding your last question, if I have understood it correctly, you need to have your bar's data automatically recalculated on zoom in and out. This is actually implemented internally and is coming with the chart initialization. You can test it at the below demo:

• https://demos.telerik.com/kendo-ui/financial/panes

Hope the above helps and if there is anything else, we could help with, please contact us back.

Regards,
Nikolay
Progress Telerik

[Tayger]

Hello Nikolay

Sorry for my imprecise description and thank you for your answers. I display the bar slider from the StockChart and above that a chart based on "series" in "column" mode. You can see the initial view in the attachment "fullrange.png".

Unwanted time range

As soon as I bring one navigation slider close to the other one (to reduce the time range) the time in the upper area (series) switches to daytime. You can see this behaviour in the attached image "rangereduce.png" (00:00, 06:00, etc.). Here I would like to set the lowest time display range to "day" (1th Dec, 2nd Dec, etc.). I tried to handover no daytime (only date) in my dataSource so that the StockChart might realise not to use any time display but then its defaulted/played at 00:00:00.
Beside of bringing the navigation slider together the switch to unwanted daytime display is also possible by using the mouse wheel on the upper column char. 

Auto aggregation depending on displayed range

I assume that works inside the navigation area (where the two silders are) out of the box. I don't have enough data to see that but assume it will work. I seems it doesn't do the calculation in the upper column chart ("series"). The solution here was to add aggregate: "sum" in that "series". Then it works like a charm

Filter data

Here I ment to filter (remove) dates (not data from the dataSource): If the user has done no actions on a certain date there will be no records for that date in the dataSource and therefore this date should not be dispayed in the "series" with the column bars. The idea here is to display only dates on which the user has done some amount actions (represented by column bars).

 

I was not aware of the panning/zooming (example) which seems to cover my needs very well. I try to work with that before finding a solution within StockChart.

Thanks and Regards

[Tayger]

In between I've found a solution to block unwanted time groups based on documentation.

This will not show/scroll to : hours and below:

baseUnit: "fit",
baseUnitStep: "1",
autoBaseUnitSteps: {
    milliseconds: [0],
    seconds: [0],
    minutes: [0],
    hours: [0],
    days: [1],
    weeks: [1],
    months: [1],
    years: [1]

 

 

[Georgi]

Hello,

You could remove some of the dates labels by using the skip and step settings of the category axis.

Furthermore, you could switch to axis of type `category` (I assume you are currently using date) and manually populate the categories.

e.g.

                categoryAxis: {
                    categories: [/*category dates here*/],

I hope this helps.

Regards,
Georgi
Progress Telerik

[Tayger]

Thank you for the hints! Using skip and step is a bit clunky if you have hundreds of hundreds of entries over years (and same amount of gaps in between to skip or step). 

If the category is defined as date (type) or is just a date (the chart seems to recognise that) then it uses the date behaviour in the categoryAxis and fills up the whole date range (whether there is a value to display for a date or not). On the other hand the date zooming is great going through periods (year, month, week, ...). 
Filling up the categoryAxis with non date values (f.e. '2019-03-22') I have the wanted effect of no gaps in between but zooming cannot switch to to another type of label display (year, month, etc.)

[Nikolay]

Hello Farai,

Indeed, that is correct. When setting an axis of type `date` you would have the zooming working as expected but not when the axis is of type `category`. The default typed categories are a sequence of strings that are not chronologically connected and do not connect with each other. So it is not possible to provide the zooming you would have when setting the `date` axis type.

I would recommend you considering the Kendo UI chart with custom panning and zooming. Here you could specify a minimum and a maximum number of visible items on zoom in and out.

If there is anything else, we could help with, please contact us back.

Regards,
Nikolay
Progress Telerik