Ceiling on data

[kristian]

I have a chart, where i need to present data within a certain range.

I have used the max property, to set the top ceiling of the chart.

My issue is, that i want to visualize the points that exceeds the the max limit, as points on the very top of the chart, but with max they are just not rendered (or outside the chart).

I have been able to render them at the top of the chart, by mutating the data before feeding it to the chart, but my tooltips now obviously show the mutated value, instead of the original.

Because that tooltips only can accept simple data types, i am not able to provide them with a "display-value" and "real-value".

Im running out of ideas, do any of yo, with more experience with kendo, have an idea of how i can achieve this?

 

Here is some code, im happy to provide more detail if needed:

<kendo-chart class="septoriaChart" [transitions]="false" [categoryAxis]="categoryAxis" [valueAxis]="valueAxis" (render)="onRender($event)"
(legendItemClick)="$event.preventDefault()" (legendItemHover)="$event.preventDefault()">
<kendo-chart-tooltip *ngFor="let data of observed">
<ng-template kendoChartSeriesTooltipTemplate let-value="value" let-category="category" >
{{category | dateFormat}}
<br /> {{data.accumulatedWetHours}} {{'common.unitType.hours' | translate }}
</ng-template>
</kendo-chart-tooltip>
<kendo-chart-legend position="bottom" orientation="horizontal" [item]="{ visual: legendItemVisual }"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item type="line" color="#4E808D" name="{{'septoriaChart.observed' | translate}}" [markers]="seriesMarkers"
[data]="observedWithCeiling" field="accumulatedWetHours" categoryField="dateDay">
</kendo-chart-series-item>
<kendo-chart-series-item type="line" color="#4E808D" name="{{'septoriaChart.forecast' | translate}}" [markers]="seriesMarkers"
[data]="forecast" field="accumulatedWetHours" categoryField="dateDay" dashType="dash">
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>

[Svet]

Hi Kristian,

Thank you for the provided details.

As far as I understand the set max property is on the value axis. If that is the case, if some of the series points exceed that max value then it is expected they are visualized off the chart. What could be done is to set the [pannable] option of the chart to true. It will allow the user to drag the chart plot-area and to see the outliers. Please check the following example demonstrating this behavior:

https://stackblitz.com/edit/angular-gcbr4p?file=app/app.component.ts

What else could be done is to set the [type] property of the value axis to be "log". That will allow the value axis to display its labels in a logarithmic way which allow to visualize the outliers:

https://stackblitz.com/edit/angular-gcbr4p-rd4kam?file=app/app.component.ts

It is also possible to modify the series data so that there are no values that exceed it:

https://stackblitz.com/edit/angular-wcabvf?file=app/app.component.ts

In this example the max value is set to 9. The series data is mapped as follows:

export class AppComponent {
  public series: any[] = [{
    name: "India",
    data: [3.907, 7.943, 7.848, 9.284, 9.263, 9.801, 3.890, 8.238, 9.552, 6.855].map(i => i > 9 ? 9 : i)
  }, {
    name: "Russian Federation",
    data: [4.743, 7.295, 7.175, 6.376, 8.153, 8.535, 5.247, -7.832, 4.3, 4.3]
  }, {
    name: "Germany",
    data: [0.010, -0.375, 1.161, 0.684, 3.7, 3.269, 1.083, -5.127, 3.690, 2.995]
  },{
    name: "World",
    data: [1.988, 2.733, 3.994, 3.464, 4.001, 3.939, 1.333, -2.245, 4.339, 2.727]
  }];
  public categories: number[] = [2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011];
}

and that allows to demonstrate the outliers on top of the chart. However that approach modifies the actual data of the Chart.

Please check the suggestions and let me know in case I am missing something or if further assistance is required for this case. Thank you.

Regards,
Svetlin
Progress Telerik