Telerik Forums
Kendo UI for Angular Forum
0 answers
81 views

Hello, 

This one is tough. 

I want to build something like this:

or:

An Alternative to Tree-Maps

 

This is my code:

<kendo-chart>
        <kendo-chart-series>
          <kendo-chart-series-item class="negative-toDo"
          type="bar"
          [gap]="0.5"
          [stack]="true"
          *ngFor="let item of negativeWorkflowsBarchartData"
          [data]="item.items"
          [name]="item.value"
          aggregate="count"
          field="workflowName"
          categoryField="project"
          >
          </kendo-chart-series-item>
          <kendo-chart-series-item class="positive-inProgress"
          type="bar"
          [stack]="true"
          *ngFor="let item of positiveWorkflowsBarchartData"
          [data]="item.items"
          [name]="item.value"
          aggregate="count"
          field="workflowName"
          categoryField="project"
          >
          </kendo-chart-series-item>
          <kendo-chart-series-item-tooltip format="Tasks count: {0}">
          </kendo-chart-series-item-tooltip>
        </kendo-chart-series>
        <kendo-chart-legend position="bottom" orientation="horizontal">
        </kendo-chart-legend>
      </kendo-chart>

 

And this is my output:

As you see I am duplicating series, I want to have one set (<kendo-chart-series-item class="negative-toDo") negative/ in the left side of the 0.

 

How I can make the count negative? can you help me, please, with the aggregate function that can make this happen?

 

 

Best regards,

Nazareth

 

Nazareth
Top achievements
Rank 1
 asked on 25 Aug 2021
1 answer
77 views

Hello, 

Hope that everyone is safe and well. 

I am developing an "Operations Dashboard", which consumes Kendo UI for Angular chart components to create different visualizations (bar charts, treemaps, data grid, KPIs).

All the visualizations need to retrieve the data from the same service, which at some point will be an internal API. For now, I am using a mock-up JSON file. 

Which is the best way to build this service? Can I use Kendo for jQuery DataSource? It will be compatible with my angular application and the Kendo UI charts?

Or should I explore other options for Angular?

 

Thanks!

 

 

1 answer
1.8K+ views

I want to reset the filter settings without making the call again. I need to do this because at the change of page I have to set the grid without filters but without call the function again because the data are the same

This is my component:

 
 gridData: GridDataResult;
  state: State = {
    skip: 0,
    take: 25
  };

  clearState: State = {
    skip: 0,
    take: 25
  };

  //DATASOURCE
  products: any[] = [];

  public dataStateChange(state: DataStateChangeEvent): void {
    this.state = state;
    this.gridData = process(this.products, this.state);
  }

public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter;
    this.products = filterBy(this.products, filter);
  }

public clearFilters() {
  this.state = this.clearState;
  this.gridData = process(this.products, this.clearState);
}

public getProducts(){
    this.myService.getData(year).subscribe(data => {
      this.products= data;
      this.gridData = process(data, this.state);
    });
}



                                    

    <kendo-grid
            [data]="gridData"
            [pageSize]="state.take"
            [skip]="state.skip"
            [sort]="state.sort"
            [filter]="state.filter"
            [sortable]="true"
            [pageable]="true"
            [filterable]="true"
            [selectable]="true"
            [resizable]="true"
            (filterChange)="filterChange($event)"
            (dataStateChange)="dataStateChange($event)">
                    <ng-template ngFor [ngForOf]="columns" let-column>
                        <kendo-grid-column
                            width="{{column.width}}"
                            format="{{column.format}}"
                            filter="{{column.filter}}"
                            field="{{column.value}}"
                            title="{{column.title}}">
                        </kendo-grid-column>
                    </ng-template>
   </kendo-grid>

if I call the clearFilters function the filters are reset but the arrows remain on the previously filtered columns. then the data in the table returns as originally but the css part of the table remains filtered (attached img)

 

 

Yanmario
Telerik team
 answered on 25 Jun 2021
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?