How to create chart using Springboot Json api

Question

i have this service that give back this Json result :

{
"MANNOUBA": 1,
"Medinine": 4,
"Gabes": 5,
"Tunis": 22,
"Beja": 3,
"Kebili": 0,
"Sfax": 11,
"Laundry Making": 6,
"italia": 0,
"Sousse": 6,
"Desk": 1,
"Jendouba": 3,
"Mahdia": 6,
"Ben Arous": 19,
"Zaghouan": 4,
"Gafsa": 0,
"Kairouan": 6,
"Monastir": 18,
"metos": 1,
"Eleonetech": 2,
"Nabeul": 22,
"Mannouba": 9,
"BENAROUS": 8,
"Ariana": 21,
"Bizerte": 3

}

i want to put this data in a Barchart For my angular Project with the names in the X axis and the Numbers in the Y axis

I would look this way : https://www.npmjs.com/package/angular-google-charts — Julien, Sep 13 '21 at 10:36

score 0 · Answer 1 · answered Sep 13 '21 at 11:40

0

With using Highcharts, you can preprocess your data to the: [name, y] format and use category axis type. Example:

for (let key in data) {
    chartData.push([key, data[key]]);
}

Highcharts.chart('container', {
    xAxis: {
        type: 'category'
    },
    series: [{
        type: 'column',
        data: chartData
    }]
});

Live demo: http://jsfiddle.net/BlackLabel/cjk3uboh/

Highcharts angular wrapper: https://www.npmjs.com/package/highcharts-angular

answered Sep 13 '21 at 11:40

ppotaczek

36,341
2
14
24

u put the data as const but i have this data as api link (http://localhost:8080/.... } how could i call it ? – Khalil Laouini Sep 13 '21 at 11:57
Hi @Khalil Laouini, Example with dynamic data: http://jsfiddle.net/BlackLabel/ynqu4ckt/ – ppotaczek Sep 13 '21 at 13:26
so i copy this code to my angular component and it should work ? – Khalil Laouini Sep 13 '21 at 13:34
Yes, chart options are the same, you only need to create a chart in a different way. Please check examples and documentation for the wrapper. – ppotaczek Sep 14 '21 at 08:55
i tried but didn't work. can u help me with more explanation – Khalil Laouini Sep 15 '21 at 10:40
Here: https://stackblitz.com/edit/highcharts-angular-basic-line-kbcqzg is a simple example with your data in Angular. – ppotaczek Sep 15 '21 at 12:11
sir with all do respect u put in in a static mode again . i want it to call the data with a service from api . thanx in advance – Khalil Laouini Sep 16 '21 at 22:38
2

In the demo below you might see how this should work: https://stackblitz.com/edit/highcharts-angular-data-from-service-2-5oxanp – Karol Kołodziej Sep 17 '21 at 10:02

How to create chart using Springboot Json api

1 Answers1