1. Home
  2. Forum
  3. Angular - EJ 2
  4. I am unable to display stock chart by my own JSON data

I am unable to display stock chart by my own JSON data

Hi, I got a problem, I can't display the stock chart by using the JSON data, but it was working good by using example data.
Here is my JSON data:
     [
            {
                "date": "2012-04-02",
                "open" : 85.9757,
                "high": 90.6657,
                "low" : 85.7685,
                "close" : 90.5257,
                "volume" : 660187068
              },
              {
                "date": "2012-04-09",
                "open" : 89.4471,
                "high": 92,
                "low" : 86.2157,
                "close" : 86.4614,
                "volume" : 912634864
              },
              {
                "date": "2012-04-16",
                "open" : 87.1514,
                "high": 88.6071,
                "low" : 81.4885,
                "close" : 81.8543,
                "volume" : 1221746066
              },
              {
                "date": "2012-04-23",
                "open" : 81.5157,
                "high": 88.2857,
                "low" : 79.2857,
                "close" : 86.1428,
                "volume" : 965935749
              },
              {
                "date": "2012-04-30",
                "open" : 85.4,
                "high": 85.4857,
                "low" : 80.7385,
                "close" : 80.75,
                "volume" : 615249365
              },
              {
                "date": "2012-05-07",
                "open" : 80.2143,
                "high": 82.2685,
                "low" : 79.8185,
                "close" : 80.9585,
                "volume" : 541742692
              },
              {
                "date": "2012-05-14",
                "open" : 80.3671,
                "high": 81.0728,
                "low" : 74.5971,
                "close" : 75.7685,
                "volume" : 708126233
              },
              {
                "date": "2012-05-21",
                "open" : 76.3571,
                "high": 82.3571,
                "low" : 76.2928,
                "close" : 80.3271,
                "volume" : 682076215
              },
              {
                "date": "2012-05-28",
                "open" : 81.5571,
                "high": 83.0714,
                "low" : 80.0743,
                "close" : 80.1414,
                "volume" : 480059584
              }
]

And my service: I create a method to convert the String data in JSON file to new Date()

@Injectable()
export class CompanyDetailsService  {
  constructor(public http: HttpClient) {}
 
  getCompanyDetailsData(): Observable<any[]> {
    const data = this.http
    .get<any[]>('assets/data/company-details-mock-data.json').pipe(
      // Map through each item in res, and format the object
      map((res) => res.map(item => this.formatDates(item)))
    );
     return data;
  }

  formatDates(results) {
    results.date = new Date(results.date)
    return results;
  }

}

And this is componet:

@Component({
  selector: 'fsd-stock-chart',
  templateUrl: './stock-chart.component.html',
  styleUrls: ['./stock-chart.component.scss'],
})
export class StockChartComponent implements OnInit{
   public stockchartData: Object[];
   public primaryXAxis: Object;
   public primaryYAxis: Object;
   public title: string;

  ngOnInit(): void {
      this.getData();
      this.title = 'Efficiency of oil-fired power production';
      this.primaryXAxis = {
      valueType: 'DateTime'
    };
     
  }
  getData() {
    this.service.getCompanyDetailsData()
      .subscribe(
        (data)=> { this.stockchartData = data },
        err => console.error(err),
        () => console.log('done')
      );
  }
  constructor(private service: CompanyDetailsService) {}
}

I can load the data from JSON file, but here is the error on browser console:


Unexpected value NaN parsing x attribute. ej2-charts.es2015.js:29963
Unexpected value NaN parsing width attribute. ej2-charts.es2015.js:29964
Unexpected value NaN parsing width attribute. ej2-charts.es2015.js:29965
Unexpected value NaN parsing x attribute. ej2-charts.es2015.js:29966
Unexpected value NaN parsing width attribute. ej2-charts.es2015.js:29967
Unexpected value translate(NaN, 0) parsing transform attribute. ej2-charts.es2015.js:29968
Unexpected value translate(NaN, 0) parsing transform attribute.


I don't know how to use JSON data to display the chart!


3 Replies
SM Srihari Muthukaruppan Syncfusion Team April 24, 2020 11:08 AM UTC

Hi Jack, 
  
We have analyzed your query. From that, we would like to let you know that we can achieve your requirement using “load” event in the chart. Based on your requirement we have prepared a sample for your reference. In which the data is received from json file and it gets converted to date format and stockchart is rendered. Please find the below sample, code snippet, and screenshot. 
  
  
Code Snippet: 
App.component.html: 
// add your additional code here 
        <ejs-stockchart id='stockChartDefault' (load)='load($event)'> 
            <e-stockchart-series-collection> 
                <e-stockchart-series [dataSource]='data1' type='Candle' xName='date' yName='high' high='high' low='low'> 
                </e-stockchart-series> 
            </e-stockchart-series-collection> 
        </ejs-stockchart> 
  
App.component.ts: 
  
import { Component, ViewEncapsulation} from '@angular/core'; 
import { IStockChartEventArgs } from '@syncfusion/ej2-angular-charts'; 
import datasource from './datasource.json'; 
  
  @Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { 
  
    public data1: Object[] = datasource; 
  // add your additional code here 
    public load(args: IStockChartEventArgs): void { 
        for( var i = 0; i < args.stockChart.series[0].dataSource.length; i++) { 
   args.stockChart.series[0].dataSource[i].date = new Date(args.stockChart.series[0].dataSource[i].date); 
        }; 
    }; 
} 
  
datasource.json: 
[ 
            { 
                "date": "2012-04-02", 
                "open" : 85.9757, 
                "high": 90.6657, 
                "low" : 85.7685, 
                "close" : 90.5257, 
                "volume" : 660187068 
              }, 
              { 
                "date": "2012-04-09", 
                "open" : 89.4471, 
                "high": 92, 
                "low" : 86.2157, 
                "close" : 86.4614, 
                "volume" : 912634864 
              }, 
              { 
                "date": "2012-04-16", 
                "open" : 87.1514, 
                "high": 88.6071, 
                "low" : 81.4885, 
                "close" : 81.8543, 
                "volume" : 1221746066 
              }, 
              { 
                "date": "2012-04-23", 
                "open" : 81.5157, 
                "high": 88.2857, 
                "low" : 79.2857, 
                "close" : 86.1428, 
                "volume" : 965935749 
              }, 
              { 
                "date": "2012-04-30", 
                "open" : 85.4, 
                "high": 85.4857, 
                "low" : 80.7385, 
                "close" : 80.75, 
                "volume" : 615249365 
              }, 
              { 
                "date": "2012-05-07", 
                "open" : 80.2143, 
                "high": 82.2685, 
                "low" : 79.8185, 
                "close" : 80.9585, 
                "volume" : 541742692 
              }, 
              { 
                "date": "2012-05-14", 
                "open" : 80.3671, 
                "high": 81.0728, 
                "low" : 74.5971, 
                "close" : 75.7685, 
                "volume" : 708126233 
              }, 
              { 
                "date": "2012-05-21", 
                "open" : 76.3571, 
                "high": 82.3571, 
                "low" : 76.2928, 
                "close" : 80.3271, 
                "volume" : 682076215 
              }, 
              { 
                "date": "2012-05-28", 
                "open" : 81.5571, 
                "high": 83.0714, 
                "low" : 80.0743, 
                "close" : 80.1414, 
                "volume" : 480059584 
              } 
] 
  
Screenshot: 
 
  
Let us know if you have any concerns. 
  
Regards, 
Srihari M 


JL Jack Liu April 24, 2020 03:40 PM UTC

Hi Regards,
     Thanks for your feedback, I still have a question that how can I populate data from my API interface, eg: Here is my API URL: "localhost:80/getStockChartData", and this API will return JSON data like your provided. So if I get the data from the API by using HTTP client, like:
" const data = this.http.get<any[]>('localhost:80/getStockChartData')", then I can get the data type is Observable<any[]>, I have to subscribe the data, Like this:
this.service.getCompanyDetailsData()
      .subscribe(
        (data)=> { this.stockchartData = data },
        err => console.error(err),
        () => console.log('done')
      );

My question is how can I display the chart if I subscribe the Observable data, or how can I display the chart by using the data from API, thanks!

SM Srihari Muthukaruppan Syncfusion Team April 28, 2020 07:00 AM UTC

Hi Jack,

