PDA

View Full Version : Ext.chart.ColumnChart created but not visible



luca.santaniello
2 Jul 2010, 1:39 AM
Hi all,

I created my first chart using Ext.chart.ColumnChart. Chart is present in my page but it is not visible. Help me...



var data = [
['Ext JS',115000],
['jQuery',250100],
['Prototype',150000],
['mootools',75000],
['YUI',95000],
['Dojo',20000],
['Sizzle',15000]
];

//we create the Store that will manipulate the information
var store = new Ext.data.ArrayStore({
fields:[{name:'framework'},{name:'users', type:'float'}]
});

store.loadData(data);

var columnChart = new Ext.chart.ColumnChart({
store: store,
xField: 'framework',
yField: 'users',
width:150,
height: 150
});

var panel1 = new Ext.Panel({
title: 'Column chart example',
items:[columnChart],
width:450,
height: 250
});

var main = new Ext.Panel({
renderTo: 'content',
width:450,
defaults: {
height:250,
collapsible: true,
border:false,
titleCollapse: true
},
items: [panel1]
});


Thanks in advance

Condor
2 Jul 2010, 1:59 AM
Why do 'main' and 'panel1' not have a layout? If you don't specify a layout, the default 'auto' layout will be used, which doesn't size it's children. Also, why do you event need a 'main' panel, if it's sole purpose is to hold another panel?

But the main reason you are not seeing the chart, is because you didn't specify 'series' (and yField is a config option of a series and not of a chart).

luca.santaniello
2 Jul 2010, 2:18 AM
But the main reason you are not seeing the chart, is because you didn't specify 'series' (and yField is a config option of a series and not of a chart).

Thanks for reply, but i don't understand how can i set series...

My code is



var data = [
['Ext JS',115000],
['jQuery',250100],
['Prototype',150000],
['mootools',75000],
['YUI',95000],
['Dojo',20000],
['Sizzle',15000]
];

//we create the Store that will manipulate the information
var store = new Ext.data.ArrayStore({
fields:[{name:'framework'},{name:'users', type:'float'}]
});

store.loadData(data);

var columnChart = new Ext.chart.ColumnChart({
store: store,
xField: 'framework',
yField: 'users',
width:150,
height: 150
});

var panel1 = new Ext.Panel({
title: 'Column chart example',
items:[columnChart],
width:450,
height: 250,
renderTo: 'content',
layout: 'fit'
});


can help me please?

Thanks

Condor
2 Jul 2010, 2:28 AM
Better, but you still didn't specify series, e.g.

xField: 'framework',
series: [{
yField: 'users'
}]

luca.santaniello
2 Jul 2010, 2:43 AM
Better, but you still didn't specify series, e.g.

xField: 'framework',
series: [{
yField: 'users'
}]

Thanks,

I modified code:



var columnChart = new Ext.chart.ColumnChart({
store: store,
xField: 'framework',
series: [{
yField: 'users'
}],
width:150,
height: 150
});


but graph is hidden! :(

Condor
2 Jul 2010, 4:02 AM
It looks like you don't even need the 'series' for a simple chart and your previous example was correct.

I just tested it and it displayed the chart correctly, so there must be something else wrong with your page.

luca.santaniello
2 Jul 2010, 4:13 AM
It looks like you don't even need the 'series' for a simple chart and your previous example was correct.

I just tested it and it displayed the chart correctly, so there must be something else wrong with your page.

My html page is:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
</head>

<body>

<div id="content" ></div>

<script type="text/javascript" src="script.js"></script>

</body>
</html>


Thanks

Condor
2 Jul 2010, 4:14 AM
And what is script.js?

luca.santaniello
2 Jul 2010, 4:22 AM
My script.js is



var data = [
['Ext JS',115000],
['jQuery',250100],
['Prototype',150000],
['mootools',75000],
['YUI',95000],
['Dojo',20000],
['Sizzle',15000]
];

//we create the Store that will manipulate the information
var store = new Ext.data.ArrayStore({
fields:[{name:'framework'},{name:'users', type:'float'}]
});

store.loadData(data);

var columnChart = new Ext.chart.ColumnChart({
store: store,
xField: 'framework',
yField: 'users',
width:150,
height: 150,
autoShow: true
});

var panel1 = new Ext.Panel({
title: 'Column chart example',
items:[columnChart],
width:450,
height: 250,
renderTo: 'content',
layout: 'fit'
});

Condor
2 Jul 2010, 4:29 AM
Your panel uses renderTo, so it needs to be wrapped inside Ext.onReady!

luca.santaniello
2 Jul 2010, 4:31 AM
This is file.zip

luca.santaniello
2 Jul 2010, 5:02 AM
thanks very much!