Hitachi Vantara Pentaho Community Forums
Page 2 of 2 FirstFirst 12
Results 11 to 13 of 13

Thread: Boot Strap CSS + Dashboard Charts - relative height and width of charts

  1. #11
    Join Date
    Feb 2013


    This thread helped me out to give a horizontal scroll bar ..

    Thank you...

    Quote Originally Posted by sadakar View Post
    Hi Gundisalwa,

    How to make datatable responsive ?

    For example I have 6 columns showing in table component and which is okay when see the preview in Desktop/laptop screen ?

    But when I see the same with browser resize, horizontal scroll bar is coming which will be same in mobile ???

    How to make work a table component compatible in Mobile devices/browser resize like mobile ?

    This is blocking my work.. Could you share your knowledge on it ?

    Thank you.

  2. #12
    Join Date
    Feb 2013


    Hi all,
    I have the same problem as Sadakar:

    Quote Originally Posted by sadakar View Post
    Now, I am using bootstrap tabs to develop a dashboard...

    Let's say I have 3 tabs and placed 3 charts in each of them... and in the PreExecution section I'm writing the re-rendering code for each of the charts ....
    When the dashboard loads for the first time, 1st tab chart will display ...and when I resize it the chart also relatively adjusting it's width...

    The problem is :
    Once the chart in tab 1 becoming smaller and When I click on next tab(say 2nd tab).. the chart in the 2nd tab (or when I click on 3rd tab then 3rd chart) is going out of the panel(and it is bigger)... but when I resize the browser(keeping on 2nd tab) the chart is rendering as expected...

    The core part is : On clicking of tabs ... the charts are not relatively adjusting...

    Do you have any idea on it ? On clicking of the tabs also, the charts has to relatively adjust it's width the panel...
    Did Sadakar or anyone else find the solution?

    Thank you very much!

  3. #13
    Join Date
    Mar 2012


    Just a small modification, so that data is not reloaded and the chart renders faster.

    Place the following in preExecution:

    function f() {
      var me = this;
      // Set initial width and height to match the placeholder.
      this.chartDefinition.width = this.placeholder().width();
      this.chartDefinition.height = this.placeholder().height();
      // Attach the resize handler only on the first execution of the chart component.
      if(!this.__resizeHandlerAttached) {
        // Ensure render is only triggered after resize events have stopped.
        var debouncedResize = _.debounce(function() {
          // Show chart again.
          // Change chart dimensions.
          me.chart.options.width  = me.chartDefinition.width = me.placeholder().width();
          me.chart.options.height = me.chartDefinition.height = me.placeholder().height();
          me.chart.render(/*bypassAnimation*/true, /*recreate*/true, /*reload*/false);
        }, 200);
        // Attach resize handler
        $(window).resize(function() {
          // Only trigger resize if the container has changed width.
          if(me.chartDefinition.width != me.placeholder().width() ||
            me.chartDefinition.height != me.placeholder().height()) {
            // Temporarily hide chart so that overflow does not happen.
            // Trigger the resize with debounce.
        this.__resizeHandlerAttached = true;
    Last edited by duarte.leao; 05-16-2017 at 12:50 PM. Reason: Fix not changing chart.options

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
Privacy Policy | Legal Notices | Safe Harbor Privacy Policy

Copyright © 2005 - 2019 Hitachi Vantara Corporation. All Rights Reserved.