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?
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?
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...
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.
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?
@cwolman - you didn't do anything wrong. The interactive filters do not work on mobile.
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:
Final Custom SVG Map (with Youtube selected):
Final Custom SVG Map (with nothing selected):
Thanks again everyone!
I like the Color Rules addition. Looks great
Piggybacking on this thread, is there a way to use this process and get links to different pages instead of data filters?
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.