iterate JSON response with jQuery for Highcharts
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 doi开发者_Python百科ng something wrong here. Either in the iteration or how I "initialize" series.
Here are my sources for better understanding:
- http://jsfiddle.net/PPAUx/718/
- http://www.highcharts.com/documentation/how-to-use (point 3.1 Case study: preprocessing the data)
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);
// ...
精彩评论