I made a servlet which creates a Map Object:

Map<String, Integer> data = new LinkedHashMap<String, Integer>();

fills in data and returns a response in JSON format using google JSON:

String json = new Gson().toJson(data);

All this works fine when retrieving data and iterating them into a table. But I need it in special format for the Highcharts plugin:

series: [{
    name: 'Monday',
     data: [10]
    }, {
     name: 'Tuesday',
     data: [20]
  }, {
     name: 'Wednesday',
     data: [30]
    }, {
     name: 'Thursday',
     data: [40]          
    }, {
     name: 'Friday',
     data: [50]
    }, {
     name: 'Saturday',
     data: [60]            
    }, {
     name: 'Sunday',
     data: [70]             
}]

In order to achieve this you have to create the script as shown below:

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            rightMargin: 80
        },

        title: {
            text: 'Weekdays'
        },
        subtitle: {
            text: 'Source: somewhere in a calendar'
        },

         xAxis: {
            labels: {
                enabled: false
        }
        },

        yAxis: [
            {
                min: 0,
                title: {
                    text: 'Amount'
                 }
            },
            {
                linkedTo: 0,
                opposite: true
            }
        ],

         series: []
    };

    $.getJSON('WeekdayServlet', function(data) {

        var series = [];

        $.each(data, function(key, value) {

            series.name = key;
            series.data = value;

        options.series.push(data);
    });

    // Create the chart
    var chart = new Highcharts.Chart(options);

 }); 

Anyhow, I am doing something wrong here. Either in the iteration or how I "initialize" series.

Here are my sources for better understanding:

• /
• (point 3.1 Case study: preprocessing the data)

I made a servlet which creates a Map Object:

Map<String, Integer> data = new LinkedHashMap<String, Integer>();

fills in data and returns a response in JSON format using google JSON:

String json = new Gson().toJson(data);

All this works fine when retrieving data and iterating them into a table. But I need it in special format for the Highcharts plugin:

series: [{
    name: 'Monday',
     data: [10]
    }, {
     name: 'Tuesday',
     data: [20]
  }, {
     name: 'Wednesday',
     data: [30]
    }, {
     name: 'Thursday',
     data: [40]          
    }, {
     name: 'Friday',
     data: [50]
    }, {
     name: 'Saturday',
     data: [60]            
    }, {
     name: 'Sunday',
     data: [70]             
}]

In order to achieve this you have to create the script as shown below:

$(document).ready(function() {
    var options = {
        chart: {
            renderTo: 'container',
            defaultSeriesType: 'column',
            rightMargin: 80
        },

        title: {
            text: 'Weekdays'
        },
        subtitle: {
            text: 'Source: somewhere in a calendar'
        },

         xAxis: {
            labels: {
                enabled: false
        }
        },

        yAxis: [
            {
                min: 0,
                title: {
                    text: 'Amount'
                 }
            },
            {
                linkedTo: 0,
                opposite: true
            }
        ],

         series: []
    };

    $.getJSON('WeekdayServlet', function(data) {

        var series = [];

        $.each(data, function(key, value) {

            series.name = key;
            series.data = value;

        options.series.push(data);
    });

    // Create the chart
    var chart = new Highcharts.Chart(options);

 }); 

Anyhow, I am doing something wrong here. Either in the iteration or how I "initialize" series.

Here are my sources for better understanding:

• http://jsfiddle/PPAUx/718/
• http://www.highcharts./documentation/how-to-use (point 3.1 Case study: preprocessing the data)

• javascript
• jquery
• json
• servlets
• highcharts

• mind telling us what the problem is ? – Val Commented Mar 25, 2011 at 13:03
• either series gets filled with the last index of the key/value pair or series can't be shown at all. I need all of them instead. That points out that the push method get's overwritten until last index is shown. Allthough I need it as a speical array form (shown in the series example above). – Ed Michel Commented Mar 25, 2011 at 13:08

1 Answer 1

The [] should map to a Java collection such as List or an array. The {} should map to a Map or some Javabean.

So, the desired JSON format can be translated/achieved as follows:

public class Serie {
    private String name;
    private Integer[] data;

    public Serie() {
        // Keep default c'tor alive.
    }

    public Serie(String name, Integer... data) {
        this.name = name;
        this.data = data;
    }

    // Add/generate getters/setters/etc.
}

and

List<Serie> series = new ArrayList<Serie>();
series.add(new Serie("Monday", 10));
series.add(new Serie("Tuesday", 20));
series.add(new Serie("Wednesday", 30));
// ...
Map<String, Object> data = new HashMap<String, Object>();
data.put("series", series);
// ...
String json = new Gson().toJson(data);
// ...