sparkline of type column in grid

[Bob]

I have a call to my api as follows:

getEntitiesForKendo() {
    this.gridLoading = true;
    this._kendoGridService.getEntities(this.gridSettings.state)
        .subscribe((data) => {
            data.data.forEach((d) => {
                d.creationTime = new Date(d.creationTime);
                d.warnings = d.warnings.split(',').map(Number);
            });
            this.gridData = data;
            this.getOrganisationUnits();
            this.gridLoading = false;
        });
}

In my grid I have two sparkline charts, the pie chart is working, the column chart is not.  Here is my code:

<kendo-grid-column field="carePlanSectionsForReviewCount" title="{{ l('CarePlanReviews')}}" class="text-center" width="120"
    media="(min-width:720px)" [filterable]="false">
    <ng-template kendoGridCellTemplate let-dataItem>
        <kendo-sparkline [chartArea]="{background: ''}" [data]="[dataItem.carePlanSectionsForReviewTodayCount, dataItem.carePlanSectionsOverdueCount, dataItem.carePlanSectionsReviewedCount]"
            style="width:30px; height:30px;" [seriesColors]="['#ffb822', '#f4516c', '#34bfa3']" type="pie">
        </kendo-sparkline>
    </ng-template>
</kendo-grid-column>
<kendo-grid-column field="warningCount" title="{{ l('NcWarnings')}}" class="text-center" width="120" media="(min-width:720px)"
    [filterable]="false">
    <ng-template kendoGridCellTemplate let-dataItem>
        <kendo-sparkline [chartArea]="{background: ''}" [data]="[dataItem.warnings]">
        </kendo-sparkline>
        {{dataItem.warnings | json}}
        <!-- {{dataItem.warningCount}} -->
    </ng-template>
</kendo-grid-column>

The results can be seen in the attached file.  The array seems good, why does the sparkline for the warnings column not display?

[Dimiter Topalov]

Hello Bob,

The issue is most likely caused by wrapping the dataItem.warnings property (that already represents an array) in another array:

[data]="[dataItem.warnings]"

... while the Chart's data property should be bound to the dataItem.warnings property directly, i.e.:

<kendo-sparkline [data]="dataItem.warnings" type="column">

If you need the Sparkline to be of type bar/column, you can specify this via the "type" property.

Here is an example demonstrating the Sparkline rendered as expected in a Grid column cell template:

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

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Bob]

Hi Dimiter,

It did, indeed help.  A simple typo which I should have found myself!  For anyone interested in the final code, here we go:

<kendo-grid-column
    field="warningCount"
    title="{{ l('NcWarnings')}}"
    class="text-center"
    width="120"
    media="(min-width:720px)"
    [filterable]="false">
    <ng-template kendoGridCellTemplate let-dataItem>
        <kendo-sparkline
            [chartArea]="{background: ''}"
            [data]="dataItem.warnings"
            [seriesColors]="['#f4516c']"
            type="bar"
            style="width:80px; height:30px;">
        </kendo-sparkline>
    </ng-template>
</kendo-grid-column>

The attached file shows the result.

Cheers,
Bob