Image as background and values plotted on the image

Question

I received the following customer request. Our customer provides images of objects: buildings, man-made objects in the landscape. They would like to plot values from a database on this background image on custom-places on this image. I am assuming with thresholds that influence the colour of the values. Is something like this possible?

Eric

Attachment: Dijken.jpeg_3af1328d.zip

Suriya · Answer

Hi Eric, 
 
For your requirement can be achieved by creating a diagram widget as custom widget with the image as background of the diagram widget and plot values on the diagram widget. But doing resizing operations to the custom diagram widget, background image will not be resized automatically since the background image size is static.   
 
We will work on this and get back to you with example custom widget in a couple of days and we appreciate your patience. 

Regards, 
Suriya

Suriya · Answer

Hi Eric,

We have prepared the Diagram custom widget as per your requirement. Please find the custom widget below.

Diagram Custom Widget: https://www.syncfusion.com/downloads/support/forum/140139/ze/Diagram_widget1256932834

Please follow the below steps to import and use Diagram custom widget in the Dashboard Application.

Step 1 : You need to import the Diagram custom widget into Dashboard Designer. Refer to the user guide for how to import.

Step 2 : After importing the Diagram custom widget into the Dashboard Designer, you have to bind the measure column into Value field and dimension column into Column field as like below screenshot.

Step 3 : You will get the below output in the designer (Click Fit to screen size for the Canvas size)

Custom widget output in Designer:

Step 4: In the above Diagram custom widget, you can able to set the color for particular color ranges.

Go to Properties -> Range Settings

Final output in the Dashboard Viewer will be :

Also, We have created sample dashboard (SYDX file) with the diagram custom widget and uploaded in the below link,

https://www.syncfusion.com/downloads/support/forum/140139/ze/Diagram_Dashboard-1839332491

NOTE:

You can change the background image used in the custom widget if you need. Please find the below steps to change the image used in the custom widget.

Step1 : Extract the Custom widget (.sycw) file. After extracting you can find the below files

Step 2 : Either go to style folder, which is currently use in the given image or you can create any folder inside the custom widget and make use of that folder path while referring the background image in the custom widget.

Step 3 : Replace the image name with already presented image name in the sourcefile.js in src folder. Refer the below screenshot.

Step 4 : If you need to modify the widget, you can modify the widget and import it again in the dashboard designer to reflect the changes. For packing the custom widget please refer to the UG link.

Please let us know if this custom widget is helped for your query and let us know if you need any further assistance.

Regards,

Suriya

Eric Kok · Answer

Suriya, that is pretty cool! One question: how can I define more indicators? Eric

Suriya · Answer

Hi Eric,

Find the below steps to add additional indicators on the image using provided Diagram custom widget

Step 1 : Extract the Custom widget (.sycw) file. After extracting you can find the below files

Step 2 : Open the src folder and you can find the sourcefile.js and Open it in any text editor

Step 3 : Add the highlighted code (with one more condition) as like below screen shot.

Where (Number) à represents the numerical value which will be used to positioning the indictor on the map; And you can the shape as rectangle instead ellipse.

Step 4: Once added conditions and save the file and pack to Custom widget. Refer to the UG how to pack it.

For example, find the custom widget with additional two additional indicators.

Diagram Widget(modified) : https://www.syncfusion.com/downloads/support/forum/140139/ze/DIAGRA~1-558132134

Thanks,

Suriya