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

Thread: Converting Select Component to Slider

  1. #1

    Question Converting Select Component to Slider

    Hi All,

    Is there an easy way to convert CDE Select Component to Slider?
    i.e., if I have a year range from 2010 to 2015 in the drop down list, is there an easy way of converting it to slider?

    This can be achieved by using either JQuery UI Slider or maybe dojo dijit form Slider.

    If conversion is not an option, what are the available options to have a slider components for CDE?

    Thanks.

    Z

  2. #2
    Join Date
    Feb 2011
    Posts
    840

    Default

    wow! That's an awesome idea Z! Sadly, I have no idea =( but I'm curious now as well! Would be a nice adition to a dash I'm starting here =)
    Join us on IRC! =)

    Twitter / Google+ / Timezone: BRT-BRST
    BI Server & PDI 5.4 / MS SQL 2012 / Learning CDE & CTools
    Windows 8 64-bit / Java 7 (jdk1.8.0_75)

    Quote Originally Posted by gutlez
    PLEASE NOTE: No forum member is going to do your work for you. We will help you sort out how to do a specific part of the work, as best we can, in the timelines that our work will allow us.

    I'm no expert.Take my comments at your own risk.

  3. #3

    Default

    Hello,

    i'm quite new on CTools, and i have not much idea about CDE but i am sure it allows you to include your own JavaScript code somewhere. So you can create your slide just by using jquery and link it to the dashboard by using something similar to this:
    Code:
            var slider = $('#slider-range').slider({
                range: true,
                min: 2007,
                max: 2010,
                values: [ 2007, 2010 ],
                  slide: function(event, ui) {
                    $( '#amount' ).val( ui.values[ 0 ] + ' - ' + ui.values[ 1 ] );
                },
                change: function( event, ui ) {
                    // Update Listeners
                    firstYear = ui.values[0];
                    lastYear = ui.values[1];
                    
                    Dashboards.fireChange('firstYear', firstYear);
                    Dashboards.fireChange('lastYear', lastYear);
                }
            });
    i dont know if this is gonna work but i am using CDF and it works for me ;D

    Of course you'll have to take into account your own listeners (how are listeners defined on CDE? are the same as parameters? i don't know but i think so) in order to uptade the javascript variable used to store its value correctly. hope it helps you, bb

  4. #4

    Default

    Hello, where do you insert this piece of code?
    I tried to create an external Js file, and in document.ready, put down the following:
    $('#yearSlider').slider({
    min: 2010,
    max: 2050,
    step: 1,
    value: 2013,
    change: function(event, ui) {
    Alert(ui.value);
    Dashboards.fireChange('year', ui.value);
    }
    });

    Alert works fine, but the problem is the external js doesn't know about Dashboards object, so firing dashboard change would failed with exception thrown to the console log. Really wanted to know how the external js invoke this Dashboards.fireChange event, or where can we place this piece of change function....

    Quote Originally Posted by _alatriste_ View Post
    Hello,

    i'm quite new on CTools, and i have not much idea about CDE but i am sure it allows you to include your own JavaScript code somewhere. So you can create your slide just by using jquery and link it to the dashboard by using something similar to this:
    Code:
            var slider = $('#slider-range').slider({
                range: true,
                min: 2007,
                max: 2010,
                values: [ 2007, 2010 ],
                  slide: function(event, ui) {
                    $( '#amount' ).val( ui.values[ 0 ] + ' - ' + ui.values[ 1 ] );
                },
                change: function( event, ui ) {
                    // Update Listeners
                    firstYear = ui.values[0];
                    lastYear = ui.values[1];
                    
                    Dashboards.fireChange('firstYear', firstYear);
                    Dashboards.fireChange('lastYear', lastYear);
                }
            });
    i dont know if this is gonna work but i am using CDF and it works for me ;D

    Of course you'll have to take into account your own listeners (how are listeners defined on CDE? are the same as parameters? i don't know but i think so) in order to uptade the javascript variable used to store its value correctly. hope it helps you, bb

  5. #5

    Default

    Hello,

    as i told you I am using CDF to create my dashboards. I put this code between <script> </script> tags at the end of the template.html that CDF uses to define the dashboard components.
    I have no problem accessing the Dashboards variable as it is global defined (window.Dashboards).

    After a quick look on a CDE example, the Dashboards variable is also there. I really don't know what's happening or why you can't access this variable. For your response i assume that the slider is rendered correctly, right?

    What is the error on log? Does it alert you that Dashboards is undefined?

    I am also interested on this getting working so maybe some CDE guru can lend us a hand.

  6. #6
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    that piece of code should go into a js resource, that you can find in the CDE layout tab .
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  7. #7
    Join Date
    Feb 2011
    Posts
    840

    Default

    _alatriste_, Pedro, could I ask some more of you? I've put that piece of code on the resource as you mentioned, but I have no idea on how to apply it after that.
    Join us on IRC! =)

    Twitter / Google+ / Timezone: BRT-BRST
    BI Server & PDI 5.4 / MS SQL 2012 / Learning CDE & CTools
    Windows 8 64-bit / Java 7 (jdk1.8.0_75)

    Quote Originally Posted by gutlez
    PLEASE NOTE: No forum member is going to do your work for you. We will help you sort out how to do a specific part of the work, as best we can, in the timelines that our work will allow us.

    I'm no expert.Take my comments at your own risk.

  8. #8
    Join Date
    Nov 2011
    Posts
    1,229

    Default

    You shouldn't have to do anything. If it is a resource, then the javascript there will be executed when the page load. Is that not what you see happening ?
    Pedro Vale
    --
    CTools Product Development
    http://www.webdetails.pt

  9. #9
    Join Date
    Feb 2011
    Posts
    840

    Default

    I added those lines to a JS resource on the layout tab, but select component still shows as dropdown.
    Also, I have a couple other select components which I wish would stay as dropdown - is there a way to make it so only the date select be transformed into slider?
    Join us on IRC! =)

    Twitter / Google+ / Timezone: BRT-BRST
    BI Server & PDI 5.4 / MS SQL 2012 / Learning CDE & CTools
    Windows 8 64-bit / Java 7 (jdk1.8.0_75)

    Quote Originally Posted by gutlez
    PLEASE NOTE: No forum member is going to do your work for you. We will help you sort out how to do a specific part of the work, as best we can, in the timelines that our work will allow us.

    I'm no expert.Take my comments at your own risk.

  10. #10

    Default

    Hello joao,

    our approaches to this are slightly different.

    By introducing this JavaScript code I wasn't aiming to actually convert the Select Component into a slider, instead this is just a workaround.

    You have to create a jquery slider linked to any other html element in your dashboard (in my case id="slider-range") and once this slider is up and running just delegate in the Dashboards interface to update the parameter that the charts are expecting as an input.

    To achieve this I am not "converting" any Select Component previously created. Instead, I am emulating the Select Component by using this jquery slider. I mean that there is no need to create the select component previously.

    In Summary:

    - create an html elment in the dashboard, with width and height
    - use JavaScript to create the jquery slider on that html element
    - modify the slider behaviour: every time a handle is changed, we update the parameter which stores this value with the handle value.

    As you can see there are several steps to achieve. It is not as easy as use a preconfigured CDE component, we are messing around with code and those esoteric things... :D
    Last edited by _alatriste_; 09-23-2013 at 05:26 AM.

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.