2

I am working on a Angular 5 application where I am asked to use highcharts and display some information on pie charts and bar charts. The data that I get from the web api call is in json format and looks like:

[
  {
    "fruit": "Orange",
    count: 10
  },
  {
    "fruit": "Strawberry",
    count: 20
  }
]

The following is the sample code of my pie chart:

this.chart = new Chart({
     chart: {
       type: 'pie'
     },
     title: {
       text: 'Available Fruits'
     },
     credits: {
       enabled: false
     },
     series : [{
       name: 'Line 1',
       data: [10, 20, 30, 40]
     }]
   });

So this data is dynamic and I want to pass this data as input to the pie chart.I also want a similar one to be displayed as a bar chart. The charts should be rendered once the web api calls return me this data. Could you please let me know how I could implement this functionality.

Note: the data value in the chart object is just temporary value and I need this value to be the json data returned from the web api.

Valla
  • 2,414
  • 11
  • 42
  • 73
  • You do not know how to render a chart or how to make an api call with angular? Both these questions have answers in Highcharts/Angular documentations. Angular https://angular.io/guide/http, Highcharts https://www.highcharts.com/docs/working-with-data/live-data, https://stackoverflow.com/questions/19236113/creating-highchart-with-ajax-json-data – morganfree May 15 '18 at 11:30
  • Hi Valla, did you done pie chart with angular5? if yes can you please help me on this? I too need to populate date with Pie & Bar charts. – Venkaiah Yepuri Jan 03 '19 at 09:52

0 Answers0