Exploring the versatility of Highcharts with callback functions and comprehensive

Currently, I am utilizing Highcharts with angular 9.

Here is the link to the code : https://stackblitz.com/edit/angular-ivy-wdejxk

For running on the application side or test side, follow these instructions:

  1. Test Side: In the angular.json file at line number 18, change 
        "main": "src/main.ts",
    to 
        "main": "src/main-testing.ts",

Then refresh the browser.

  1. Application Side: Change exactly the opposite of the previous step. 
       "main": "src/main-testing.ts",
    to 
       "main": "src/main.ts",

Some issues I am facing include:

  1. I have utilized a chart callback to get the chart instance, but it's not functioning properly (inside hello.component.ts, lines 38 to 40). How do I call it and when does the callback happen in Highcharts?
  2. If by some means I can assign the chart instance to the chartCreated variable, can I now control the chart like lines 60 to 62 (if I uncomment that)? Essentially, I want to understand the usefulness of updateFlag in Highcharts.
  3. Unable to addSeries when ngOnChanges is called inside hello.component.ts
  4. In the spec file hello.component.spec.ts, I wanted to test the chart by adding a series or numeric data on my own, as I did when onClick() is called. But jasmine shows an error 
       TypeError: Cannot read series of undefined
   TypeError: Cannot read property 'addSeries' of undefined
    How can I resolve these issues?

EDIT 1: Implemented ngOnChanges and ngOnInit, and transferred most of the code from app.component.ts to hello.component.ts

angulartypescriptunit-testinghighchartskarma-jasmine

Answer №1

    By implementing the ngOnInit lifecycle hook, you will be able to access values within your Angular component:

    1. In your AppComponent class, ensure it implements OnInit interface and define the ngOnInit method.

    2. Within the ngOnInit method, set up a chartCallback function that assigns a chart object to this.chartCreated and logs its properties.

        addNewDataToChart(){
            // Add new data to the chart
        }

    3. Implement an onClick method that toggles between updating data points on the chart series based on a click event.

Answer №2

Based on the suggestion from @gsa.interactive, the following test cases were successful:

it('should validate that changes are reflected in the data of the series in charts', () => {
      component.chartCreated.series[0].data[0].update(5);
      //console.log(component.chartCreated);
      expect(component.chartCreated.series[0].yData).toEqual([5, 2, 3]);
  });

  it('should confirm that new series are added to the charts', () => {
    component.chartCreated.addSeries({
        data: [3, 4, 2],
        type: 'line'
    });

    //console.log(component.chartCreated);
    expect(component.chartCreated.series.length).toBe(2);
    expect(component.chartCreated.series[1].yData).toEqual([3, 4, 2]);
  });

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

Unable to locate the module 'next' or its associated type declarations

Encountering the error message Cannot find module '' or its corresponding type declarations. when trying to import modules in a Next.js project. This issue occurs with every single import. View Preview Yarn version: 3.1.0-rc.2 Next version: 1 ...

reactjstypescriptnext.jsyarnpkgtsconfig

Encounter issue with async function in produce using Immer

Having an issue while attempting to create an asynchronous produce with immer. When calling the async function, this error is encountered: Below is my code snippet: import { combineReducers, createStore } from 'redux'; import produce from ' ...

javascripttypescriptreduxreact-reduximmer.js

The module 'AppModule' raised an error due to an unexpected value being imported, specifically 'AngularFireDatabase'. For proper functionality, consider adding a @NgModule annotation

App.Module.ts import { AngularFireDatabase } from 'angularfire2/database'; imports: [ AngularFireDatabase ] I can't seem to figure out why it is requesting me to include a @NgModule annotation when I believe it is unnecessary. My ...

angularangularfire2

Searching for variables within files using Node.js and constructing an object from the results

Trying to figure out how to streamline this process. Here's the directory structure I'm working with: src/ modules/ clients/ i18n/ en-US.ts tasks/ i18n/ en-US.ts So, ea ...

javascriptnode.jstypescript

Discovering all images in Angular

I have a function that stores image data, including the name. Using *ngFor, I am able to fetch this data from the database and display it in boxes. HTML <div class="row tab-pane Galeria"> <div *ngFor="let product of products" (click)="Im ...

angulartypescript

Can you identify the specific syntax for a 'set' function in TypeScript?

