PDA

View Full Version : Chart write wrong data



alfa19
26 Feb 2014, 5:45 AM
Hi all,

my chart draws wrong data on the canvas:

48071

As you can see the value is 10, but the chart shows about 4. Why this happens?

Here's the code:


Ext.onReady(function () {

generateData = function(){
var data = [];

var names = new Array('A', 'B', 'C', 'D', 'E', 'F');
var points = new Array(10, 25, 11, 7, 36, 18);

for (i = 0; i < 6; i++) {
data.push({
name: names[i],
qty: points[i]
});
}
return data;
};

var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'qty'],
data: generateData()
});

var chartDiv = Ext.get("chart");

Ext.create('Ext.panel.Panel', {
width: chartDiv.getWidth(),
height: chartDiv.getHeight(),
renderTo: chartDiv,
layout: 'fit',
border: false,
items: {
id: 'chartCmp',
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
background: {
fill: '#310a0a'
},
axes: [
{
type: 'Numeric',
title: 'Qty',
position: 'left',
fields: ['qty'],
label: {
renderer: Ext.util.Format.numberRenderer('0')
},
},
{
type: 'Category',
title: 'Name',
position: 'bottom',
fields: ['name']
}
],
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('qty'));
}
},
xField: 'name',
yField: 'qty'
}]
}
});
});

Thanks

scottmartin
26 Feb 2014, 7:54 AM
What version of Ext4 are you using?

Paste this code into our fiddle: (Ext 4.2.1 default)
https://fiddle.sencha.com/#home



Ext.onReady(function () {

generateData = function(){
var data = [];

var names = new Array('A', 'B', 'C', 'D', 'E', 'F');
var points = new Array(10, 25, 11, 7, 36, 18);

for (i = 0; i < 6; i++) {
data.push({
name: names[i],
qty: points[i]
});
}
return data;
};

var store1 = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'qty'],
data: generateData()
});

var chartDiv = Ext.get("chart");

Ext.create('Ext.panel.Panel', {
width: 600,
height: 600,
renderTo: Ext.getBody(),
layout: 'fit',
border: false,
items: {
//id: 'chartCmp',
xtype: 'chart',
animate: true,
shadow: true,
store: store1,
//background: {
// fill: '#310a0a'
//},
axes: [
{
type: 'Numeric',
title: 'Qty',
position: 'left',
fields: ['qty'],
label: {
renderer: Ext.util.Format.numberRenderer('0')
},
},
{
type: 'Category',
title: 'Name',
position: 'bottom',
fields: ['name']
}
],
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('qty'));
}
},
xField: 'name',
yField: 'qty'
}]
}
});
});

alfa19
27 Feb 2014, 5:42 AM
Bah, without making any changes it starts to work.

Anyway now i've another issue.

I've an application with a panel (lay border) containing a treepanel on west and a chart on center. All works fine.

Then with sencha cmd v4.0.2.67 i create the all-classes.js. Apart from the fact the generated output is 1.1Mb (i've used only panel, tree-panel and chart), when i go to the application the width of the treeview containined into treepanel is 10000px. This does not happens with the application not minified.

The tree panel class


Ext.define('H2.view.Menu', {
extend: 'Ext.tree.TreePanel',
alias: 'widget.treeMenu',

id: 'TreeMenu',
width: 138,
rootVisible: false,
useArrows: true,
region: 'west',
baseCls: 'menu',
border: false,
bodyCls: 'background-color: #310a0a',

initComponent: function() {
var me = this;

Ext.applyIf(me, {
listeners: {
itemclick: {
fn: me.onMenuItemClick,
scope: me
},
afterrender: function(tp){
tp.getSelectionModel().select(0);
}
}
});

me.callParent(arguments);
},

onMenuItemClick: function(menu, rec, item){
Ext.getStore('Chart').load();
}
});

And this is the part where the panel is created:


//Draw main view
var menuStore = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "Year", leaf: true, dataIndex: 0, type: 'Silver', iconCls: 'bullet-white' },
{ text: "Month", leaf: true, dataIndex: 1, type: 'Red', iconCls: 'bullet-red' },
{ text: "Week", leaf: true, dataIndex: 2, type: 'Blue', iconCls: 'bullet-blue' }
]
}
});

var chartDiv = Ext.get("chart");

Ext.create('Ext.panel.Panel', {
width: chartDiv.getWidth(),
height: chartDiv.getHeight(),
renderTo: chartDiv,
layout: 'border',
border: false,
items: [{
region: 'center',
xtype: 'columnChart',
store: Ext.create('H2.store.Chart')
},{
xtype: 'treeMenu',
store: menuStore
}]
});



Thanks in advance for any help

scottmartin
27 Feb 2014, 5:56 AM
This does not happens with the application not minified.

This typically means that you are missing a requires.
You can build using


sencha app build testing


To see if it happens as well

alfa19
28 Feb 2014, 12:18 AM
I generate the min with this command:


sencha -sdk c:\xampp\htdocs\ext\421 compile -classpath=js\h2 page -yui -in home.php -out js\min\home.php

What command i must execute for testing? If is "sencha app build testing", in which folder i have to be before launch that command?

Thanks a lot

scottmartin
28 Feb 2014, 5:08 AM
I would suggest you simply use:


sencha app build

to build your app and see how it works instead of your custom compile.
This will create a production build under your app

sencha app build testing will create a testing dir under your build DIR

Just execute from the main application root dir

Unless you have a specific need for a custom compile to add/omit special code, then 'sencha app build' is all you need to do.
If this runs, you know you are not including all of the files needed to run your app by using the custom compile.