This is my code an any one tell me what is the problem. i'm not getting data into pie chart here. i'm getting these error
Error: Problem parsing d="M125,125LNaN,NaNA115,115,0,0,1,NaN,NaNLNaN,NaNA115,115,0,0,1,NaN,NaNLNaN,NaNL125,125Z".
These chart i want to display one of my panel inside first tab. But i'm not getting this pie chart
This is my
servlet code
--------------------USCities.java------------------------------------
package com.pol;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.pol.util.City;
import com.pol.util.CityInformation;
import com.google.gson.Gson;
import com.google.gson.JsonArray;
import com.google.gson.JsonElement;
import com.google.gson.JsonObject;
public class USCities extends HttpServlet {
private static final long serialVersionUID = 1L;
public USCities() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request,response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String start = request.getParameter("start");
String limit = request.getParameter("limit");
PrintWriter out = response.getWriter();
response.setContentType("text/html");
CityInformation cityInformation = new CityInformation();
ArrayList<City> cityList = cityInformation.getCities(start,limit);
//System.out.println("cityList----------"+cityList);
Gson gson = new Gson();
JsonArray arrayObj = new JsonArray();
for(int i=0;i<cityList.size();i++){
//System.out.println("cityList-----1-----"+cityList.get(i).toString());
City city = cityList.get(i);
JsonElement cityObj = gson.toJsonTree(city);
// System.out.println("Json Element----"+cityObj);
arrayObj.add(cityObj);
}
JsonObject myObj = new JsonObject();
myObj.addProperty("success", true);
myObj.add("cityList", arrayObj);
myObj.addProperty("totalCount", limit);
out.println(myObj.toString());
out.close();
}
}
------------------------My panel code---------------------------
Ext.onReady(function() {
//-------------------------------------------------Displaying series chart in FS Set-----------
var store = Ext.create('Ext.data.Store', {
fields: ['name', 'data1', 'data2', 'data3', 'data4', 'data5'],
model: 'Chart',
proxy: {
type: 'ajax',
url: 'json/series.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});
var series = Ext.create('Ext.chart.Chart', {
//--> if we didn't put this with in comment this chart will be display on backside also for first time loading
// renderTo: Ext.getBody(),
width: 500,
height: 200,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data1', 'data2'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
xField: 'name',
yField: 'data1',
markerConfig: {
type: 'cross',
size: 4,
radius: 4,
'stroke-width': 0
}
}, {
type: 'line',
highlight: {
size: 7,
radius: 7
},
axis: 'left',
fill: true,
xField: 'name',
yField: 'data2',
markerConfig: {
type: 'circle',
size: 4,
radius: 4,
'stroke-width': 0
}
}]
});
//-------------------------------------------------End Series Chart----------------------------
//-------------------------------------------------Yield Cureve-Graph panel-ColumnChart.json Start Here-----------------------------------------------
Ext.define('Chart', {
extend: 'Ext.data.Model',
fields: ['name', 'data']
});
var store = Ext.create('Ext.data.Store', {
model: 'Chart',
proxy: {
type: 'ajax',
url: 'json/ColumnChart.json',
reader: {
type: 'json',
root: 'data'
}
},
autoLoad: true
});
var Panel= Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 500,
height: 230,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'Sample Values',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
fields: ['name'],
title: 'Sample Metrics'
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data'));
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'name',
yField: 'data'
}]
});
//-----------------------------------------------Chart End Here------------------------------------------
//-----------------------------------------Pie Chart Start Here---------------------------------------
Ext.define('Chart', {
extend: 'Ext.data.Model',
fields: ['name',
'population',
'lastYearPopulation']
});
var store = Ext.create('Ext.data.Store', {
model: 'Chart',
proxy: {
type: 'ajax',
url: 'USCities',
reader: {
type: 'json',
root: 'cityList',
// totalProperty: 'totalCount',
successProperty: 'success'
}
},
autoLoad: true
});
var piechart = Ext.create('Ext.chart.Chart', {
renderTo: Ext.getBody(),
width: 250,
height:250,
animate: true,
//autoScroll: true,
store: store,
theme: 'Base:gradients',
series: [{
type: 'pie',
//angleField: 'data',
showInLegend: true,
tips: {
trackMouse: true,
width: 100,
height: 28,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('name') + ' current Year Population is : ' + storeItem.get('population'));
}
},
highlight: {
segment: {
margin: 10
}
},
label: {
field: 'name',
display: 'rotate',
contrast: true,
font: '13px Arial Black'
}
}]
});
//-----------------------------------------Pie Chart End Here-----------------------------------------
var YieldCurves = Ext.create('Ext.panel.Panel', {
title: 'Yield Curves',
layout: 'card',
deferredRender: true,
title: 'Yield Curves',
layout: {
type: 'hbox',
align: 'stretch',
padding: 10
},// configuring tab width
tabConfig: {
width: 250
},
defaults: {
flex: 1
},
items: [{
xtype: 'container',
margins: '0 5 0 0',
layout: {type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'Yield Curves List',
items:[piechart],
margins: '0 0 5 0'
}, {
title: 'Yield Curve'
}]
}, {
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'Graph',
items:[Panel],
margins: '0 0 5 0'
}, {
title: 'Trend Analysis'
}]
}]
});var FXSet = Ext.create('Ext.panel.Panel', {
title: 'FX Set',
layout: {
type: 'hbox',
align: 'stretch',
padding: 10
},
tabConfig: {
width: 250
},
defaults: {
flex: 1
},
items: [{
xtype: 'container',
margins: '0 5 0 0',
layout: {type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'FX Rates List',
margins: '0 0 5 0'
}, {
title: 'FX Curve',
items:[series]
}]
}]
});
var MarketData = Ext.create('Ext.panel.Panel', {
title: 'Market Data',
layout: {
type: 'hbox',
align: 'stretch',
padding: 10
},
tabConfig: {
width: 250
},
defaults: {
flex: 1
},
items: [{
xtype: 'container',
margins: '0 5 0 0',
layout: {type: 'vbox',
align: 'stretch',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title: 'Instruments List',
margins: '0 0 5 0',
width:1000
}, {
title: 'Histoical Prices'
}]
}, {
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch',
margins: '0 0 5 0',
animate: true
},
defaults: {
flex: 1,
frame: true
},
items: [{
title:'Trend Analysis',
margins: '0 0 5 0'
}/*, {
title: 'Purchase History'
}*/]
}]
});
var contentPanel = Ext.create('Ext.tab.Panel', {
region: 'center',
margins: '0 5 5 0',
activeTab: 0,
collapsible: false,
autoScroll: true,
items: [YieldCurves, FXSet,MarketData]
});
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [contentPanel]
});
});