Angular kendo-chart-navigator in column chart

[alex]

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>