Creating Filter Card with Images and Text (Domo Stories Video)

jto
jto Member
in Charting

Logged in today and saw the cool Domo Stories update - this demo video ("Watch Overview" video here or direct link) showed a lot of things that I'd really like to recreate!

 

Especially the filter at the top that has images and titles at 00:42 (from the same video as above and see screenshot below)

Screenshot at Mar 22 15-29-56.png

 

In the video it shows a card with images of each category (Brake Cables, Brake Lever, Cassette, Chain, etc...) and the name of the category, then when an image in this card is clicked on, it filters the data on the cards just below.

 

How can I make this in Dashboard Mode?

 

I've tried the following all in Dashboard Mode to no avail:
- Inserting an image into a layout content box ex. Facebook logo PNG, but cannot add any filter functionality to it

- Making a new Filter Card based on an existing dataset, but none of the Filter chart types let me insert images or custom text

- Making a Notebook and adding an image to it, but cannot apply any filter functionality to it

 

Thanks in advance!

Tagged:

Best Answer

Answers

  • ST_Superman
    ST_Superman Domo Employee

    I believe that "filter" card is actually a custom SVG map.  By leveraging the custom map with interactive filters, the card is essentially operating as a filter card.

  • TheDean
    TheDean Member

    I am also curious how to do this. 

  • Bindur2112
    Bindur2112 Member

    I would also greatly appreciate understanding how to accomplish this.

  • pimogo
    pimogo Member

    I'd like this too! Is there a tutorial somewhere enabling us to work through this problem?

  • ST_Superman
    ST_Superman Domo Employee

    You would need to have a .SVG image file.  But here is a tutorial on how to use Inkscape to create regions embeded into a .svg image, which you could then use to upload as a custom map to your domo instance and then map your data to the regions that were created.

     

    https://mapsvg.com/tutorials/create-interactive-map-from-svg-file/

     

     

    My issue is finding a good way to convert the images that I have to a good .svg format.  There are a lot of online free converters, but I haven't found one that I thought did a good job yet.  

     

    If I can find some time to play around with this, I will try to post a tutorial here.

  • Godiepi
    Godiepi Coach

    The easiest way for me was using illustrator , pretty much you can convert any image into an svg and/or build your own from scratch ... it is very cool, I have built few custom charts and the outcome is great. you'll need an adobe illustrator license of course.  here an example

     

    Screen Shot 03-29-19 at 12.09 PM.PNG

    Domo Arigato!

    **Say 'Thanks' by clicking the thumbs up in the post that helped you.
    **Please mark the post that solves your problem as 'Accepted Solution'
  • pimogo
    pimogo Member

    a tutorial would be super helpful. but i understand such things take time.  i understand the need for an svg file but i guess the part i'm having a hard time fully grasping is converting the image into a interactive visual that filters MY data. there must be code involved surely. also when creating a custom image how does one define the different click zones, etc. for example, in the example above with the various assembly parts, presumably one svg image, how do you have each part (conveyed as a unique subimage(?) behave differently. XML?  and if so, how do you tie xml to an image.. clearly, i'm missing something. also i wish to bring that custom map into a normal domo report.. i'm not looking to make an infographic (yet).  

     

     

  • pimogo
    pimogo Member

    This is absolutely brilliant Superman. I've created my svg image already. All i have to do is follow your steps to get it in domo and connect it to my dataset. You've saved me a lot of frustration going forward. Thanks so much! Have a great weeekend.

  • pimogo
    pimogo Member

    so i imported my image that when pulled up in a browser looked great. exactly as i had created it in illustrator.. but when importing it into domo. the color reverted to shades of blue and the individual images within the svg into squares..  did i do something wrong? 

  • ST_Superman
    ST_Superman Domo Employee

    The colors won’t come through in the map. The map cards are all just one color with different shades for values. You could change it to any of the other themes, but it would be all one color. As for the squares, did you “draw” a square around your shapes when you labeled your groups?  Or did you select the actual vectors that made up your shapes?

  • pimogo
    pimogo Member

    thanks for the quick reply!  the individual images are visably circular, but yes each is surrounded by white space (making it a perfect square).  i thought the white would just blend with the background of the card.. but it seems now that may not be the case.. do i have to make the background transparent.. 

     

    the image as it stands today out of illustrator... 

     

  • ST_Superman
    ST_Superman Domo Employee

    Those look great. Let me know if changing the background doesn’t work. I’m not familiar with illustrator, but that should do the trick. 

  • cwolman
    cwolman Contributor

    This is awesome!  It started me down the right path and I was able to create the svg with inkscape without using the online converter which gave me clearer images.  The card works great on the computer for filtering but does not appear to work on the mobile app.  Did I do something wrong or is this not an option for mobile?

     

    Thanks again!


    -----------------
    Chris
  • ST_Superman
    ST_Superman Domo Employee

    @cwolman - you didn't do anything wrong.  The interactive filters do not work on mobile.  

  • jto
    jto Member

    Thanks everyone for your helpful questions and replies and especially to @ST_-Superman-_ for your wisdom and great Youtube tutorial video!

     

    With your help I was able to create my own custom SVG filter card using GIMP on Mac (Inkscape wasn't easy to install on macOS unfortunately) and it works great!

     

    @pimogo Indeed as Superman mentioned I needed to have my base image with transparent areas before transforming it into an SVG (white backgrounds didn't work). Hope this works for you as well.

     

    One extra thing which might be helpful is that you can define specific colours in Domo to show on your custom map. You can do this in Chart Properties -> Ranges.
    Note: I've only tested this on an image with 3 items, and the Ranges menu goes up to 9 ranges. Not sure if you can pick specific colours for more than 9 different elements.

     

    Overall here are the resources I referred to:

    - ST -Superman-'s video tutorial: Plugging this because it's awesome

    - How to create an SVG image in GIMP : Tutorial based on an older version of GIMP but works the same on the new version, it helped me get a cleaner SVG than the automatic converter

    - Domo documentation on Custom Charts: To guide me through the XML process

     

    Attached are a few images of what I was able to do.

     

    Define custom colours with Chart Properties -> Ranges:

    custom-svg-map_range-colors.png

     

    Final Custom SVG Map (with Youtube selected):custom-svg-map_social-platforms_1.png

     

    Final Custom SVG Map (with nothing selected):

    custom-svg-map_social-platforms.png

    Thanks again everyone!

  • ST_Superman
    ST_Superman Domo Employee

    I like the Color Rules addition.  Looks great

  • CKing
    CKing Member

    Piggybacking on this thread, is there a way to use this process and get links to different pages instead of data filters?

  • ST_Superman
    ST_Superman Domo Employee

    Do you mean to use a custom .svg to link to another page?

     

    thats an interesting question. I’ll have to dig into that one. You can use html code to create page links with an image from within a table card. 

This discussion has been closed.

Categories