After successfully creating a pie chart using ExtJS with JSON values through AJAX calling, I encountered an issue when trying to do the same with JSON values retrieved from a file named myjson.json. Can anyone advise me on how to draw a pie chart by retrieving JSON values from a file (myjson.json) using the code snippet provided below?
Here is the code snippet:
Ext.onReady(function() {
var getResources,getResources1;
var flag=0;
Ext.Ajax.request({
dataType : "json",
url: 'getHSEXmatrix.action',
params: {
},
success: function(response){
getResources = Ext.decode(response.responseText);
createChart3(getResources);
}
});
var createChart3 = function(resources) {
var store = Ext.create('Ext.data.JsonStore', {
fields: ['name', 'data'],
data: resources
});
Ext.create('Ext.chart.Chart', {
renderTo: 'myExample3',
width: 500,
height: 300,
animate: true,
store: store,
axes: [{
type: 'Numeric',
position: 'bottom',
fields: ['data'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
title: 'No of actions',
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'left',
fields: ['name'],
title: 'Exclation Matrix'
}],
series: [{
type: 'bar',
axis: 'bottom',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('name') + ': ' + storeItem.get('data') + ' views');
}
},
label: {
display: 'insideEnd',
field: 'data',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'horizontal',
color: '#333',
'text-anchor': 'middle'
},
xField: 'name',
yField: 'data'
}]
});
}
});