• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

not getting pie chart inside particular panel in extjs

 
Greenhorn
Posts: 13
Hibernate Spring Tomcat Server
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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]
});



});
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic