CODEWITHSUNDEEP
angularchartsignite-uiignite-ui-angular
Brian Hanna
Brian Hanna

Reputation: 335

How to set up an ignite ui financial chart (igx-financial-chart) with Angular

I am trying to set up a financial chart to display the time series data for a stock (lets say GOOG). How do you get the data from the template to the dataSource property? Am I not casting the type of data correctly? The chart is showing up on screen, but it is not displaying any data... Does anyone have experience with igx charts that can help? Im starting to wonder if you need to sign up with their service (ie pay money) just to try their charts?.. seems unlikely But I dont see anything on that here

I have tried following the steps outlined in their docs here: https://www.infragistics.com/products/ignite-ui-angular/angular/components/financialchart.html

seems simple enough, but no matter which way i slice it, the dataSource doesn't seem to be populating the data on the chart.

Here is how I fetch the data and change it to the way the igx dataSource needs it.

 stockDailyDisplay: ChartDisplayModel[] = [];

 getTimeSeriesDaily(stockSymbol: string) {
    this.alphaService.getTimeSeriesDaily(stockSymbol).subscribe((resp: AlphavantageDailyResponse) => {
      for (const [key, value] of Object.entries(resp['Time Series (Daily)'])) {
        const s: ChartDisplayModel = {
          time: new Date(key).toString(),
          open: value['1. open'],
          high: value['2. high'],
          low: value['3. low'],
          close: value['4. close'],
          volume: value['5. volume']
        };
        this.stockDailyDisplay.push(s);
      }
    });
  }

Template:

<igx-financial-chart
  [dataSource]="stockDailyDisplay"
  width="850px"
  height="600px">
</igx-financial-chart>

Im not receiving any errors. And the data appears to be processing as expected. stockDailyDisplay returns an Array of objects like so: {time: string, open: string, high: string, low: string, close: string, volume: string}

Upvotes: 1

Views: 727

Answers (1)

Zdravko Kolev
Zdravko Kolev

Reputation: 1587

thank you for the detailed explanation! Your data format is correct and the only problem is the type of these object properties open, high, low, close and volume - their type should be number instead of string

{ 
  time: new Date(2013, 1, 1),
  open: 378.70,
  high: 387.90,
  low: 378.70,
  close: 387.40,
  volume: 0 
}

As for your concern about the Infragistics services - the Ignite UI for Angular product is free to use for non-commercial applications, although if you are building a commercial product, you should acquire a license. Acquiring a license will not only give you the right to use the product in a commercial application but also provides Development Support which is of great benefit.

Apologies for the late response, Brian. If you have any other questions or concerns you can check our GitHub repositories, you'll notice that we have a very active community and whenever there is a question, we are always there to help :)

https://github.com/IgniteUI/igniteui-angular-charts/issues

https://github.com/IgniteUI/igniteui-angular/issues

Upvotes: 2

Related Questions