use an api function in graphics in angular

Question

Bonjour,

I used the highcharts.com library to generate graphics. When a user clicks on a point, I would like an iframe to open on the application. There is a function in the software (open_link) on the api and I would like to use this one.

My question is : How can I use the function available in the api?

import { Component, Input, OnInit, AfterViewInit } from '@angular/core';
import * as Highcharts from 'highcharts';
import { ProductsService } from 'src/app/services/products.service';

@Component({
  selector: 'app-graphic',
  templateUrl: './graphic.component.html',
  styleUrls: ['./graphic.component.scss']
})
export class GraphicComponent implements OnInit, AfterViewInit {

  @Input() data = [];
  @Input() titleGraphic = '';
  @Input() idContainer = 0;

  chartOptions = {};

  constructor(private productService: ProductsService) { }

  setChart(graphicData) {
    this.chartOptions = {
      chart: {
        renderTo: 'container' + this.idContainer,
        type: 'line',
        height: '200px'
      },
      title: false,
      credits: {
        enabled: false,
      },
      legend: {
        enabled: false,
      },
      plotOptions: {
        series: {
            marker: {
                enabled: true
            },
            cursor: 'pointer',
            events: {
              click: function open_link()
              {
                
              }
            }
        }
      },
      xAxis: {
        tickInterval: 4 * 7 * 24 * 3600 * 1000,
        tickWidth: 0,
        gridLineWidth: 1,
        title: {
          text: null
        },
        type: 'datetime',
        dateTimeLabelFormats: {
          month: '%B',
        }
      },
      yAxis: {
        gridLineWidth: 0,
        title: {
          text: null
        }
      },
      series: [{
        name: 'Nombre de bien(s)',
        data: this.productService.getSortedProduct(graphicData)['productsInterval']
      }]
    };
  }

Merci

score 1 · Answer 1 · answered Sep 21 '20 at 12:17

1

You could introduce a boolean flag to control the visibility of the iframe. Try the following

Typescript

showIframe = false;

plotOptions: {
  series: {
    marker: { enabled: true },
    cursor: 'pointer',
    events: {
      click: this.openLink.bind(this)    // <-- Why `bind(this)`? See here: https://stackoverflow.com/q/20279484/6513921
    }
  }
},

openLink() {
  this.someDataService.getData().subscribe(
    res => {
      ...
      this.showIframe = true;
    },
    err => { }
  );
}

Template

<ng-container *ngIf="showIframe">
  <iframe ...></iframe>
</ng-container>

answered Sep 21 '20 at 12:17

ruth

29,535
4
30
57

I am unable to edit the post, here is the link to the highcharts API that might be useful: https://api.highcharts.com/highcharts/plotOptions.series.events.click – Mateusz Kornecki Sep 22 '20 at 06:51
The open_link function is a function of the api and not the front end. If you want, each point of my graph corresponds to a list of products. On each point there is a list of id. And when I click on a point, I would like to display the list of products. – HCP Sep 22 '20 at 07:23
The `getData()` function in the answer contains the actual HTTP call to your API: `myApi.open_link()`. And that's why the function in the front-end is called `openLink()` and not your API function `open_link()`. – ruth Sep 22 '20 at 07:37

use an api function in graphics in angular

1 Answers1