Utilizing PrimeNg with Angular 2 to dynamically update charts using @ViewChild

I'm currently utilizing Angular2 with PrimeNG for my application. My dashboard includes charts and after attempting to upgrade to PrimeNG rc7 (from rc5) where they addressed an issue with updating charts, I'm facing challenges updating my chart due to the changes that require calling a method.

Although I've come across the @ViewChild decorator, I'm unsure about its proper usage.

Here's a snippet of my chart.html:

<p-chart #linechart  type="line" #linechart
 id="linechart" [data]="ntwdata" [options]="options">
</p-chart>
...

I tried implementing @ViewChild in different ways but encountered issues with accessing the chart object for refreshing purposes. If any of you have suggestions or solutions, please explain it to me as if I were a beginner!

Thank you in advance!

angulartypescriptchartsprimeng

Answer №1

<p-chart #graph type="line" [data]="graphData" [options]="settings"></p-chart>

next, in your Angular component 

import { UIChart } from "primeng/components/chart/chart";

retrieve the view reference (replace "graph" with appropriate reference) 

@ViewChild("chart") graph: UIChart; 

this.graph.reinitialize();

once you have assigned the values.

Answer №2

Make sure to keep the labels and datasets updated as well.

this.chart.data.labels = labels;
this.chart.data.datasets = datasets;

Consider adding a delay before refreshing the chart, such as 100ms or 1200ms.

This technique has been successful for me.

Answer №3

The new functionality can now be accessed by including the following code:

import { UIChart } from 'primeng/chart';

Alternatively, you can use refresh() as another method to update.

Answer №4

When I needed to change the graph type, this code snippet was quite effective for me.

    HTML :
    
    <select class="form-control type-selection" (change)="onSelection($event)" style="position: absolute;">
    <option *ngFor="let item of ntwdata" [value]="item.value">{{item.label}}</option> 
    </select>
    <p-chart #linechart  type="line" #linechart id="linechart" [data]="ntwdata [options]="options"></p-chart>


Component :




import { NTWDATA } from '../resources/mock/chartdata'
import { UIChart } from "primeng/components/chart/chart";

@ViewChild('chart', { static: false }) chart: UIChart;
type: any = 'doughnut';
graphType: any;

ngOnInit() {    
    this.ntwdata = NTWDATA ;
    this.graphType = [
      { value: 'doughnut', label: 'doughnut' },
      { value: 'pie', label: 'pie' },
      { value: 'line', label: 'line' }
    ];
  }

onSelection(event) {
    this.type = event.target.value;
    this.ntwdata.type = this.type; //doughnut, Pie, Line
    setTimeout(() => { 
      this.chart.reinit();
    }, 100);
  }
Remember to use reinit() within a setTimeout method after setting the value.

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

The absence of the import no longer causes the build to fail

Recently, after an update to the yup dependency in my create react-app project, I noticed that it stopped launching errors for invalid imports. Previously, I would receive the error "module filename has no exported member X" when running react-scripts buil ...

javascripttypescripteslintreact-scripts

Issue with Angular Datatable: Table data is only refreshed and updated after manually refreshing the page or performing a new search query

Having trouble updating Angular Datatable after selecting different data? The API response is coming in but the table data is not being updated. Can anyone suggest how to properly destroy and reinitialize the table for the next click? Below is a snippet ...

javascriptjquerytypescriptdatatablesangular-datatables

What is the best way to seamlessly update a Redux state array in an immutable manner using Typescript?

I'm embarking on a journey to grasp Typescript through the creation of a simple Todo-List application. However, I've hit a roadblock in updating the Redux state array within a slice that I've established (or rather, I'm unsure how to go ...

reactjstypescriptreduxreact-reduxredux-toolkit

Combining Spring Boot and Angular applications for seamless integration

I am trying to connect my Spring Boot application with an Angular application that are running on different servers. When attempting to access REST API from the Angular app, the API call is successful but I encounter an error response on the UI. Acc ...

javaangularspring-bootspring-security

Ace Code Editor: Turn off highlighted line beneath cursor

I am currently utilizing the Ace editor and would like to remove the shadowed line where the cursor is located. Here's an example Even after experimenting with different themes provided by Ace Mode Creator, the shadowed line still persists. Any sug ...

javascriptangularace-editor

"Exploring the power of D3, TypeScript, and Angular 2

