Bind Column chart to individual MVVM viewModel fields instead of DataSource

[Jacques]

Is it possible to bind a column chart to individual fields in a MVVM viewModel? 

We have a calculator with numerous inputs from the with the end result being three main total fields. So these fields are actually calculated based on calculations which doesn't make them quite appropriate for a dataSource object. E.g. 

 

var myViewModel = kendo.observable({
    totalIncome: function(){
        /* get expressions to gather all the input provided by the user */
        return sumOfGetExpressionsAbove;
    },

    totalExpenses: function(){
     /* get expressions to gather all the input provided by the user */
        return sumOfGetExpressionsAbove;
    },

    /*other fields/properties related to the calculator for various types of incomes, expenses, assumptions etc. These all make up part of the fields used to calculate totals */
})

 

So the total fields are used in two divs show the totals but we also want to show this in a simple 2 column bar chart. 

Is this possible? I don't see any way to bind a chart to two separate fields instead of a datasource? 

[Boyan Dimitrov]

Hello,

I am afraid that the Kendo UI Chart does rely internally on DataSource. Given this there is no way to bind column chart to individual field of the view model. 

Regards,
Boyan Dimitrov
Progress Telerik

[Jacques]

So what would you recommend in terms of an MVVM viewModel for a complex view where you have a chart that shows the calculated totals for a number of input categories? 

[Boyan Dimitrov]

Hello Jacques,

It is possible to generate (bind) the data for the chart based/to the change of the values as shown in the  http://dojo.telerik.com/@SiliconSoul/OvOli example. As soon as the values of the input fields are changed the Kendo UI Chart is re-rendered with the new values. 

Regards,
Boyan Dimitrov
Progress Telerik