using extjs when json is dynamically passed pie-chart is not drawn
I've drawn the pie-chart successfully when i directly pass the data like
as shown below
data: [{
'name': 'metric one',
'data': 10
}, {
'name': 'metric two',
'data': 7
}, {
'name': 'metric three',
'data': 5
}, {
'name': 'metric four',
'data': 2
}, {
'name': 'metric five',
'data': 27
}]
});
but when i tried to bring those json datas through ajax i'm not getting
the pie-chart. can anyone please tell me some solution for this.
index.jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>Ext.chart.series.Pie Example</title>
<link rel="stylesheet"
href="http://cdn.sencha.io/try/extjs/4.1.0/resources/css/ext-all-gray.css"/>
<script
src="http://cdn.sencha.io/try/extjs/4.1.0/ext-all-debug.js"></script>
<script src="extJS/app.js"></script>
</head>
<body>
<div id="myExample"></div>
</body>
</html>
app.js
Ext.onReady(function() {
Ext.Ajax.request({
url: 'getJsonforPie.action',
dataType : "json",
params: {
},
success: function(response){
getResources = response.responseText;
alert(JSON.stringify(getResources))
}
});
// var store = Ext.create('myStore');
//to load data use store.load()
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: getResources
// [{
// 'name': 'metric one',
// 'data': 10
// }, {
// 'name': 'metric two',
// 'data': 7
// }, {
// 'name': 'metric three',
// 'data': 5
// }, {
// 'name': 'metric four',
// 'data': 2
// }, {
// 'name': 'metric five',
// 'data': 27
// }]
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample',
width: 500,
height: 350,
animate: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function(storeItem, item) {
// calculate and display percentage on hover
var total = 0;
store.each(function(rec) {
total += rec.get('data');
});
this.setTitle(storeItem.get('name') + ': ' +
Math.round(storeItem.get('data') / total * 100) +
'%');
}
},
highlight: {
segment: {
margin: 20
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '18px Arial'
}
}]
});
});
struts.xml
<action name="getJsonforPie" class="commonpackage.DashboardUtilities"
method="getJsonforPie"/>
getJsonforPie method
public void getJsonforPie() throws IOException
{
HttpServletResponse response= (HttpServletResponse)
ActionContext.getContext().get(StrutsStatics.HTTP_RESPONSE);
JSONArray zoneAreas = new JSONArray();
for(int i=1;i<5;i++)
{
HashMap map=new HashMap();
map.put("name", "metric "+i);
map.put("data", 10);
zoneAreas.put(map);
}
System.out.println(zoneAreas.toString());
response.getWriter().write(zoneAreas.toString());
}
No comments:
Post a Comment