PDA

View Full Version : Can display simple panel, but not simple chart



jksuf
20 Jan 2015, 2:41 AM
Hi all,

I want to use some extjs components into a non-extjs web application.
To do so, I have referenced "ext-all-debug.js" and also "ext-theme-neptune-all.css" (and every css and image files required for this theme). That's it.

So in one of the js file of the web application, I tried to display a simple panel and a simple chart. The panel works fine and is diplayed in the html page, but the chart does not work . I have a log like this :
51534

I guess this is due to the "xtype" property set as 'chart', but i'm not enough experienced to know what to do. I tried doing some Ext.requires but nothing worked :s !

Here is the code:


Ext.create('Ext.panel.Panel', {
title: 'Results ed zzed d ',
height: 200,
width: 300,
renderTo: 'stats-header-container'
});


Ext.create('Ext.Container', {
renderTo: 'stats-tabs-container',
width:500,
height:500,
layout: 'fit',
items: [
{
xtype: 'chart',
store: {
fields: ['name', 'g1', 'g2'],
data: [
{"name": "Item-0", "g1": 18.34,"g2": -0.04},
{"name": "Item-1", "g1": 2.67, "g2": -14.87},
{"name": "Item-2", "g1": 1.90, "g2": -5.72},
{"name": "Item-3", "g1": 21.37,"g2": -2.13},
{"name": "Item-4", "g1": 2.67, "g2": -8.53},
{"name": "Item-5", "g1": 18.22,"g2": -4.62},
{"name": "Item-6", "g1": 28.51, "g2": -12.43},
{"name": "Item-7", "g1": 34.43, "g2": -4.40},
{"name": "Item-8", "g1": 21.65, "g2": -13.87},
{"name": "Item-9", "g1": 12.98, "g2": -35.44},
{"name": "Item-10", "g1": 22.96, "g2": -38.70},
{"name": "Item-11", "g1": 0.49, "g2": -51.90},
{"name": "Item-12", "g1": 20.87, "g2": -62.07},
{"name": "Item-13", "g1": 25.10, "g2": -78.46},
{"name": "Item-14", "g1": 16.87, "g2": -56.80}
]
},
interactions: ['itemhighlight', {
type: 'panzoom',
zoomOnPanGesture: true
}],


//set legend configuration
legend: {
docked: 'right'
},


//define the x and y-axis configuration.
axes: [
{
type: 'numeric',
position: 'left',
grid: true
},
{
type: 'category',
position: 'bottom'
}
],


//define the actual bar series.
series: [
{
type: 'bar',
xField: 'name',
yField: ['g1', 'g2'],
axis: 'left',
// Cycles the green and blue fill mode over 2008 and 2009
// subStyle parameters also override style parameters
subStyle: {
fill: ["#115fe6", "#94ae0a"]
}
}
]
}
]
});

Jad
20 Jan 2015, 6:01 AM
hello
... layout: 'fit', items: [ Ext.create('Ext.chart.Chart', { store: { fields: ['name', 'g1', 'g2'], data: ...
or include as a require Ext.chart.Chart