Ajax binding for multiple series fails

[Achilles]

Hi,

I have an existing legacy MVC project where I use Telerik MVC extensions. I'm now trying to migrate it to Kendo UI.
I have a little problem with scatter charts with uses ajax binding. If I have a single series, it works fine. But if I have more than one, it doesn't. This was working quite well in MVC extensions.

When I put a put a breakpoint in firebug, I see that chart.options.series[].data in case of a single series has a collection of objects which represent each data point. But in case of 2 series,
each chart.options.series[].data seems to have another array of 2 objects and inside it the data points. So my chart seems to have 4 sets of data for 2 series. I'm attaching a sample project.

Secondly I'd like the Kendo equivalent for these snippets of code

1.  .YAxis(y => y.Numeric().MinorTickType(ChartAxisTickType.Outside))

2.

function formatXAxis(value) {
        var hr = Math.floor(value);
        var min = value - hr;
        var newval = hr + (min * 6 / 10);

        return $.telerik.formatString('{0:N}', newval).replace('.', ':').replace(',', ':');
    }

Thanks and Regards

Achilles

[Hristo Germanov]

Hi Achilles,

1) Now you can't do this with the mvc wrappers. I will try to fix this issue for the beta release of Kendo UI. The options will be MinorTicks(minorTicks => minorTicks.Type(ChartAxisTickType.Outside)).

2) You need to use number format in your template.

The array binding chart is not supported and you need to rewrite your server logic to use a object with separate properties for each series. You need to do something similar to this.

I have updated your points. 

Regards,
Hristo Germanov
Telerik

[Achilles]

Hi Hristo,

Thanks for your reply.
The number format works fine. And I understand that I'll have to wait for sometime for the minor ticks.

Regarding the multiple series themselves, my actual design is a little more complicated than the sample I'd attached initially. I have a chart and a multiple-row selectable grid. Have a look at the attached screenshot.

In my MVC razor definition I have no series. When a row (in the grid) is (de)selected, I create the series-es by javascript. I do something like this :

chart.options.series = [];

 if (selectedInverters.length == 0)
     return;

 $(selectedInverters.get().reverse()).each(function (i) {

     var index = selectedInverters.length - i - 1;
     var colourDefault = $(this).parent().parent().find('td.classColourTotal').html();

     if ('@Model.Attributes.DataType' == "Power") {
         var colourPhase1 = $(this).parent().parent().find('td.classColourP1').html();
         var colourPhase2 = $(this).parent().parent().find('td.classColourP2').html();
         var colourPhase3 = $(this).parent().parent().find('td.classColourP3').html();

         chart.options.series.push({
             type: "column",
             name: "[".concat((index * 3), "].Value"),
             color: "#" + colourPhase1,
             field: "[".concat((index * 3), "].Value"),
             stack: true,
             gap: 1
         });

         chart.options.series.push({
             type: "column",
             name: "Inverter ".concat(index),
             color: "#" + colourPhase2,
             field: "[".concat((index * 3) + 1, "].Value"),
             stack: true,
             gap: 1
         });

         chart.options.series.push({
             type: "column",
             name: "Inverter ".concat(index),
             color: "#" + colourPhase3,
             field: "[".concat((index * 3) + 2, "].Value"),
             stack: true,
             gap: 1
         });

     } else {

         chart.options.series.push({
             type: "column",
             name: "Inverter ".concat(index),
             color: "#" + colourDefault,
             field: "[".concat(index, "].Value"),
             stack: true,
             gap: 1
         });

     }

 });

 chart.rebind({
             duration: durationType,
             datatype: dataType,
             plantGuid: '@Model.PowerPlantId'
         });

 In the ajax call I make sure the server logic return the correct array dimension and the order. The number of rows in the grid is also not known. It depends on the date widget on top.
 I'd be grateful if you can suggest what are my best options in this case.
 I prefer ajax binding and not sending a complex model like
 
  @(Html.Kendo().Chart(Model)
   ...
   ...
   @{
   foreach(inveter in Model.Inverters)
   
   {
      .Series(series =>
            {
                series.Column(
                    model => model.Data[i],
                    model => model.Time
                )                
            })
    }
 
    as this would involve posting the model each time some parameters changes, as there are some more widgets on my page and and everything needs to refresh if I post, each time

Thanks for your help

Regards

Achilles

[Hristo Germanov]

Hello Achilles,

The other possible workaround for this problem is to pass the data via ViewBag (for example) to your charts. For example:

@(Html.Kendo().Chart(ViewBag.chart1)
   ...
   ...
@(Html.Kendo().Chart(ViewBag.chart2)
   ...
   ...

Something similar to this example.

Note: Your workaround is a flexible way to pass a data to many charts.

Regards,
Hristo Germanov
Telerik

[Achilles]

Hi Hristo,

I'm back at the charts again, after migrating all the other components to Kendo.

I can't use object with separate named properties for each series as the number and nature of series changes for me dynamically. One option is, as you suggested, to create a chart each time from the controller with a different ViewBag, instead of ajax (re)binding.
But I wanted to see if I can retain the original behaviour of my charts.

Please have a look at the attached sample project . It is a scaled-down version of my application chart features. The first page is implemented with the MVC chart.
In the second I've tried to realize the same using Kendo, with some modification to the server logic. I think I've almost managed it, except for 2 points, where I'd request for your help.

1. When I select multiple inverters in the grid, I use a category chart. I'm unable to set the category field. Earlier I used

chart.options.categoryAxis.field = "[0].StringTime";

But in Kendo the series definition is different. So I get the category definition from the 0th item of each series, instead of all the categories from the 0th series.
Do you think there is a workaround for this ?
If this is not possible, can I build the options.categoryAxis.category explicitly using ajax ?

2. When I create the chart from razor, I can set the datasource if there is only one series in the session, initially. But later I can rebind to as many series-es dynamically, successfully.

But, if there is more than 1 series initially, I get an error at

chart.setDataSource(dataSource);

 TypeError: e.charAt is not a function

...,majorTickSize:0,minorTickSize:0})),t.options.minorTicks=at({},{color:t.options....        kendo.all.min.js (line 27)

You can simulate it by selecting 2 or more inverters in the Powerchart and then selecting the Kendo(Energy) chart.

I'd be grateful if you can give me a hint how to solve these 2 problems.
Also, I'm open to rework the chart & server logic completely, as long as I don't have to change my overall user experience (as you see it in the MVC extensions chart).

Best Regards

Achilles

[Hristo Germanov]

Hi Achilles,

I was able to examine your project and I wonder why you don't create a chart to the client without any mvc wrappers. If you do that you will be able to create the specific logic that you have. I think that this will be the best in your case. Because you have a static options for the chart and you are using all binding in the javascript. You can create the chart with similar approach to our examples with function createChart(options). Then every time that you need a new chart you will be able to recreate the hole chart without any problems. Simple example: http://jsbin.com/uMUG/2/edit

1) In this case I will suggest you to pass the builded categories from the dataSource. In other words you need to pass categories: ["A", "B"] to your chart.
2) I am not sure why you have this problem but if you rewrite the logic with the approach that I suggest I think that you will not have this problem.

Could you please try this and tell me if you have any problems and I will help you as soon as I can?

Regards,
Hristo Germanov
Telerik

[Achilles]

Hi Hristo,
Thanks for your advice. I've managed to implement a sample chart without the MVC wrappers, which re-created each time , some inputs changes . It seems to work in principle.
I'll now start to migrate the actual chart, which is a little more complicated. Hopefully there should be no problems that can't be overcome. I'll ask for your help if I run into trouble

Thanks again.

Achilles