I have a TypeScript function that looks like this: set parameter(value: string) { this._paremeter = value; } It works perfectly fine. For the sake of completeness, I tried to add a type that specifies this function does not return anything. I experimen ...

typescript

Modify the System.config() in Angular 2 following the segregation of JavaScript and TypeScript files

My project follows the folder structure of quick-start ToH, which can be found at https://angular.io/docs/ts/latest/tutorial/toh-pt1.html In order to separate the .ts and .js files, I included the following line in the tsconfig.json file: "outDir": "dist" ...

angular

Removing click functionality in Angular 2 when utilizing [innerHTML]

Currently, I need to include HTML in my TypeScript file using the [innerHTML] tag within the template. I am attempting to add a click function within the HTML: status = "<img src='assets/hello.png' (click)='hello()' />"; Howeve ...

angulartypescript

Ways to utilize a field from an interface as a type of index

interface Mapping { "alpha": (a: string) => void "beta": (b: number) => void } interface In<T extends keyof Mapping> { readonly type: T, method: Mapping[T] } const inHandlers: In<"alpha"> = { type ...

typescriptindexingtypes

Having difficulty creating a snapshot test for a component that utilizes a moment method during the rendering process

I am currently testing a component that involves intricate logic and functionality. Here is the snippet of the code I'm working on: import React, { Component } from 'react'; import { connect } from 'react-redux' import moment from ...

javascriptreactjsunit-testingjestjsenzyme

"Utilizing TypeScript with React: Creating a window onClick event type

My linter is not happy with the any type for window.onClick. What should be the correct type? import React, { useContext, useState } from 'react'; import { Link } from 'react-router-dom'; import { Global } from '../globalState&apo ...

reactjstypescript

What is the best way to retrieve an object from a loop only once the data is fully prepared?

Hey, I'm just stepping into the world of async functions and I could use some help. My goal is to return an object called name_dates, but unfortunately when I check the console it's empty. Can you take a look at my code? Here's what I have ...

typescriptasynchronousasync-awaitpromise

What steps should I take to instruct TypeScript to package a third-party library from the node_modules directory?

I am looking to configure the TypeScript Compiler in such a way that it utilizes node_modules/firebase/firebase.d.ts for typechecking my code, and also includes node_modules/firebase/firebase.js in the files where I import firebase functionalities. Althoug ...

typescripttsc

What is the best way to categorize a collection of objects within a string based on their distinct properties?

I am working with an array of hundreds of objects in JavaScript, each object follows this structure : object1 = { objectClass : Car, parentClass : Vehicle, name : BMW } object2 = { objectClass : Bicycle, parentClass : Vehicle, name : Giant } object3 = { ob ...

javascripttypescriptalgorithmsorting

What is the best method for sending ngForm to a child component?

I'm facing a challenge with reusing a custom input component across multiple forms. The issue lies in passing the parent form context to it. While I successfully accomplished this using reactive forms by passing the FormGroup instance and field name, ...

angular

The result should display the top 5 application names based on the count property found within the ImageDetails object

data = { "ImageDetails": [ { "application": "unknownApp, "count": 107757, }, { "application": "app6", "count": 1900, }, { & ...

javascriptangulartypescript

Angular CLI simplifies the process of implementing internationalization (i18n) for Angular

After diving into the Angular documentation on i18n and using the ng tool xi18n, I am truly impressed by its capabilities. However, there is one part that has me stumped. According to the documentation, when internationalizing with the AOT compiler, you ...

angularangular-cliangular6angular-cli-v6

What is the correct way to utilize the karma-ng-html2js-preprocessor?

I'm working on a directive called stat24hour: angular .module('app') .directive('stat24hour', stat24hour); function stat24hour(req) { var directive = { link: link, template: 'scripts/widgets/templ ...

javascriptangularjsunit-testingtemplates

What is the best way to send parameters to an async validator when working with reactive controls in Angular

Issue with Validation I am facing a challenge while using the same component for both read and edit routines. The async-validator functions perfectly when dealing with new entries. However, a problem arises if the user mistakenly changes a value and then ...

angularangular-reactive-formsangular-validation

Passing a variable from the second child component to its parent using Angular

Need help with passing variables between two child components Parent Component: deposit.component.html <div> <app-new-or-update-deposit [(isOpenedModal)]="isOpenedModal"></app-new-or-update-deposit> </div> Deposit Component ...

angulartypescriptrxjsangular8