I am facing challenges incorporating D3 v4 with Angular 2 (Typescript). While exploring D3 v4, I have referred to several solutions on StackOverflow without success. I have imported most of the necessary D3 libraries and typings (utilizing TS 2.0) and adde ...

angulard3.jstypescripttypescript-typings

JavaScript Class Emit Signal for establishing a sequence of interconnected events

My Vue project includes a JavaScript class specifically for mobile devices. I'm looking to have this class emit a signal once the property 'hasEnded' is set to True for my object. How can I achieve this and chain together other events based ...

javascripttypescript

The string returned from the Controller is not recognized as a valid JSON object

When attempting to retrieve a string from a JSON response, I encounter an error: SyntaxError: Unexpected token c in JSON at position In the controller, a GUID is returned as a string from the database: [HttpPost("TransactionOrderId/{id}")] public asyn ...

c#angulartypescriptasp.net-core

What is the correct way to exclude and remove a portion of the value within an object using TypeScript?

The function useHider was created to conceal specific values from an object with the correct type. For example, using const res = useHider({ id: 1, title: "hi"}, "id"), will result in { title: "hi" } being returned. Attempting ...

javascripttypescripttypescript-typings

I keep seeing "Uncaught TypeError: Unable to retrieve property 'get' from undefined" error message popping up

Currently, I am attempting to retrieve a JSON from a separate microservice (local) utilizing a different port. There is uncertainty as to whether the issue lies within my configuration or the microservice itself. Despite successfully displaying the JSON on ...

jsonangularangular-httpclient

Tips for displaying an element for each item chosen in a multi-select box

I currently have a situation where I am rendering for every selected element within my multiselect angular material selectbox. The rendering process functions correctly when I select an element, but the issue arises when I try to deselect one - it just ke ...

javascriptangulartypescriptangular-material

Problems encountered with Bootstrap navbar-nav while utilizing ngFor

Greetings, I am currently utilizing bootstrap v4.0.0 in my project. I have noticed that when displaying menus using navbar-nav and implementing ngFor, the bound property seems to be called continuously - is this the intended behavior? Below is a snippet o ...

angularbootstrap-4navbarngfor

Struggling to grasp how to implement Redux and React-router together in one component

I have recently embarked on learning TypeScript and encountered a confusing behavior. Upon encountering this error: Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<void | RouteComponentProps<any>> ...

reactjstypescriptreact-router-redux

Issue: Conflicting lockfileVersion in GitLab

Could someone please help me with the issue I'm facing in my Gitlab build? I am currently utilizing the Docker image from https://github.com/beevelop/docker-ionic. However, it seems that the version of npm and ionic in this image is not up to date, w ...

angularnpmdockerfile

Converting Scss to css during the compilation process in Angular

Seeking assistance with .css and .scss file conversion. I am in need of help with generating or updating a .css file from an existing .scss file during compilation. To explain further: when writing code, everything is going smoothly until I decide to save ...

node.jsangulartypescriptsasscommand-line-interface

Why is it that I am not receiving JSON data in my Angular application?

I am currently working on a class within a webapi public class ResponseObject { public int Success { get; set; } public string Message { get; set; } public object Data { get; set; } } Within my ASP.NetCore, I have the following method: publi ...

javascriptjsonangulartypescriptasp.net-core

It appears that the input variables in Angular (5) are experiencing some issues

After upgrading my Angular project from version 4 to 5, I've noticed some unexpected changes in the behavior of my components. In my application, there is a ParentComponent and a ChildComponent. The ChildComponent receives an InputObject from its par ...

angular

Ways to receive a reply from EventEmitter

From the child component, I made a call to a certain method. Here is the code in the child component: @Output() parentEvent = new EventEmitter<any>(); click1() { //calling the specified method from the child this.parentEvent.emit(myObj1); ...

angulartypescripteventemitter

Mastering the art of utilizing Function's construct signatures within TypeScript

Currently delving into the TypeScript documentation, specifically exploring More on Functions. However, I find myself perplexed by the code snippet provided below. Can someone offer guidance on how to implement this in practical development scenarios? An ...

typescript

angular2-seed-advanced encountered an error: RangeError - The maximum call stack size has been exceeded

Attempting to launch the angular-seed-advanced project without modifications on various platforms has been successful for web and desktop (Linux/Windows). However, when trying to run it on Android (emulator and actual device), the following error occurred: ...

angularangular2-nativescriptangular2-seed