MVVM chart's dataSource doesn't update like I thought it might

[Jay]

 

I tried what I thought was a pretty basic use of the observables: binding a numeric text box to a value, and then using that value in the datasource.  However, it does not work. I'm wondering if what I'm trying to do is possible and I'm just doing it wrong, or if what I'm trying to do isn't possible. Here's a dojo, and the code is below as well. 

<div id="example">
    <div class="demo-section k-content wide">
        <div class="box">
          <input id="Value1NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: Value1, events: { change: ValueChange }"
                 data-min="0" />
          <input id="Value2NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: Value2, events: { change: ValueChange }"
                 data-min="0" />
        </div>

        <div>
            <div id="chart1" data-role="chart"
                 data-series-defaults="{ type: 'line' }"
                 data-series="[ {field: 'amount'} ]"
                 data-bind="source: values"
                 style="height: 200px;" ></div>
        </div>
    </div>
<script>
    (function() {
        var viewModel = kendo.observable({
            Value1: 10,
            Value2: 20,
            ValueChange: function(e) {
              var chart = $("#chart1").kendoChart();
              chart.refresh();
            },
            values: new kendo.data.DataSource({
                data: [
                  { amount: function() { return this.get("Value1"); } },
                  { amount: function() { return this.get("Value2"); } }
                ]
            })
        });
        kendo.bind($("#example"), viewModel);
    })();
</script>
</div>

[Georgi]

Hello Jay,

There are few issues with the provided code, firstly a reference to a function is passed as a value to the amount objects in the values dataSource. Getters are defined as follows:

{get amount(){
    return value;
}}

Secondly, the chart is being reinitialized within the ValueChange handler.

Nevertheless, to achieve the described behavior you should use the same observable objects in both chart and numerics.

e.g.

    <div id="example">
      <div class="demo-section k-content wide">
        <div class="box">
          <input id="Value1NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: values[0].amount, events: { change: ValueChange }"
                 data-min="0" />
          <input id="Value2NumericTextBox" data-role="numerictextbox"
                 data-format="c0"
                 data-decimals="0"
                 data-bind="value: values[1].amount, events: { change: ValueChange }"
                 data-min="0" />
        </div>

        <div>
          <div id="chart1" data-role="chart"
               data-series-defaults="{ type: 'line' }"
               data-series="[ {field: 'amount'} ]"
               data-bind="source: values"
               style="height: 200px;" ></div>
        </div>
      </div>
      <script>
        (function() {
          var viewModel = kendo.observable({

            ValueChange: function(e) {
              var chart = $("#chart1").data('kendoChart');
              chart.refresh();
            },
            values: [{amount: 10}, {amount:20}]
          });
          kendo.bind($("#example"), viewModel);
        })();
      </script>
    </div>

Below you will find a sample:

• https://dojo.telerik.com/aripiniB

Regards,
Georgi
Progress Telerik

[Jay]

Hi Georgi. Thanks for the reply. I started down a similar route when my first approach didn't work, so at least I know I'm doing it properly.