Circular graphs displaying percentages at their center, illustrating the distribution of checked checkboxes across various categories

Looking for a JavaScript script that displays results in the form of circles with percentage values at their centers, based on the number of checkboxes checked in different categories. The circle radius should be determined by the percentage values - for example, 40% would result in a small circle, while 80% would be larger.

For example:

Environment:

  1. Keep Your Environment clean.

  2. Avoid pollution.

    3. Nature:

  3. Preserve Nature.

  4. Grow trees.

    5. If one checkbox is checked in the Environment section and two checkboxes are checked in Nature, the Nature circle should have a higher percent value displayed at its center compared to the smaller Environment circle. I need a total of five circles like this. Can anyone assist?

Thank you.

javascriptjquerycss

Answer №1

Give it a shot:

JavaScipt Magic:

   $(function(){

    var maxHeight = 500, // This is the maximum height of the circle

    percentage = Number($('#result').text()); // This represents the percentage value

    percentage = percentage / 100;

    $("#circle").css({

        "width" : maxHeight * percentage,

        "height" : maxHeight * percentage,


    });
});

CSS Sorcery:

  #circle {

    border: 1px solid red;

    border-radius: 50%;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

    background:blue;

}

Answer №2

Is there something similar to this code snippet? Check it out here: http://jsfiddle.net/jonigiuro/xP25c/

function generateCircles(val1, val2, val3, val4) {
    $('.one').css({
        width: val1 * 2,
        height: val1 * 2,
        lineHeight: val1 / 10
    }).text(val1 + '%');
}

You can use the function like this:

generateCircles(20, 50, 5, 15);

Use these numbers as values in the function.

I also developed a jQuery plugin that serves a similar purpose some time ago:

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Shifting the key of a choropleth map with R, rMaps, and datamaps

My challenge is to center the legend below a choropleth map of the United States. I don't have much experience with JS or CSS, but I decided to delve into the datamaps.all.min.js file in the R-3.2.1\library\rMaps\libraries\datamaps ...

cssrrchartsdatamapsrmaps

Exclude the key-value pair for any objects where the value is null

Is there a way to omit one key-value pair if the value is null in the TypeScript code snippet below, which creates a new record in the Firestore database? firestore.doc(`users/${user.uid}`).set({ email: user.email, name: user.displayName, phone: ...

javascripttypescript

How can I ensure that the form submit event is delayed until the onChange event is completed when using jQuery?

Imagine a scenario where a textbox on a webpage has a 'change' event attached to it using jQuery. $('.myFormClass').on('change', '.amount', function () { // An AJAX call is made here, and the respons ...

javascriptjquery

React - How to Close Material-UI Drawer from a Nested Menu

Currently, I am utilizing a fantastic example (here) to create a dynamic nested menu for my application. Taking it a step further, I am trying to integrate it into a Material UI appbar/temporary drawer. My goal is to close the drawer when the user clicks o ...

javascriptreactjsmaterial-ui

Element enclosed within a territory of mongoose Schema

In the midst of developing an API that provides detailed information about laptops, I am utilizing Node.js and MongoDB with Mongoose. The schema I am working with is as follows: const productSchema = mongoose.Schema( { name: { type: String, ...

javascriptnode.jsmongodbmongoosemongoose-schema

What is the fewest amount of commands needed to generate a client-side Javascript code that is ready for use?

In the realm of JavaScript libraries found on Github, it has become increasingly challenging to integrate them directly into client-side projects with a simple script tag: <script src="thelibrary.js"></script> The issue arises from the browse ...

javascriptnode.jsnpmwebpack

Saving form data with a tinymce textarea, radio button, and checkbox to the database

My form contains multiple textarea fields, radio buttons, checkboxes, and a select input. Initially, I was able to submit the form using PHP without any issues. However, when I integrated TinyMCE with one of the textareas, I had to introduce JavaScript to ...

javascriptphpjqueryforms

The changes to the grid options do not reflect immediately on the UI Grid interface

I am currently working on a project using the UI Grid module in AngularJS. I want to include row filtering as an option, but since not all users require it and the filter boxes take up a lot of space, I decided to disable filtering by default and add a but ...

javascriptangularjsui-grid

Is Vercel deploying an incorrect version?

After working on a project for a potential employer and fixing all errors, I deployed it using Vercel. However, upon deployment, the version that was sent to me was displayed instead of the completed one I see when running npm start locally. I would great ...

javascriptreactjsnpmgoogle-cloud-firestorevercel

How to eliminate space preceding a div using jQuery?

I am trying to modify the following code snippet: <div id="one">1</div> <div id="two">2</div> <div id="three">3</div> Is there a method for me to eliminate the space before div "three" in order to achieve this result: ...

javascriptjquery

What is the best way to ensure proper alignment of elements in a React application?

Currently, I am delving into learning react and antd by putting it into practice. My goal is to create a layout with a button and two input fields that have a 10px gap between them, while also displaying the titles of each field directly above them. To ach ...

htmlcssreactjsantd

The table spills over the container and disappears underneath the navbar

After downloading a template table from the internet and customizing it to my liking, I encountered an issue where it does not adhere to the assigned settings (as shown in the image), but that's not the only problem. The dropdown navbar on my website ...

htmlcssnavbarcss-tables

Import the JSON data into the designated storage unit

$(".btn-primary").click(function(){ runSuccessFunction(jsonObj); }); If I need to update the JSON data in the JSFiddle Code example, how can I reload only the container by clicking a button? I want to run the code every time I make a change to the J ...

javascriptjsonhtml

Leveraging Angular's catchError method to handle errors and return

One of my challenges involves a model class that represents the server response: class ServerResponse { code: number; response: string; } Whenever I make api calls, I want the response to always be of type Observable<ServerResponse>, even in ...

javascriptangulartypescriptrxjsobservable

Buttons in HTML function properly on desktop but are ineffective on mobile devices

My website is almost complete, but I am facing some challenges with the mobile version. All buttons that use JavaScript are not functioning properly, whereas buttons with simple links work perfectly fine. This issue doesn't occur on Chrome when using ...

javascripthtml

TypeScript - Issue with generic function's return type

There exists a feature in typescript known as ReturnType<TFunction> that enables one to deduce the return type of a specific function, like this function arrayOf(item: string): string[] { return [item] } Nevertheless, I am encountering difficulti ...

javascripttypescripttypes

Is it possible to determine the time format preference of the user's device in Angular? For example, whether they use a 24-hour system or a 12-hour system with AM

In Angular, is there a way to determine whether the user's time format is set to 24-hour or 12-hour system? Any help would be greatly appreciated. Thanks! ...

javascriptangulartypescript

"Transitioning from jQuery to Vanilla Javascript: Mastering Scroll Animations

I'm seeking guidance on how to convert this jQuery code into pure Javascript. $('.revealedBox').each(function() { if ($(window).scrollTop() + $(window).height() > $(this).offset().top + $(this).outerHeight()) { $(this).addCla ...

javascriptjquerycss

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

How can I center an image inside a view in the middle of the screen using position: "absolute"? The issue is that the view takes up 100% of the width and height of the screen, causing all components underneath it (such as input fields and buttons ...

javascriptcsstypescriptreact-nativeexpo

Flexible DIVs with a maximum width of 50% that adjust to different

I'm having trouble getting these two DIVs to display properly within a parent DIV while maintaining responsiveness. I want them to each take up 50% of the screen with a 10px margin between them. Does my current code approach seem correct? .box-cont ...

htmlcss