CODEWITHSUNDEEP
javajavascriptmorris.js
Sirolegunnar
Sirolegunnar

Reputation: 41

binding Morris Donut Chart

I don´t know how to bind a morris donut chart. I have a class called customer:

public class Customer {

    private Long id;

    private String name;

    private String email;

    private Address address;  

 //+ constructors + getter and setters

and a class called address:

public class Address {

    private Long id;

    private String country;

    private String city;

    private String street;

    private String zip;

//+ constructors + getter and setters

I have a Rest controller which returns all the customers in the DB:

1:  {
    id: 2
    name: "Sydney Garrett"
    email: "[email protected]"
    address: {
             id: 38
             country: "Spain"
             city: "Madrid"
             street: "P.O. Box 318, 7554 Natoque Avenue"
             zip: "92394"
             }
    }
2:  {
    id: 3
    name: "Peter Phillips"
    email: "[email protected]"
    address: {
             id: 78
             country: "Spain"
             city: "Vigo"
             street: "6967 Id, Av."
             zip: "11498"
   }
}

Now, I want to bind a Morris Donut with the city name and the number of customers from each city (for example: Madrid 20, Vigo 12, Barcelona 30)

I'm trying to do something like this in js code:

$.getJSON('http://localhost:8080/spring/customers/all', function(data){

    Morris.Donut({
         element: 'morris-donut-chart',
         data: data
        })

But I don´t know how to prepare that data (count customers from each city) in the js code. Any suggestion?

Upvotes: 1

Views: 749

Answers (1)

JoeyZero
JoeyZero

Reputation: 575

I just implemented something similar. Morris is not able to count and group your raw data for you, you will need to do this in your server side code. I used this class for my data points and just returned a list of them to my Morris donut graph.

public class DonutGraphDataPoint
{
    public string label { get; set; }
    public int value { get; set; }
}

So you will have to manipulate your data so that each label is your city and each value is your count.

So once you implement it, your JSON result that is returned to Morris should look like:

[{"label":"Madrid","value":20}, 
{"label":"Vigo","value":12}, 
{"label":"Barcelona","value":30}]

Upvotes: 1

Related Questions