Custom Chart from Image

I have an image of a machine that I would like to add into a Domo App. My goal is to allow end users to click on labels or specific components of the machine to see various stats and data for that area. These unique clickable components would act as a filter so that when clicked, the cards in the app would show the data for that machine component.

I converted my image to bitmap format and imported it into InkScape to trace it using these instructions. I then modified the ID's in the XML to configure clickable areas of the machine to match my dataset I am using.

However, when I import the svg file, it doesn't look right. Below is the svg image after the tracing in InkScape:

and here is the image after the custom chart svg file import:

Obviously the difference between the images is dramatic and the imported custom chart would not be usable as it looks currently.

For my use case I explained above, is there potentially another strategy to take, or is the custom chart import route the best approach.

Tagged:

Answers

  • Manasi_Panov
    Manasi_Panov Contributor

    Hello @skylerh,

    You probably have to convert the image into vector shapes. This manual may assist you.

    Tracing an Image — Inkscape Beginners' Guide 1.0 documentation

    If you found this post helpful, please use 💡/💖/👍/😊 below! If it solved your problem, don't forget to accept the answer.

  • skylerh
    skylerh Member

    Hello, @Manasi_Panov,

    I did convert the image into vector shapes using the above manual. I have tried countless options and the final image in the SVG file does not come out even remotely similar. Are there specific options within the InkScape settings to make this image look more realistic? Or is there another way to import this image into Domo for my use-case?