CODEWITHSUNDEEP
angularhighchartshashmapangular-chart
sana ch
sana ch

Reputation: 181

get data from hashmap into highcharts

Im new to angular and charts, so i choose to work with highcharts, i have this service that return a hashmap i want to put the values into vertical bar i want so replace the static data with the dynamic data from the service using this way:

chart = new Chart({
  chart: {
    type: 'column'
  },
  title: {
    text: 'errors'
  },
  credits: {
    enabled: false
  },
  series: [{
    name: 'Population',
    data: this.data,
  }]

})

and this is my service inside ngOnInit:

this.dashboardHttpService.exceptionsByMicroseviceDaily().subscribe(success=> {
this.data=Object(success);
console.log(this.data);
})

i got no result, please how vertical bar of high charts work with hashmap

Edit:
this is what console.log(this.data) renders:
{Timeout: 180, ClientHandler: 307, Transport: 199, UnknownHost: 127, Reflections: 140}

ClientHandler:307
Reflections:140
Timeout:180
Transport:199
UnknownHost:127

and this is what i put on my html page:

dashboard.component.html

 <div class="content"> <div [chart]="chart"></div>

everything works fine with static data so there's no dependancy or configuration missing or something like that.

Upvotes: 0

Views: 386

Answers (1)

user9420984
user9420984

Reputation:

The reason the chart does not work is because your series will look like the following when you assigned the dynamic this.data to the chart:

series: [{
    name: 'Population',
    data: [Timeout: 180, ClientHandler: 307, Transport: 199, UnknownHost: 127, Reflections: 140]
}]

This is an incorrect format for series. The format should be one of the two below:

Plot all data points as one

series [{ name: 'Population', data:[180, 307, 199, 127, 140] }]

Plot all data points as a serie per name

series [{ name: 'Timeout', data: [180] }, { name: 'ClientHandler', data: [307] }, { ... }]

So, you would need to write a loop which divides the response into one of the above formats. Seeing your chart structure, I think you are looking for the second approach.

I made a simple for-loop which extracts the data from the object for demo purposes:

var testdata = {Timeout: 180, ClientHandler: 307, Transport: 199, UnknownHost: 127, Reflections: 140}
var chartdata = []
var i = 0;
Object.keys(testdata).forEach(function(key) {

  chartdata[i++] = {name: key, data: [testdata[key]]};

});

After this loop, chartdata will be looking like:

[{ name: 'Timeout', data: [180] }, { name: 'ClientHandler', data: [307] }, { ... }]

All which is left is change the code from series to accept the chartdata as the whole series object: 

series: chartdata

The chart will work.

Here you can find a very simple JSFiddle showing this.

Upvotes: 1

Related Questions