This topic contains 3 replies, has 2 voices, and was last updated by  aligned 4 years, 1 month ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #6619

    aligned
    Member

    I’m evaluating Wijmo with Knockout js to see if we can use it for a re-write project. I need to handle browser resizing like in http://wijmo.com/demo/dashboard/, but with KnockoutJs.

    I was thinking that each view model would have a redraw method that would call the correct redraw method. So then my main DashboardViewModel, that has a collection of WidgetViewModels could loop through the widgets and call redraw. At the moment, these widgets are added to the page with an external template

      <div id="dashboardWidgets" data-bind="foreach: Widgets" class="flexible-widget">
                <!-- ko template: {name: properties.templateName  } -->
                <!-- /ko -->
            </div>
    
     $(window).resize(function () {
     // redraw the widgets
                    for (var widget in vm.widgets) {
                        widget.Redraw();
                    }
    // the example from the link  $(“#categorychart”).wijpiechart(“redraw”);  
    });
    

    What should I put in the Redraw method?

    Thank you!

    #6635

    aligned
    Member

    I have it working, though I wish the re-sizing was smoother and automatic. I’m wondering if the SVG viewbox would make any sense for them to use.

    Anyways in my resize method, I call a different function depending on the control.
    For a barchart:

    $(“:wijmo-wijbarchart”).wijbarchart(“redraw”);

    for a radial:

     $(“:wijmo-wijradialgauge”)
            .wijradialgauge(“option”, “width”, $(“#radialDashboardWidget”).width())
            .wijradialgauge(“option”, “height”, $(“#radialDashboardWidget”).height())
            .wijradialgauge(“redraw”);
    
    #6710

    Chris Bannon
    Member

    Wijmo Subscriber

    Hey, I noticed your blog post and found this post from it. I added the solutions to your problems to this fiddle, but we are going to address the face observability issue in our library asap.

    http://jsfiddle.net/mr2qz/14/

    The way to best handle resizing is like so:

     $(“#gauge”).wijradialgauge(“option”, “width”, $(“#gauge”).width()).wijradialgauge(“redraw”);

    And if you want generic chart resizing you can do it like so. The selector is actually finding all widgets in matching NAMESPACE-WIDGETNAME which is handy for applying to many widgets of the same type.

    $(“:wijmo-wijpiechart”).wijpiechart(“redraw”);

    As for the face fill issue, we did not have that as one of our supported options that listens to observable changes. I am going to add that now though. It will be in our next release. In the meantime, you can subscribe to the change and update the option. This is just a temp solution here:

        vm.FaceFill.subscribe(function(newValue) {
            var face = $(“#gauge”).wijradialgauge(“option”, “face”);
            face.style.fill = newValue;
             $(“#gauge”).wijradialgauge(“option”, “face”, face);
        });
    
    #6711

    aligned
    Member

    @Chris Bannon, Thanks for the reply and the jsFiddle!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.