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

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


    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, 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 -->
     $(window).resize(function () {
     // redraw the widgets
                    for (var widget in vm.widgets) {
    // the example from the link  $(“#categorychart”).wijpiechart(“redraw”);  

    What should I put in the Redraw method?

    Thank you!



    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:


    for a radial:

            .wijradialgauge(“option”, “width”, $(“#radialDashboardWidget”).width())
            .wijradialgauge(“option”, “height”, $(“#radialDashboardWidget”).height())

    Chris Bannon

    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.

    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.


    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”);
   = newValue;
             $(“#gauge”).wijradialgauge(“option”, “face”, face);


    @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.