I am looking to use AngularJS to refresh a div tag when an image is clicked

I need help refreshing the pie chart div when I click on the image using AngularJS

div with the image:

<div class="col-md-3 col-sm-12 col-xs-12">
                    <div class="panel panel-primary text-center no-boder blue">
                        <div class="panel-left pull-left blue">
                            <i class="fa fa-comments fa-5x"></i>
                        </div>
                        <div class="panel-right">
                            <h3>Assessment</h3>
                        </div>
                        <img src="assets/images/refresh.png" ng-click="refreshChart()"/>
                    </div>
                </div>

Div that needs to be refreshed:

  <div class="col-xs-6 col-md-3">
                    <div class="panel panel-default">
                        <div class="panel-body easypiechart-panel">
                          **<div class="easypiechart" id="easypiechart-blue" data-percent="82"><span class="percent">82%</span>**
                            </div>
                        </div>
                    </div>
                </div>

app.js code

var sampleApp1 = angular.module('sampleApp1', []);
sampleApp1.controller('dashctrl', function($scope) {

$scope.refreshChart = function (){
$('.chart').data('#easypiechart-blue').update(40);
};  

});

Answer №1

To update the chart data and reset it, you can create a method in your AngularJs controller like this:

$('.chart').data('easyPieChart').update(40);
.

$scope.refreshChart = function (){
    $('.chart').data('newChartData').update(40);
}

Incorporate the method into your HTML like so:

<img src="assets/images/refresh.png" data-ng-click="refreshChart()"/>

If you're looking for inspiration, check out the first page of this link for a button to refresh pie charts:

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

Creating a custom function with event handling and piping in Node.js

I am currently in the process of developing a Node.js library using TypeScript. The primary purpose of this library is to facilitate downloading content from a specified URL. I envision it being utilized in the following manner: import customLibrary from ...

Choose a random element from the data in JSON format

I am currently working with the following code snippet: $.getJSON('js/questions1.json').done(function(data){ window.questionnaire = data; console.log(window.questionnaire); startGame(); }); This piece of code fetche ...

Disabling the Bootstrap tooltip feature is a quick and easy process

Is there a way to turn off bootstrap tooltip on my website? I activated it with the code below: function activateTooltip() { const toolTips = document.querySelectorAll('.tooltip'); toolTips.forEach(t => { new bootstrap.Tooltip(t); } ...

An error was encountered with Jquery/Ajax when trying to serialize $(var) due to a syntax error: Unrecognized expression for the

Hello everyone. I'm currently tackling a challenge in my ASP.NET Web API project, as I encountered an error in the following code snippet: function LoadGraph(text) { console.log(typeof(text)); $.ajax({ url: "/api/Graph/LoadGraph", ty ...

What methods can be used to expand the clickable area to encompass sibling elements?

<div> <div class="child-1">Interactive child element</div> <div class="child-2">Non-interactive child element</div> </div> If the interactive child element (child-1) is part of a third-party li ...

Dealing with net::ERR_CONNECTION_REFUSED in Axios on a Vue.js platform

Here's the code I'm using for my connection request: doLogin(this.login).then(response => { var token = response.data.token; localStorage.setItem('AUTH_TOKEN', JSON.stringify(token)); this.$router.push({name: ...

Utilizing Vue CLI plugin to dynamically pass JS variables as props

I am currently using version 4.5 of the Vue CLI plugin. I have created a component that takes in a title as a prop. This component has been converted into a web component and added to an HTML webpage (which is not a Vue JS project) Now, I am attempting to ...

What steps do I need to take in order to load the static folder from a CSS file?

Is there a way to load the static folder from a CSS file? I attempted to import using URL(), however, it was unsuccessful. I am looking to utilize the static path in order to apply a background to an element. .input_card:checked+.check-box { backgroun ...

Leveraging several useState hooks

When working on a React Native project, I have implemented multiple hooks to retrieve input data in a form. Are there any alternative methods that are more efficient or better suited for this task? Thank you const [name, setName] = useState(''); ...

Automatic panning of JavaScript on a map

Having some issues with the functionality of the pan function. It's working, but not quite how I need it to. Currently, I have a logo overlaying a map and I want to pan away from the logo automatically to show an infowindow (panning left or right). H ...

What strategies can be used to avoid a single dangling word at the end of a line within an HTML element?

I am in the process of developing a straightforward webpage with marketing content. One aspect I find unfavorable is when a line of text stretches too long and breaks onto the next line, which is acceptable; however, it often splits in a manner where there ...

Integrating a custom font in Angular.js using a .ttf file

I'm struggling to incorporate a .ttf font file into my Angular.js application. I am unsure of the proper way to import it and make use of it in my css files. Any guidance on utilizing this font file with Angular/CSS would be greatly appreciated! ...

JavaScript: Generate a JSON object with customizable key-value pairs

Suppose we have two arrays containing possible numerical values: var reg = [1000, 1010, 2050]; var ag = [100, 101, 102]; The objective is to create an object/json structure like this: { 1000 : [100, 101], 1010 : [100, 101, 102], 2050 : [100, 102]}; The ...

Problem with the transparency of CSS, div, and asp:Image

I am facing an issue with a div that has its opacity set to 60. Within this div, there is an asp:Image element. It seems like the opacity of the div is also affecting the image inside it. I attempted to create a separate class for the image and adjust th ...

Generating Iframes Automatically with JavaScript

I am looking for a way to dynamically generate Iframes based on the number of HTML files present in a specific directory. For example, if I have files named 1.html and 2.html located in a subdirectory relative to where main.html is stored, I want the abi ...

JavaScript Object's Data Returns as Undefined

Trying to retrieve data from mongoDB using the find() function, which should return objects in an array format. However, encountering an issue where the desired data is not showing up in the array and instead returning undefined. Here is the Object Array: ...

Encountering issues with Node.js and Socket.io not displaying results on Internet Explorer when using a secure connection

I have successfully integrated socket.io, node.js, and express to serve real-time json data to multiple browsers except for IE (tested on version 9) over a secure connection. Everything was functioning smoothly until I switched to HTTPS. From the server&ap ...

Troubleshooting the lack of response in ASP.Net MVC when utilizing OfficeOpenXml for a new Excel file creation

Situation I have encountered an issue while generating an Excel file using OfficeOpenXml in C#. The generated file is not being returned to the browser. Any thoughts on why this might be happening? Code Snippets [C#] : public ActionResult ExportToExcel( ...

Is Flash compatible with Cache-Control & Expires headers across all web browsers?

Working on a Flash .swf file created by someone else without access to the source code can be a challenging task. It appears to have been developed in Flash 9/AS3, but the certainty is lacking. The configuration settings for this Flash file are loaded fro ...

Unable to alter the vertex color in three.js PointCloud

I'm currently facing an issue with changing the color of a vertex on a mouse click using three.js and Angular. After doing some research, I believe that setting up vertex colors is the way to go. My approach involves setting up vertex colors and then ...