We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Circular Gauge / Background-Image?

Thread ID:

Created:

Updated:

Platform:

Replies:

123717 Apr 13,2016 11:22 AM Apr 18,2016 05:11 AM JavaScript 3
loading
Tags: ejCircularGauge
Julio
Asked On April 13, 2016 11:22 AM

Hi, i would like to know if it is possible to put a background image in the Circular Gauge control.

I attached a file where it is the image that i would like to change and the visual configuration of the Gauge that i made.

Regards

Attachment: Gauges_dc2477eb.rar

Sanjith Kesavan [Syncfusion]
Replied On April 14, 2016 04:50 AM

Hi Julio,

We have analyzed your query and prepared sample based on your requirement. In the sample for placing the image inside the gauge, we have used indicators. Please find the below code example.

[JS]

scales: [{

            showIndicators: true, indicators: [{

                width: 30, type: "image", value: 0, imageUrl: "circle.png", position: { x: 80, y: 70},

            }]
        }]


In the above code example, we have set the indicators type as “image” and in the imageUrl we have given the image location. Now the gauge will render like below.


In the below link, we have attached sample for your reference.
Sample link: http://www.syncfusion.com/downloads/support/forum/123717/ze/Circulagauge-1560165882

To know more details about the indicators please follow the below link
http://help.syncfusion.com/js/api/ejcirculargauge#members:scales-indicators

Please let us know if you have any concern.

Regards,
Sanjith.

Julio
Replied On April 17, 2016 11:04 PM

Hello Sanjith, thank you very much for your answer. I made it and it works perfect. 

I have one more question. I need to know if is possible change the layers of the object, for example "z-index", so the image would be in the background and the pointers over it.

Regards,
Julio

Sanjith Kesavan [Syncfusion]
Replied On April 18, 2016 05:11 AM

Hi Jolio,
We have analyzed your query and modified sample as per your requirement. To place the image, at the back of the pointer, we have used following code in “drawIndicators” event.

[JS]

function drawIndicators(sender) {

        sender.context.globalCompositeOperation = 'destination-over';
    }


In the above code, we have set “globalCompositeOperation” as “destination-over”. Now pointer will be drawn over the image. Please find the below screenshot which illustrate pointer is drawn over the image.


As per your requirement, we have modified the sample with the “markerType” as “diamond”. Please find the below code example.

pointers: [{

                type: "marker", markerType: "diamond", width: 40, length: 20, backgroundColor: "red"
            }],


If we run the sample, then gauge will render like below.

Please find the sample from the below location.
Sample link: http://www.syncfusion.com/downloads/support/forum/123717/ze/Gauge1439528581

Regards,
Sanjith.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;