Refresh a Google chart without having to reload the entire page

I currently have a button that allows me to refresh the data on my page in case there is new data available through an API. Although this button successfully refreshes my datatable, it does not redraw the Google charts I have integrated into my project using the Ng2GoogleCharts module.

Does anyone know of a possible solution to either redraw the existing chart or delete it and create a new one?

This is how I am creating the chart on the HTML page:

<google-chart [data]="mixChartData" #chart></google-chart>

In my .ts file, I declare mixChartData like so:

this.mixChartData={
      chartType: 'LineChart',
      dataTable: this.mixChart,
      options: this.mixOptions
    }
angulartypescriptgoogle-visualization

Answer №1

In order to trigger a fresh display, within the GoogleChartInterface – specifically referring to this.mixChartData in your instance – there lies a property named component housing a method called draw()

this.mixChartData.component.draw();

If needed, you are also able to provide new data for the redraw process

this.mixChartData.component.draw(this.mixChartData);

Answer №2

I've been grappling with this issue for quite some time now, and after a lot of trial and error, I found a solution that worked perfectly:

In your HTML file, make sure to include the following code snippet:

   <google-chart #mychart [data]="toDoChart"></google-chart>

Within your component file, add the following line to access the chart element:

  @ViewChild('mychart', {static: false}) mychart;

Finally, whenever you need to update the chart based on certain conditions, use the following method:

 updateToDoChart(){    
   this.mychart.draw();
 }

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

How the logo's placement shifts while zooming out (using CSS and Angular 4+)

I am facing an issue with my navbar that includes a logo (MostafaOmar) which shifts position when zoomed out. If you try zooming to 70%, you will notice the logo's position changes as well. Is there a way to make it stay in place at 100% zoom? Here ...

javascripthtmlcssangularfrontend

Is there a way to retrieve erased information from firebase without any references?

My journey into the realms of Ionic and TypeScript/JavaScript is a new one, and I am learning as I progress. Currently, I am facing an issue when trying to delete an "Event", which results in the error: "null is not an object (evaluating '_this.curre ...

angularfirebaseionic-framework

Incorporating AppLozic's chat plugin into an Angular 5 project

Struggling to incorporate a third-party chat plugin into my Angular 5 project. The documentation is proving difficult to understand, and I can't figure out how to proceed. If anyone has successfully integrated it before, your help would be greatly app ...

angulartypescriptapplozic

Decide on the Title based on a condition in Angular

To only set the title="" if a specific condition is true, and otherwise have no title at all, I need to ensure that the property.propertyKey === 'birthday' before assigning the value of birthday to the title. <div *ngFor="let ...

angularbindingtitle

Adjust the class of a component

This is the HTML code for my home component: <button (click)="onClick('Hello')" [ngClass]="{'positive': connectedToWWE, 'negative' : !connectedToWWE}"> Hello! Click Me! </button> This is the Ty ...

angular

Optimizing Angular6 Pipe Filter Performance for Large Arrays

I have written a filter that retrieves a subset of items from a large array consisting of around 500 items. import { Injectable, Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchFilter' }) @Inject ...

javascriptangularangular6

Use the ngFor directive to iterate over the most recently created array from the parent ng

I am looking to link material tabs with ngFor to generate arrays for child ngFor. Let's start from the beginning: <mat-tab-group> <mat-tab *ngFor="let tab of asyncTabs "> <ng-template mat-tab-label>{{tab.label}}</ng-template ...

arraysangulartypescript

The HAProxy is encountering difficulties when trying to connect to port 80 for the Angular application that is currently running on

I currently have an Angular application running on port 4200, and I have implemented HAProxy as a reverse proxy to redirect all traffic from port 80 to 4200. However, while my HAProxy settings are correctly directing traffic from 8080 to 4200, the redire ...

angularubuntuhaproxy

Typescript integration with Sequelize CLI for efficient database migrations

According to the Sequelize documentation, it claims to work with Typescript. However, for it to be fully functional in a production environment, DB migration scripts are necessary. The issue arises when using the Sequelize CLI as it only generates and runs ...

node.jstypescriptsequelize.js

Using a string array in a JSON model - a simple guide

Just starting out with Angular and having some difficulty integrating my JSON data effectively. Inside my service, I have temporary JSON data that is structured using a model to define the different types of information within it. My objective is to creat ...

arraysjsonstringangular

Error with Angular InjectionToken utilization

We are encountering an issue while trying to inject a value using InjectionToken. The error message that we are receiving is as follows: ERROR in Error encountered resolving symbol values statically. Only initialized variables and constants ...

angular

Troubleshooting a problematic dependency in Angular with the ngx-favicon package

Could someone please clarify why I am encountering issues when trying to run npm install ngx-favicon? npm install ngx-favicon npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: <a href="/cdn-cgi ...

node.jsangularnpm

Encountering SCRIPT1014 and SCRIPT1002 errors within an Angular4 application when using Internet Explorer 11

My Angular 4 application runs perfectly in various browsers. However, when trying to launch it in Internet Explorer version 11, I encounter the following two errors: SCRIPT1014: Invalid character addScript.js (9,1) SCRIPT1002: Syntax error main.bundle.js ...

javascriptangularinternet-explorer-11

Angular4 ASP.NET Core project does not seem to be detecting the API endpoints

I am encountering an issue with my angular application where I consistently receive a "Cannot match any routes" error when attempting to access certain api resources. The base in my application is configured as <base href="/"> and the api source is ...

angularasp.net-core

Error encountered during Angular unit testing: Unable to read the 'id' property of a null value. (Jasmine, Karma)

I am currently working on writing unit tests for a specific component in my Angular application. The component uses a currentUser variable both in the component logic and the HTML template. I have hardcoded this variable by mocking it in every test using c ...

javascriptangulartypescriptunit-testingkarma-jasmine

Utilize Angular 5 to implement document uploads through a REST service call

I've been attempting to upload a document to our repository using Angular 5 and I'm encountering an error that I've included below. The Multipart/Form code is very similar to what worked in Angular 1.x, except for one line difference in the ...

angular

Load Angular template dynamically within the Component decorator

I am interested in dynamically loading an angular template, and this is what I have so far: import { getHTMLTemplate } from './util'; const dynamicTemplate = getHTMLTemplate(); @Component({ selector: 'app-button', // templat ...

javascripthtmlangulartypescript

In TypeScript, there is a curious phenomenon where private properties seem to be mimicking the

Here is an example of an issue I encountered while working with private properties in TypeScript. I expected that only the public properties would be visible in my object output, similar to normal encapsulation. My aim here is to include the property wit ...

javascripttypescriptoopproperties

The issue is that TypeScript is indicating that the type 'string | string[]' cannot be assigned to the type 'string'

I recently upgraded to Angular 16 and encountered an issue with an @Input() property of type string | string[]. Prior to the upgrade, everything was functioning correctly, but now I am experiencing errors. I am uncertain about where I may have gone wrong i ...

angulartypescriptangular16

The use of window.Image() is ineffective when working with TypeScript and React

In my React project, I am utilizing the KonvaJS library. You can find more information about it here. To display an image using JavaScript/React, I have implemented the following code: componentDidMount() { const image = new window.Image(); ima ...

reactjstypescriptkonvajs