Add N number of CircularGauges

[Georg Thomas]

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]

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, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/sample_(2)2133877432 

 

Regards, 

Dharani. 

[Georg Thomas]

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]

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, 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/gaugeSample382148735 

 

If the above doesn’t meet your requirement, kindly revert us with clear details about your requirement.  

 

 

Regards, 

Dharani.