<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2025, 1, 1) },
      { value: 2, category: "Two", date: new Date(2025, 5, 1) }
    ]
  },
  dateField: "date",
  series: [{
    type: "line",
    field: "value",
    name: "Value"
  }],
  navigator: {
    series: [{
      type: "area",
      field: "value",
      name: "Value"
    }],
    select: {
      from: "2025/02/05",
      to: "2025/03/07"
    },
  }
});

setTimeout(() => {
  var chart = $("#stock-chart").data("kendoStockChart");
  var navigator = chart.navigator;

  // Get current selected range
  var selectedRange = navigator.select();
  console.log("Current range:", selectedRange.from, "to", selectedRange.to);
}, 1000);    
</script>

<input id="fromDate" />
<input id="toDate" />
<div id="stock-chart"></div>
<script>
$("#stock-chart").kendoStockChart({
  dataSource: {
    data: [
      { value: 1, category: "One", date: new Date(2016, 1, 1)},
      { value: 2, category: "Two", date: new Date(2016, 3, 1)}
    ]
  },
  dateField: "date",
  series: [{
      type: "line",
      field: "value",
      name: "Value"
  }],
  navigator: {
      series: [{
          type: "area",
          field: "value",
          name: "Value"
      }]
  }
});

function selectRange() {
    navi.select(
        $("#fromDate").data("kendoDatePicker").value(),
        $("#toDate").data("kendoDatePicker").value()
    );
}

var chart = $("#stock-chart").data("kendoStockChart");
var navi = chart.navigator;

$("#fromDate").kendoDatePicker({
    value: navi.select().from,
    change: selectRange
});

$("#toDate").kendoDatePicker({
    value: navi.select().to,
    change: selectRange
});
</script>