Hitachi Vantara Pentaho Community Forums
Page 1 of 2 12 LastLast
Results 1 to 10 of 13

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

  1. #1
    Join Date
    Feb 2013
    Posts
    530

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

    Hi Forum,

    I followed below post to develop a demo dashboard using CSS.
    http://diethardsteiner.blogspot.in/2...essential.html

    I have found below 2 issues :

    1. I have given height =200 and width=300 for chart and span=5 for each of the columns.
    When I see the preview, the chart is coming out of the panel in one case. Below is the image. Used the same css code from Diethardstenier blog.

    2. Another issue is : When I directly see the preview the bootstrap is not coming for the dashboards but when I see as Open In new Window it is working.


    1.jpg

  2. #2
    Join Date
    Feb 2013
    Posts
    530

    Default

    Did any one face the same problem ?

    How the charts will become relative with the panels using bootstrap css in CDE ?

    Quote Originally Posted by sadakar View Post
    Hi Forum,

    I followed below post to develop a demo dashboard using CSS.
    http://diethardsteiner.blogspot.in/2...essential.html

    I have found below 2 issues :

    1. I have given height =200 and width=300 for chart and span=5 for each of the columns.
    When I see the preview, the chart is coming out of the panel in one case. Below is the image. Used the same css code from Diethardstenier blog.

    2. Another issue is : When I directly see the preview the bootstrap is not coming for the dashboards but when I see as Open In new Window it is working.


    1.jpg

  3. #3
    Join Date
    Jun 2012
    Posts
    19

    Default

    Hi,

    Regarding your first issue, bootstrap and the charts are two different things and, although bootstrap css was added to CDE, that does not make the charts inherently respond to the container size. Having said that, there are two things you can do:

    a) Make the charts adapt to the container size on the first dashboard render: for this you should only need to not set the width of the chart, and the chart will take the width of the container.

    -OR-

    b) Make the charts adapt to the container size on every window resize: this one is somewhat more complex. Essentially, you need to tell each chart that it should resize on every window resize, but only when the resize events have stopped. Use this code snippet in the chart preExecution to accomplish that:

    Code:
      var myself = this;
      // Set initial width to match the placeholder
      myself.chartDefinition.width = myself.placeholder().width();
    
      // 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.
          myself.placeholder().children().css('visibility','visible');
    
          // Change chart width
          myself.chartDefinition.width = myself.placeholder().width();
          myself.render( myself.query.lastResults() );
        }, 200);
    
        // Attach resize handler
        $(window).resize(function(){
    
          // Only trigger resize if the container has changed width
          if ( myself.chartDefinition.width != myself.placeholder().width()){
    
            // Temporarily hide chart so that overflow does not happen
            myself.placeholder().children().css('visibility','hidden');
    
            // Trigger the resize with debounce
            debouncedResize();
          }    
        });
    
        this.resizeHandlerAttached = true;
      }
    
    Hope this helps!

  4. #4
    Join Date
    Feb 2013
    Posts
    530

    Default

    Thank you a lot.

    It has worked nicely after putting the code in PreExecution of Chart component.

    After this I'm left with new questions

    1) Do I need to write the code for every chart on the dashboard ?
    2) Will it burden the client side accessing speed of the dashboard ?

  5. #5
    Join Date
    Jun 2012
    Posts
    19

    Default

    Quote Originally Posted by sadakar View Post
    1) Do I need to write the code for every chart on the dashboard ?
    At the moment, the charts do not natively support re-rendering on window resize, and I have no idea about the plans to add something like that in the future, so yes, you probably would.
    A more advanced option would be to override the definition of the chart components so that they always attach the window resize listener by default, but that's considerably more complex.

    Quote Originally Posted by sadakar View Post
    2) Will it burden the client side accessing speed of the dashboard ?
    On the first render, there is no difference between using that code or not using it, since it's only attaching a handler to the window resize event. On window resize, and because of the debounce function, it will only re-render the chart 200ms after the resize has stopped, which should be enough for most of the cases and should probably only re-render the chart once per resize. There is no data access at that point, it's all just visual, so it shouldn't put too much strain on your browser.

    A different matter would be if you wanted the chart size to match the container size while resizing. That's definitely more intensive.
    Last edited by gundisalwa; 04-23-2014 at 11:26 AM.

  6. #6
    Join Date
    Feb 2013
    Posts
    530

    Default

    Thank you.

  7. #7
    Join Date
    Feb 2013
    Posts
    530

    Default

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


    Thank you.

    Sadakar
    BI developer
    Open source Technologies.

  8. #8
    Join Date
    Jun 2012
    Posts
    19

    Default

    Sorry for only noticing your question now. The idea is the same as the window resize, basically. You'll have to pick up the event of switching tabs, somehow, and attach the same, or a similar, resize handler to it. The event itself could be a jquery event, a parameter fire change or even a Backbone.js event. All of those are possible options for communicating that there was a tab change to the chart.

    Here's an example using jQuery custom events. Change the event binding to:
    Code:
    $(window).on('resize,tabChange', function(){
       ...
    });
    And then, when on every tab change, do:
    Code:
    $(window).trigger('tabChange');
    (Haven't tested this one but it should work)

  9. #9

    Default

    My problem with the second option, which is the code. It does broke my css styling and the chart where I put the code, does not show up anymore. Does anyone else have same kind of problems? And is there any solutions?

  10. #10
    Join Date
    Feb 2013
    Posts
    530

    Default

    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.

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 - 2017 Pentaho Corporation. All Rights Reserved.