Difference between options field and setOptions method

19 posts, 0 answers
  1. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 12 Sep 2014 Link to this post

    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
  2. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 16 Sep 2014 Link to this post

    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!
     
  3. Kendo UI is VS 2017 Ready
  4. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 16 Sep 2014 in reply to Hristo Germanov Link to this post

    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?
  5. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 16 Sep 2014 in reply to Thien Link to this post

    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 } }
     
            };
  6. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 18 Sep 2014 Link to this post

    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!
     
  7. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 18 Sep 2014 in reply to Hristo Germanov Link to this post

    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();
  8. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 19 Sep 2014 Link to this post

    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!
     
  9. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 19 Sep 2014 in reply to Hristo Germanov Link to this post

    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.
  10. Hristo Germanov
    Admin
    Hristo Germanov avatar
    703 posts

    Posted 23 Sep 2014 Link to this post

    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!
     
  11. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 27 Apr 2015 Link to this post

    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?

  12. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 28 Apr 2015 in reply to Thien Link to this post

    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.
  13. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 29 Apr 2015 Link to this post

    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!
     
  14. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 29 Apr 2015 in reply to T. Tsonev Link to this post

    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. 
  15. Thien
    Thien avatar
    38 posts
    Member since:
    Aug 2014

    Posted 01 May 2015 in reply to Thien Link to this post

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

  16. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 03 May 2015 Link to this post

    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!
     
  17. Dirk
    Dirk avatar
    25 posts
    Member since:
    Aug 2013

    Posted 18 Nov 2015 Link to this post

    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

  18. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 20 Nov 2015 Link to this post

    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!
     
  19. Dirk
    Dirk avatar
    25 posts
    Member since:
    Aug 2013

    Posted 26 Nov 2015 Link to this post

    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

     

  20. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 30 Nov 2015 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready