Especially the filter at the top that has images and titles at 00:42 (from the same video as above and see screenshot below)
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!
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.
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.
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.
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
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).
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.