PDA

View Full Version : Adding Data to Chart Store



fsleeman
30 Sep 2013, 1:29 PM
I have a pie chart that I am trying to add additional entries dynamically. When I try this:


projectsChartStore.add({project: 'foo2', size: 900});


I get a lot of:
Unexpected value NaN parsing x attribute.
Unexpected value NaN parsing y attribute.
el.dom.setAttribute(key, attrs[key]);

I checked the record's values in Firebug and everything seemed to be OK. This app is using MVC this does not work:


this.getProjectsStore().on({
load: this.test3,
scope: this
});

...

test3: function() {
var projectsChart = this.getProjectschart();
var projectsChartStore = projectsChart.store;
projectsChartStore.add( {project: 'foo2', size: '900' } );
}


However this does:


this.control({
'projectschart': {
render: this.loadProjectsChart
}
});
...
loadProjectsChart: function() {
var projectsChart = this.getProjectschart();
var projectsChartStore = projectsChart.store;
var projectsStore = this.getProjectsStore();
projectsChartStore.add({project: 'foo2', size: 900});
},


Why does the first example and the second does not? In both cases the chart store is accessible. I even preloaded the store with some hard coded values to see if that made a difference, but it doesn't change the behavior for any case. I cannot use the second cause code because not all for the other stores have been loaded.

Farish
1 Oct 2013, 12:55 AM
how are your chart store's fields defined?

fsleeman
1 Oct 2013, 6:21 AM
Here is the store config in the charts file:



store: {
fields: [{ name: 'project', type: 'string'}, {name: 'size', type: 'integer'}],
autoLoad: true,
autoSync: true,
data: [ { project: 'bar', size: 99},
{ project: 'bar2', size: 199}
]
},

Farish
1 Oct 2013, 6:31 AM
I tried modifying the example code on this page but I dont get any error on adding another record to the store after creation of the chart:

http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.chart.series.Pie

Can you extract the chart and make a working test case?

fsleeman
1 Oct 2013, 8:23 AM
Here is the chart:


Ext.define('TestProject.view.ProjectsChart', {
extend: 'Ext.chart.Chart',
alias: 'widget.projectschart',
width: 400,
height: 300,
store: {
fields: [{ name: 'project', type: 'string'}, {name: 'size', type: 'integer'}],
autoLoad: true,
autoSync: true,
data: [ { project: 'bar', size: 99},
{ project: 'bar2', size: 199}
]
},
shadow: true,
legend: {
position: 'right'
},
insetPadding: 25,
theme: 'Base:gradients',
series: [{
type: 'pie',
field: 'size',
showInLegend: true,
tips: {
trackMouse: true,
width: 140,
height: 40,
renderer: function(storeItem, item) {
this.setTitle(storeItem.get('project') + ': ' + storeItem.get('size') + ' views');
}
},
label: {
field: 'project',
display: 'rotate',
contrast: true,
font: '12px "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif'
}
}],
initComponent: function () {
this.callParent(arguments);
}
});


And the controller:


Ext.define("TestProject.controller.FileController", {
extend: 'Ext.app.Controller',

stores: ['Projects', 'Files', 'UserFiles' ],
views: ['SimpleTree', 'UserFileViewer', 'MainTabView', 'ProjectsView', 'GraphView', 'TestGraph', 'TestGraphPanel',
'ProjectsChart', 'ProjectsChartPanel'],

refs: [
{
ref: 'testgraph',
selector: 'testgraph'
},
{
ref: 'projectschart',
selector: 'projectschart'
},
{
ref: 'projectsview',
selector: 'projectsview'
}
],

init: function () {
this.getProjectsStore().on({
load: this.test3,
scope: this
});

this.control({
'testgraph': {
render: this.updateGraphStore
},
'projectschart': {
render: this.loadProjectsChart
}
});
},
loadProjectsChart: function() {
console.log('loadProjectsChart');
var projectsChart = this.getProjectschart();
var projectsChartStore = projectsChart.store;
projectsChartStore.add( {project: 'foo2', size: '1900' } );
},
test3: function() {
console.log('test3');
var projectsChart = this.getProjectschart();
var projectsChartStore = projectsChart.store;
projectsChartStore.add( {project: 'foo2', size: '3500' } );
},
updateGraphStore: function() {
console.log('after view load event');
var myGraph = this.getTestgraph();
var graphStore = myGraph.store;
var rootNode = this.getUserFilesStore().getRootNode();
var users = rootNode.childNodes;
for(var i = 0; i < users.length; ++i) {
graphStore.add({name: users[i].get('text'), size: users[i].get('size')});
}
}
});


The chart is being loaded in a panel inside of of tab. While I was removing unrelated code for testing I noticed that adding entries to the chart works in all cases when the chart panel is the first one loaded in the tab list. If any other panel is listed first in the tab list the chart won't display correctly and the generates those errors.

Here is an exaple of the tab panel which works:


Ext.define('TestProject.view.MainTabView', {
activeTab: 0,
extend: 'Ext.tab.Panel',
alias: 'widget.maintabview',
layout: 'fit',
items: [
{
xtype: 'chartview'
},
{
xtype: 'projectsview'
}
],
initComponent: function () {
this.callParent(arguments);
}
});