Ceiling on data

2 posts, 0 answers
  1. kristian
    kristian avatar
    1 posts
    Member since:
    Mar 2020

    Posted 30 Mar Link to this post

    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>

  2. Svetlin
    Admin
    Svetlin avatar
    382 posts

    Posted 01 Apr Link to this post

    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

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top