This is a migrated thread and some comments may be shown as answers.

Angular kendo-chart-navigator in column chart

0 Answers 12 Views
Charts
This is a migrated thread and some comments may be shown as answers.
alex
Top achievements
Rank 1
Iron
Veteran
alex asked on 25 Jan 2021, 01:25 PM

hi, i would like to know how to use the kendo-chart-navigator in my histogram type chart.

I would like to get the data for the chart from a datasource. this datasource is a json file

 

export class AppComponent {
 
    public data: any[] = [];
    public from: Date = new Date('2009/02/05');
    public to: Date = new Date('2011/10/07');
 
    constructor(private service: StockDataService) {
        this.service.getDataSource().subscribe(data => {
          this.data = data; //data is the json file
          });
    }
}
 
 
<kendo-chart (seriesClick)="onSeriesClick($event)">
            <kendo-chart-category-axis>
               <kendo-chart-category-axis-item
                    [categories]="month"
                    [title]="{ text: 'Months' }">
                </kendo-chart-category-axis-item>
            </kendo-chart-category-axis>
            <kendo-chart-series>
            <kendo-chart-series-item type="column"  categoryField="month" [name]="month" [data]="data" field="total" [markers]="{ visible: true }">
            </kendo-chart-series-item>
        </kendo-chart-series>
 <kendo-chart-navigator>
   <kendo-chart-navigator-select [from]="from" [to]="to">
   </kendo-chart-navigator-select>
  <kendo-chart-navigator-series
            <kendo-chart-navigator-series-item type="area" [data]="data" field="Close" categoryField="Date">
           </kendo-chart-navigator-series-item>
   </kendo-chart-navigator-series>
 </kendo-chart-navigator>
 </kendo-chart>

No answers yet. Maybe you can help?

Tags
Charts
Asked by
alex
Top achievements
Rank 1
Iron
Veteran
Share this question
or