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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add N number of CircularGauges

Thread ID:

Created:

Updated:

Platform:

Replies:

143374 Mar 17,2019 10:02 PM UTC Mar 19,2019 01:01 PM UTC ASP.NET MVC - EJ 2 3
loading
Tags: CircularGauge
Georg Thomas
Asked On March 17, 2019 10:02 PM UTC

Hi!

I'm attempting to insert multiple circular gauges generated programmatically. I have one set of js functions for all the gauges to support this. The first gauge shows up, but subsequent gauges do not. Are multiple js functions required? Each gauge has the same calls to the functions, and everything in the functions is generic with no reference made to specific gauges. What do I need to get this working as intended?

Thank you.


Dharanidharan Dharmasivam [Syncfusion]
Replied On March 18, 2019 10:16 AM UTC

Hi Georg, 
 
Greetings from Syncfusion. 
 
We have analyzed your query and we have prepared a sample based on your requirement. In that sample, we have rendered N number of gauges by using button click event. In that button click event, we have created a new div HTML element for newly rendered gauges. And then append the newly added gauges to that element with unique id for each gauge. 
 
Please find the below code snippet to achieve this requirement, 
 
<button id="add" onclick="AddGauge()">Click to Add Gauge</button> 
 
// parent element for gauges 
<div id="gauges">  
</div> 
 
var count = 0; 
function AddGauge() { 
        var parent = document.getElementById('gauges'); 
       //Creating div element dynamically 
        var element = document.createElement('div'); 
        //Creating unique id here 
        element.id = 'container'+ count; 
        parent.appendChild(element); 
        var circulargauge = new ej.circulargauge.CircularGauge({ 
            // other configurations 
       }); 
        circulargauge.appendTo('#' + element.id); 
        count++; 
    } 
 
Screenshot: 
 
 
Sample for your reference, can be found from below link, 
 
Regards, 
Dharani. 


Georg Thomas
Replied On March 18, 2019 12:04 PM UTC

Hi Dharani,

I appreciate the code snippet, but I believe I have not made myself clear. I am attempting to create gauges in specific parts of my ASP.NET MVC page, I have c# code to create the gauge:

@(Html.EJS().CircularGauge("container").Loaded("loaded").Load("gaugeLoad").Title("Total Score")
    .TitleStyle(ts => ts.Size("18px")).Axes(axes => axes.Radius("70%").StartAngle(180).EndAngle(180).Minimum(1).Maximum(4)
    .LabelStyle(ls => ls.Position(Position.Inside)).MajorTicks(major => major.Height(0)).MinorTicks(minor => minor.Height(0))
    .Pointers(pt => pt.Value( DataLibrary.BusinessLogic.AssessmentProcessor.LoadTotalResult(assessmentId2).Select(x => x.score).DefaultIfEmpty(0).Average() ).RoundedCornerRadius(20).Type(PointerType.RangeBar).Radius("90%").Color("#e5ce20").PointerWidth(30).Animation(animation => animation.Enable(true))
    .Border(border => border.Width(0)).Add()).LineStyle(lin => lin.Width(0))
    .Ranges(ranges => ranges.Start(1).End(4).Radius("90%").StartWidth("30").EndWidth("30").Color("#E0E0E0").RoundedCornerRadius(0).Add()).Add()).Render())


And javascript to handle the gaugeLoad and the loaded functions.

    <script type="text/javascript">
        var circulargauge;
        function gaugeLoad(args) {
            console.log(args.gauge.axes[0]);
            var arctheme = location.hash.split('/')[1];
            arctheme = arctheme ? arctheme : 'Material';
            args.gauge.theme = (arctheme.charAt(0).toUpperCase() + arctheme.slice(1));
            if (!circulargauge) {
                circulargauge = args.gauge;
                args.gauge.axes[0].minorTicks.height = 0;
                args.gauge.axes[0].majorTicks.height = 0;
                args.gauge.axes[0].labelStyle.font.size = "0px";
                args.gauge.axes[0].annotations = [{
                    content: '<div id="pointervalue" style="font-size:35px;width:120px;text-align:center">' +
                        parseFloat(Math.round(2 * 100) / 100).toFixed(2).toString() + '/4</div>',
                    angle: 0,
                    zIndex: '1',
                    radius: '0%'
                },
                {
                    content: '<div id="slider" style="height:70px;width:250px;"></div>',
                    angle: 0,
                    zIndex: '1',
                    radius: '-100%'
                },
                ];
            }
        }
        function loaded(args) {
            if (!isNaN(sliderValue)) {
                circulargauge.isProtectedOnChange = true;
                if (sliderValue >= 1 && sliderValue < 2) {
                    circulargauge.axes[0].pointers[0].color = '#ea501a';
                }
                else if (sliderValue >= 2 && sliderValue < 3) {
                    circulargauge.axes[0].pointers[0].color = '#e5ce20';
                }
                else if (sliderValue >= 3 && sliderValue < 4) {
                    circulargauge.axes[0].pointers[0].color = '#a1cb43';
                }
                else if (sliderValue >= 4 && sliderValue < 5) {
                    circulargauge.axes[0].pointers[0].color = '#82b944';
                }
            }
        }


When I reuse my C# code I do not get a new CircularGauge in the position. I can't find any specific reference to a div in the code so I figure I must have a concept completely wrong. I would really appreciate further assistance in this matter. Apologies for the lack of code-blocks but I seem unable to create them in the text edit UI.

Thank you.



Dharanidharan Dharmasivam [Syncfusion]
Replied On March 19, 2019 01:01 PM UTC

Hi Georg, 
 
We have analyzed your query and your code snippet. We have prepared a sample based on your code snippet. In that sample, we have rendered two gauges by using the for loop. Please find the below screenshot, while rendering the gauges with your code snippet 
 
In the above screenshot, the second gauge is not applying the JS functions as like the first gauge. Did you mean this scenario? If yes, in that JS functions, there will be if condition to check circulargauge variable is whether undefined. And then assign the gauge instance to that variable if it is undefined. For the first gauge, it will undefined. But when comes to second gauge, it will not be undefined, so that’s why inside the JS functions changes not applied for the remaining gauges. Kindly remove that if condition, then JS functions working for all the gauges.  
Please find the below code snippet to remove the if condition, 
 
function gaugeLoad(args) { 
       var arctheme = location.hash.split('/')[1]; 
        arctheme = arctheme ? arctheme : 'Material'; 
        args.gauge.theme = (arctheme.charAt(0).toUpperCase() + arctheme.slice(1)); 
        circulargauge = args.gauge; 
        args.gauge.axes[0].minorTicks.height = 0; 
        args.gauge.axes[0].majorTicks.height = 0; 
        args.gauge.axes[0].labelStyle.font.size = "0px"; 
        args.gauge.axes[0].annotations = [{ 
            content: '<div id="pointervalue" style="font-size:35px;width:120px;text-align:center">' + 
                parseFloat(Math.round(2 * 100) / 100).toFixed(2).toString() + '/4</div>', 
            angle: 0, 
            zIndex: '1', 
           radius: '0%' 
        }, 
        { 
            content: '<div id="slider" style="height:70px;width:250px;"></div>', 
            angle: 0, 
            zIndex: '1', 
            radius: '-100%' 
        }, 
        ]; 
    } 
 
Screenshot: 
 
Sample for your reference, can be found from below link, 
 
If the above doesn’t meet your requirement, kindly revert us with clear details about your requirement.  
 
 
Regards, 
Dharani. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

;