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

Reply
White Belt

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

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? 

Black Belt

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

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?


______________________________________________________________________________________________
“There is a superhero in all of us, we just need the courage to put on the cape.” -Superman
______________________________________________________________________________________________
White Belt

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

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

 

Black Belt

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

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. 


______________________________________________________________________________________________
“There is a superhero in all of us, we just need the courage to put on the cape.” -Superman
______________________________________________________________________________________________
Major Blue Belt

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

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
Black Belt

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

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


______________________________________________________________________________________________
“There is a superhero in all of us, we just need the courage to put on the cape.” -Superman
______________________________________________________________________________________________
jto
Visitor

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

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!

Black Belt

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

I like the Color Rules addition.  Looks great


______________________________________________________________________________________________
“There is a superhero in all of us, we just need the courage to put on the cape.” -Superman
______________________________________________________________________________________________
Visitor

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

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

Black Belt

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

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. 


______________________________________________________________________________________________
“There is a superhero in all of us, we just need the courage to put on the cape.” -Superman
______________________________________________________________________________________________
Announcements
Looking for the latest Community solutions? Please visit our accepted solutions board here!