We have analyzed your query. Based on your requirement we have prepared a sample for your reference. In which the data is received from json file using observable in service file and it gets converted to date format and passed to the stock chart datasource. Please find the below sample, code snippet, and screenshot. 
  
  
Code Snippet: 
App.component.html: 
// add your additional code here 
    <ejs-stockchart id='stockChartDefault'  [primaryXAxis]='primaryXAxis' style="display:block;">
    <e-stockchart-series-collection>
        <e-stockchart-series [dataSource]='stockchartData' type='Candle' xName='date' yName='high' high='high' low='low'>
        </e-stockchart-series>
    </e-stockchart-series-collection>
</ejs-stockchart>
  
App.component.ts: 
  
import { Component, ViewEncapsulation} from '@angular/core'; 
import { IStockChartEventArgs } from '@syncfusion/ej2-angular-charts'; 
import { HeroService } from './hero.service'
  
  @Component({ 
    selector: 'app-root', 
    templateUrl: 'app.component.html', 
    encapsulation: ViewEncapsulation.None 
}) 
export class AppComponent { 
  
    public stockchartData: Object[];
// add your additional code here 
 
   ngOnInit(): void {
       this.getData();
   // add your additional code here 
     }
   getData() {
     this.service.getCompanyDetailsData()
       .subscribe(
         (data)=> { this.stockchartData = data },
         err => console.error(err),
         () => console.log('done')
       );
   }
   constructor(private service: HeroService) {}
} 

Hero.service.ts:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { catchError, retry, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class HeroService {

  constructor(public http: HttpClient) {}
 
  getCompanyDetailsData(): Observable<any[]> {
    const data : Observable<any[]> = this.http.get<any[]>('assets/data/company-details-mock-data.json').pipe(
      map((res) => res.map(item => this.formatDates(item)))
    );
     return data;
  }
  formatDates(results) {
    results.date = new Date(results.date)
    return results;
  }
}

company-details-mock-data.json: 
[ 
            { 
                "date": "2012-04-02", 
                "open" : 85.9757, 
                "high": 90.6657, 
                "low" : 85.7685, 
                "close" : 90.5257, 
                "volume" : 660187068 
              }, 
              { 
                "date": "2012-04-09", 
                "open" : 89.4471, 
                "high": 92, 
                "low" : 86.2157, 
                "close" : 86.4614, 
                "volume" : 912634864 
              }, 
              { 
                "date": "2012-04-16", 
                "open" : 87.1514, 
                "high": 88.6071, 
                "low" : 81.4885, 
                "close" : 81.8543, 
                "volume" : 1221746066 
              }, 
              { 
                "date": "2012-04-23", 
                "open" : 81.5157, 
                "high": 88.2857, 
                "low" : 79.2857, 
                "close" : 86.1428, 
                "volume" : 965935749 
              }, 
              { 
                "date": "2012-04-30", 
                "open" : 85.4, 
                "high": 85.4857, 
                "low" : 80.7385, 
                "close" : 80.75, 
                "volume" : 615249365 
              }, 
              { 
                "date": "2012-05-07", 
                "open" : 80.2143, 
                "high": 82.2685, 
                "low" : 79.8185, 
                "close" : 80.9585, 
                "volume" : 541742692 
              }, 
              { 
                "date": "2012-05-14", 
                "open" : 80.3671, 
                "high": 81.0728, 
                "low" : 74.5971, 
                "close" : 75.7685, 
                "volume" : 708126233 
              }, 
              { 
                "date": "2012-05-21", 
                "open" : 76.3571, 
                "high": 82.3571, 
                "low" : 76.2928, 
                "close" : 80.3271, 
                "volume" : 682076215 
              }, 
              { 
                "date": "2012-05-28", 
                "open" : 81.5571, 
                "high": 83.0714, 
                "low" : 80.0743, 
                "close" : 80.1414, 
                "volume" : 480059584 
              } 
] 
  
Screenshot: 
 
  
If you still face this issue. Please share the following information which will be more helpful for further analysis and provide you the solution sooner.  
  
  • Try to reproduce the reported scenario in the above sample
  
  • Please share the runnable project.
  
  • Share the details if you have done any other customization in your sample.
  
Regards, 
Srihari M 


Loader.
Up arrow icon