Difference between options field and setOptions method

[Thien]

I can't figure out when to use what. I initially created my chart using .net mvc wrappers. Then change some configurations with the setOptions method for charts

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#methods-setOptions

Everything works fine until I try to set the the categoryAxis step option for labels:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-categoryAxis.labels.step

Why does this not work? And it only works when I set it using the options field:

http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#fields-options

[Hristo Germanov]

Hi Thien,

How can I reproduce this issue? Here is my test page: http://dojo.telerik.com/inoB/2 What is different in your case?

Regards,
Hristo Germanov
Telerik

 

 

[Thien]

Hi Hristo,

Thanks for your response. I initially created the chart using .net wrappers

@(Html.Kendo().Chart<MCUSamples24HoursModel>()
      .Name("RMXHourlyVideo")
      .Title("Video Utilization")
      .Legend(legend => legend.Position(ChartLegendPosition.Right))
              .Series(series => { series.Line(model => model.VideoPorts).Style(ChartLineStyle.Smooth).Markers(false); })
      .CategoryAxis(axis => axis.Categories(model => model.Hour))
      .ValueAxis(axis => axis
            .Numeric().Labels(labels => labels.Format("{0}"))
            .Line(line => line.Visible(false))
       )
      .DataSource(dataSource => dataSource
                        .Group(group => group.Add(model => model.FriendlyName))
                        .Sort(sort => sort.Add(model => model.HourTime))
                        .Read(read => read.Url(Url.HttpRouteUrl("Default", new { controller = "McuSamples24Hour", action = "Post" })))
                                    .ServerOperation(true)
                        )
      .ValueAxis(axis => axis.Numeric())
      .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("{0}")
      )
    )

 
Would this have any effect?

[Thien]

This is the options Object that I am passing into setOptions method:

var opts = {
            title: {
                align: "left",
                margin: {
                    left: 20,
                    bottom: 8
                },
                color: "#5a9fd1"
            },

            legend: {
                offsetX: 16,
                offsetY: 80
            },

            seriesColors: [
                "#D71920",
                "#3D3F42",
                "#F68B1F",
                "#4A698C",
                "#5a9fd1",
                "#6F7175"
            ],

            categoryAxis: { labels: { step: 72 } }

        };

[Hristo Germanov]

Hello Thien,

Thank you for the attached code.

Now I was able to reproduce the issue. Unfortunately I need more time to give you a resolution or a quick fix. I will write you back as soon as find a solution.

Regards,
Hristo Germanov
Telerik

 

 

[Thien]

Ok thanks. I think the quick fix was to use the options field. This works with categoryAxis.

$("#chart").data.("kendoChart").options.categoryAxis.labels.step = 72;
$("#chart").data.("kendoChart").refresh();

[Hristo Germanov]

Hello Thien,

Yes, this is the fix. I was able to find the problem. The mvc wrapper render the categoryAxis as a array from axes and you should apply your options with:

chart.setOptions({ categoryAxis: [{ // your axis configuration }] });

But if you have groups(like you have) you need to change all options of the chart:

$("#yourSelector").kendoChart({ // you need to merge new and old options here });

In your case refresh will be easier but you need to know this information for your future scenarios.

I hope this helps.

Regards,
Hristo Germanov
Telerik

 

 

[Thien]

So you are saying that I would need to rebuild the chart using the kendoChart() method with all my options, including the ones I set with the mvc wrappers? If thats the case I probably will either just get rid of mvc wrappers all together or just use the options field with refresh method.

[Hristo Germanov]

Hi Thien,

Unfortunately the groups need an extra logic that we can't handle within setOptions() and you need to rebuild the chart. This is known issue and we will try to resolve it for our future releases.

Regards,
Hristo Germanov
Telerik

 

 

[Thien]

Hi Hristo I have another question in regards to this chart. I have a dropdown menu that on change, I would like to update and change the Series model

.Series(series => { series.Line(model => model.VideoPorts)

How would I change the model to say model.VideoPortPercentage? Can I use setOptions for this or do I need to destroy and recreate a new chart?

[Thien]

In addition I tried to change the tooltip.template when the dropdown selection changes. I tried using setOptions but this does not work. The chart does not even redraw.

[T. Tsonev]

Hello,

Series bindings can be changed with setOptions, but it requires resetting the settings for all series.
This is due to the semantics of setOptions. Arrays will be replaced as a whole and the series are an array.

Setting the tooltip template seems to work here. Is this similar to how you change it?

Regards,
T. Tsonev
Telerik

 

 

[Thien]

Hi T. Thanks for the response. I have created the chart and dropdownlist via MVC wrappers. Weird thing is that setOptions to change the tooltip.template does not seem to work inside the dropdownlist change event. It does work when just declaring it inside document.ready. I tried it in your example and both ways works but the chart I have has grouped data and a bunch of other options. 

[Thien]

Hello I was able to resolve these issue. I think something got messed up when I try to use setOptions to change the Series, valueAxis, or categoryAxis properties. The MVC wrappers create these properties as an Array and not an Object so you have to set all the properties again with setOptions. For example if your valueAxis configurations look like

"valueAxis": [{
            "labels": {
                "format": "{0}%"
            },
            "line": {
                "visible": false
            },
            "min": 0,
            "max": 100,
            "majorUnit": 10
        }]

and you wanted to update the format property:

//This would NOT work
var options = {
    "valueAxis": [{
        "labels": {
            "format": "{0} Calls"
        }
    }]
}

//Need to apply all valueAxis options again
//with changes
var options = {
    "valueAxis": [{
        "labels": {
            "format": "{0} Calls"
        },
        "line": {
            "visible": false
        },
        "min": 0,
        "max": 100,
        "majorUnit": 10
    }]
}

[T. Tsonev]

Hello,

Good catch. The MVC wrappers indeed do this in order to simplify settings serialization.
I'll bring this up for discussion. Perhaps we'll be able to ammend setOptions to work in either case.

Apologies for the caused inconvenience.

Regards,
T. Tsonev
Telerik

 

 

[Dirk]

Hello,

Is there a solution to this problem (MVC wrapper creates properties as arrays instead of objects)?

I'm using MVC Wrappers on all charts and can't modify series.visibilty any more since I updated from version 2014Q3 to version 2015Q3. Code was working perfectly!

The only solution i've found is to create charts via HTML not via MVC wrappers.

This is a big deal since I created extended ChartBuilder<T> methods to set application wide defaults (font, theme...)

 

Regards

Dirk

[T. Tsonev]

Hi Dirk,

The discussed issue should only affect axes - it shouldn't affect series.

Can you please post a snippet on what changes are being applied with the setOptions method so we can investigate?

Regards,
T. Tsonev
Telerik

 

 

[Dirk]

Hi,

To be more specific:

I'd like to make sure all series of an area chart are visible if the user changes a filter-option and therefore causes reaload of data and so on.

In 2014Q3 I just set the series[i].visible = true and everything was fine

Now I have to use the setOptions method (without there's no effect), which fires an event to refresh/redraw, that I couldn't suppress.

So the chart got rendered (partially) twice.

My solution to that problem is to set the series.visible property in the DataBound event of the chart WITHOUT using setOptions, which - at this place - works fine.

Better solution would be to have the possibility to suppress any event fired by setOptions method.

 

Regards

Dirk

 

[T. Tsonev]

Hello,

Setting series options in dataBound is what I'd recommend as well. These are guaranteed to not trigger additional redraws.

The handling of the series configuration was changed to accommodate for grouped series.
We have to keep a copy of the original series definitions and copy them for each group coming from the data source.

I hope this makes sense.

Regards,
T. Tsonev
Telerik