This is a migrated thread and some comments may be shown as answers.

Difference between options field and setOptions method

18 Answers 745 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Thien
Top achievements
Rank 1
Thien asked on 12 Sep 2014, 08:35 PM
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

18 Answers, 1 is accepted

Sort by
0
Hristo Germanov
Telerik team
answered on 16 Sep 2014, 10:43 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 16 Sep 2014, 08:59 PM
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?
0
Thien
Top achievements
Rank 1
answered on 16 Sep 2014, 09:06 PM
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 } }
 
        };
0
Hristo Germanov
Telerik team
answered on 18 Sep 2014, 08:37 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 18 Sep 2014, 08:43 PM
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();
0
Hristo Germanov
Telerik team
answered on 19 Sep 2014, 01:41 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 19 Sep 2014, 07:32 PM
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.
0
Hristo Germanov
Telerik team
answered on 23 Sep 2014, 01:57 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 28 Apr 2015, 12:53 AM

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?

0
Thien
Top achievements
Rank 1
answered on 28 Apr 2015, 11:16 AM
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.
0
T. Tsonev
Telerik team
answered on 29 Apr 2015, 03:40 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Thien
Top achievements
Rank 1
answered on 29 Apr 2015, 09:10 PM
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. 
0
Thien
Top achievements
Rank 1
answered on 01 May 2015, 08:51 PM

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
    }]
}

0
T. Tsonev
Telerik team
answered on 03 May 2015, 06:59 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dirk
Top achievements
Rank 1
answered on 18 Nov 2015, 01:25 PM

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

0
T. Tsonev
Telerik team
answered on 20 Nov 2015, 03:57 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Dirk
Top achievements
Rank 1
answered on 26 Nov 2015, 08:29 AM

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

 

0
T. Tsonev
Telerik team
answered on 30 Nov 2015, 08:30 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Charts
Asked by
Thien
Top achievements
Rank 1
Answers by
Hristo Germanov
Telerik team
Thien
Top achievements
Rank 1
T. Tsonev
Telerik team
Dirk
Top achievements
Rank 1
Share this question
or