Ivy Dashboard Components

We’re happy to bring you the latest creation from the geeks in the Ivy IS Labs. The Ivy Dashboard Components or “IvyDC”.

Ivy DC - Dashboard Components

The IvyDC is a Pentaho Sparkl Plugin that will act as a central location for all our Community Dashboards components developed to work with the CDE. The plugin also contains all the documentation and samples to help you get started. Download it now and be sure to follow our twitter @ivyinfosystems to get the latest news on new components and updates to the plugin.

Below you can see the three initial components packaged with the plugin: The Gauge Dial, Vector Map and Video Player.

Dashboard Vector Map

Dashboard Video Player

Dashboard Gauges

To install the plugin, simply download it via the Pentaho Marketplace and the Ivy IS Dashboard Components will be available in your version of the CDE!

About the author

Harris Ward is the Managing Director of Ivy Information Systems. He has been working in Open Source Business Intelligence for a number of clients developing solutions and providing training spanning 10 years


  1. Jose Hidalgo

    Awesome work, guys! Gauge component is simply beautiful

  2. Dejan Gambin

    First of all, great work!
    I am trying to play with vector map, I have installed Dashboard Components and I can access it by going to pentaho/plugin/IvyDC/api/main, but there is no menuitem in Tools menu (btw, there are some other plugins that don’t have menuitems and they should, but there are also some (sparkl, pash) that have it). Don’t have a clue why is this happening :-(

    • admin

      We’re glad you’re enjoying the custom components. As far as the plugin not being displayed in the Tool menu, this is a known issue and is out of our control at the moment. It should get fixed in the future. Have fun!

  3. LL

    Where is the Query example for the map? how should I group my data: two columns table, Country and Visits ?

    • admin

      If you open the samples in the CDE Edit mode you will be able to see the query that is being executed to populate the Map component

  4. NK

    Where can I find the sample dashboard ?

    • admin

      You can find samples for the components by clicking the Tools menu on the main Pentaho Home screen and selecting the Ivy Dashboard Components plugin.

  5. Isaac

    This is awesome component, and looking forward to next release as well,
    which includes d3js charts.

    Btw, I’m trying out gauge component,
    and wonder where I can find the list or documentation that I can override using “extension points”.
    ie. I’d like to change the color of guage, so that when it’s almost full, I could show green instead of red, which is default.

    • admin

      Thanks Isaac! We’re glad you like them. You are able to set a range of extension points to override the default functionality o the Gauge component. A full list of extension points can be found on the justgage website under the “Customize Style” link half way down the page. For example, you can set the extension point “title” with the value “My Title” to override the gauge title property.

      Good luck!

  6. Isaac

    Thanks for pointing to justgage page.
    That’s definitely helpful.

    But still, I cannot levelColor from default to others.
    I’m using
    levelColors: {#FF0000,#F9C800,#A8D600}
    but seems like not picking it up.
    Could you share what syntax/format should be used for this extension point?

    Also, some of extension points, such as “showMinMax” or “showInnerShadow” take bool value.
    I passed true, false, 1, 0, but none seems to responding…either.
    Could you share your insight on this, too?

    Sorry to bombing with lots of question, but this is really exciting feature that we do not want to miss out.

    • Joel Latino

      Hi Isaac,

      About your issues the levelColors is a array object (should be something like that levelColors: [#FF0000,#F9C800,#A8D600]).
      However, CDE just support String and function types in the extension point properties. So, your properties should be like that:
      levelColors: function() { return [#FF0000,#F9C800,#A8D600]; },
      showMinMax: function() { return false; },
      showInnerShadow: function() { return true; }

      Any issues, please report on github.

      Joel Latino

  7. Claudio

    Really good job!!!
    I am also trying to customize levelColors with NO success. I tried all the options detailed here, plus some of the justgage page, and no one worked…
    Any detailed help?
    Thanks in advance.

    • Joel Latino

      Hi Claudio,

      Did you try the example for Issac?
      The levelColors property is an array and because the CDE is limited you need to use a function on the extension point that will return an array with the colours.


  8. Anonymous

    If you’re trying to use a SQL query as the datasource of the gauge component, then make sure your SQL query returns both name and value. Eg: select ‘score’ , 10 from dual
    If you return only value in SQL query then the gauge will show up with a -1

    • Harris Ward

      The plugin doesn’t not support Youtube videos at the moment. Please refer to the documentation for more information.

  9. Eduardo Philippi

    Hello, I’m doing something wrong, I am not able to change levelColors, insert the code below into the Value Extension points and nothing happens, is that right? This code Value of Extension points?

    levelColors: function () {return [# FF0000, # F9C800, # A8D600]; }

    • Harris Ward

      Looks like we made a tiny mistake. The colour values in the array must be set as strings. So instead of:

      levelColors: function () {return [# FF0000, # F9C800, # A8D600]; }

      you want:

      levelColors: function () {return [‘#FF0000’, ‘#F9C800’, ‘#A8D600’]; }

      Also hex colours do not have a space between the # and the colour code.

      Have fun!

  10. Eduardo Philippi

    Great, worked!!!


  11. sam

    First of all great work..Thanx a lot for sharing such awesome feature..

    i am try to playing with gauge component and also i have installed the ivy cde components.
    i just want to know is there any possibility to see the any working dashboard in cde editor so that i can understand proper how you are using or calling the component..if yes then plz guide me how i can see..i did not find any option like that ..if not then can you plz suggest me any other work around so that i can understand proper and explore a complex dashboard as per my requirement.

    • admin

      You are able to open up our samples in Edit mode and look at how we created them.

      Hope that helps!

  12. sam

    no i was not able to open could you please guide me how i can see…i did not find any option for editor mode..

  13. sam

    Hello Admin,
    could you please help me how i can open your pre bulid example in my cde editor mode…if possible please provide me any sample dashboard download link..that will be really helpful for me…
    thanx in advance once again

  14. Giandri Nugroho

    Hello Admin,
    its a very cool component. but I wonder, how can I adjust gauge width and height? thanks please help me

    • Harris Ward

      The Gauge will take the height and width of its parent div in the dashboard

  15. Giandri Nugroho

    what if I have adjusted the div and the gauge isn’t adjusted? what you suggest then? thanks

  16. Octavio renteria


    I just installed the plugin, but when I want to create a new dasboard page is blank, why can this be happening?

    help please

    thank you

    • admin

      Can you let us know what version of the Pentaho Bi Server, Saiku and Ctools you have installed please?

Leave a comment

Leave a Reply