Custom Chart from Image

skylerh · January 29

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.

MarkSnodgrass · January 30

Here is a video where I walk through how to create a custom chart that you may find helpful.

https://youtu.be/SHnXk9LtK7s

Manasi_Panov · January 29

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

skylerh · January 30

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?

MarkSnodgrass · January 30

Here is a video where I walk through how to create a custom chart that you may find helpful.

https://youtu.be/SHnXk9LtK7s

ArborRose · January 30

I don't know where Domo posted the Canva Challenge submissions from last year. Mine was a blank brick showing Japanese Cherry Blossom dates, integrated to Domo data. Move your cursor over an image on the map and it would overlay the data for that location.

https://embed.domo.com/embed/pages/wmzPz

If your image is svg in Inkscape, then you have the individual images. Select the layer or objects that make up the component to overlay. Export "selected" to create a png with a transparent background. You can then overlay that object over your original image in the same way I did in my brick.

skylerh · January 30

https://community-forums.domo.com/main/discussion/comment/100423#Comment_100423

I have watched this video multiple times. It was helpful to see the entire process, however, I think the image I have is too detailed to function as a custom chart.

ArborRose · January 30

Here's an example using your image. (Although I would improve this by using Inkscape to export the proper images and overlays).

https://embed.domo.com/cards/ZY13R

My images are self hosted…see the placeholder in html code. You will need to host the images and modify the paths accordingly. When you hover over the bin, you see the following.

Two images, the part and the whole.

Create a blank brick from the AppStore. In Javascript, HTML, CSS, add the following

Javascript:

document.addEventListener("DOMContentLoaded", function () {

    const partElement = document.querySelector(".part");

    const tooltip = document.querySelector(".tooltip");


    partElement.addEventListener("mouseover", function () {

        tooltip.style.display = "block";

    });


    partElement.addEventListener("mouseout", function () {

        tooltip.style.display = "none";

    });

});

html:

<div class="brick-container">

    <img src="https://{your_hosted_path}/images/whole.png" class="background" />

    <div class="overlay">

        <img src="https://{your_hosted_path}/images/part.png" class="part" />

        <div class="tooltip">

            <p><strong>Description:</strong> Storage Bin</p>

            <p><strong>Price:</strong> $850</p>

        </div>

    </div>

</div>

Css:

.brick-container {

    position: relative;

    width: 731px;

    height: 450px;

}


.background {

    width: 100%;

    height: auto;

}


.overlay {

    position: absolute;

    left: calc(744px - 372px);

    top: 93px;

}


.part {

    width: 56px;

    height: 67px;

    cursor: pointer;

}


.tooltip {

    display: none;

    position: absolute;

    left: 60px;

    top: 0;

    background: rgba(0, 0, 0, 0.8);

    color: #fff;

    padding: 8px;

    border-radius: 5px;

    font-size: 14px;

    white-space: nowrap;

}


.overlay:hover .tooltip {

    display: block;

}

Take that, and go a step further and call the data from a Domo dataset or webform.

skylerh · January 30

@ArborRose

Wow, super insightful. I never thought to use a domo brick for this use case. I will play around with it and see if it is something to pursue further. Thank you for the detailed explanation! Curious, I have a domo image card with my machine. Would I be able to embed that card within the brick instead of an html hosted image?

ArborRose · January 30

Yes, you can use your embedded image. @MarkSnodgrass has a trick for that.

Mark's cool trick - If you create a quick note card with a graphic, you can right click in your browser to see the source. This shows the Domo embedding, which can be used to host an image inside of domo. If the card is deleted, Domo still holds the image.

Example:

<iframe src="https://embed.domo.com/embed/pages/xxx" width="1248" height="1620" marginheight="0" marginwidth="0" frameborder="0"></iframe>

ArborRose · January 30

{removed, duplicate}

ArborRose · January 30

{removed, duplicate}

Custom Chart from Image

Best Answer

Answers

Categories